#question {
	margin: calc(var(--percentage-height) * 2);
	text-align: center;
	margin-bottom: 0;
	/* height: 15vh; */
	height: calc(var(--percentage-height) * 15);
	justify-content: center;
	align-items: center;
	display: flex;
	overflow: hidden;
}

.questionText {
	margin: 0;
	font-size: calc(var(--percentage-height) * 5.5);
}

.answers-container {
	/* width: 45vw; */
	width: calc(var(--percentage-width) * 45);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	flex-direction: column;
	margin-top: calc(var(--percentage-height) * 3);
}

.answer-container-geheugentraining {
	color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	/* width: 33vw; */
	width: calc(var(--percentage-width) * 33);
	/* height: 16vh; */
	height: calc(var(--percentage-height) * 16);
}

.answer-text {
	position: absolute;
	display: flex;
	align-items: center;
	/* width: 25vw; */
	width: calc(var(--percentage-width) * 25);
	/* height: 10vh; */
	height: calc(var(--percentage-height) * 10);
	margin: 0;
	padding-left: calc(var(--percentage-width) * 5);
	/* font-size: 2.8vw; */
	font-size: calc(var(--percentage-width) * 2.8);
	color: black;
	z-index: 2;
	overflow: hidden;
}

.answer-box {
	/* padding-left: 1vw; */
	padding-left: calc(var(--percentage-width) * 1);
	/* padding-right: 1vw; */
	padding-right: calc(var(--percentage-width) * 1);
	/* border-radius: 1vh; */
	border-radius: calc(var(--percentage-height) * 1);
}

.answer:focus {
	outline: none;
}

.answer:focus::before {
	content: "";
	position: absolute;
	z-index: 1;
	/* left: 4vw; */
	left: calc(var(--percentage-width) * 7);
	border-top:  calc(var(--percentage-width) * 2) solid transparent;
	border-left:  calc(var(--percentage-width) * 4) solid var(--illi-purple);
	border-bottom:  calc(var(--percentage-width) * 2) solid transparent;
}

.answer:focus::after {
	border:  calc(var(--percentage-width) * 0.4) solid var(--illi-purple);
	content: "";
	position: absolute;
	width:  calc(var(--percentage-width) * 34);
	/* height: calc(12vh + 1vw); */
	height: calc(calc(var(--percentage-height) * 12) +  calc(var(--percentage-width) * 1));
	background: var(--illi-light-purple);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
}

.answer-box img {
	z-index: 2;
}

.answer-box.right:focus,
.answer-box.wrong:focus {
	outline: none;
}

.answer-box.right::after,
.answer-box.wrong::after {
	border: calc(var(--percentage-width) * 0.4) solid var(--illi-green);
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 34);
	height: calc(calc(var(--percentage-height) * 12) +  calc(var(--percentage-width) * 1));
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
}

.answer-box.right::after {
	border-color: var(--illi-green);
	background: var(--illi-light-green);
}

.answer-box.wrong::after {
	border-color: var(--illi-game-red);
	background: var(--illi-light-game-red);
}

.answer-box.right::before,
.answer-box.wrong::before {
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 4);
	height: calc(var(--percentage-width) * 4);
	z-index: 1;
	left: calc(var(--percentage-width) * 6.5);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.answer-box.right::before {
	background-image: url(../../assets/images/games/right.png);
	width: calc(var(--percentage-width) * 4.5);
	height: calc(var(--percentage-width) * 4.5);
}

.answer-box.wrong::before {
	background-image: url(../../assets/images/games/wrong.png);
}

.answers-image-container {
	display: flex;
	justify-content: center;
	height: 85%;
}

.question-image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2.5%;
	width: calc(var(--percentage-width) * 45);
	height: calc(var(--percentage-height) * 60);
	text-align: center;
	border: calc(var(--percentage-height) * 0.3) solid black;
	border-radius: calc(var(--percentage-height) * 1);
	background-image: url("../../assets/animations/spinner.gif");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.question-image-container img {
	object-fit: contain;
	height: 90%;
	width: 90%;
}

.answer-background {
	margin-bottom: 4%;
	margin-top: 4%;
	width: 100%;
}

.fade-overlay {
    width: calc(var(--percentage-width) * 45);
    height: calc(var(--percentage-height) * 60);
    position: absolute;
    background-color: white;
    z-index: 9;
    opacity: 1;
}

.fade-overlay.reveal {
    opacity: 0;
}

.fade-overlay.reveal.slow {
	opacity: 0;
    transition: opacity 15s ease-in;
}

.fade-overlay.reveal.fast {
	opacity: 0;
	transition: opacity 3s;
}

.geheugen-info-container{
	display: flex;
    width: calc(var(--percentage-width) * 90.5);
    justify-content: space-between;
    align-items: center;
    margin-left: calc(var(--percentage-width) * 10.5);
    margin-bottom: calc(var(--percentage-width) * 2.1);
}

.info-button-container{
	display: flex;
	flex-direction: row;
}

#game .geheugen-info-container .titlebar-button{
	height: calc(var(--percentage-height) * 4);
	margin-right: calc(var(--percentage-width) * 1.5);
}

#game .geheugen-info-container .titlebar-button:focus::after{
    width: calc(var(--percentage-width)* 18.2);
    height: calc(var(--percentage-height)* 9.5);
}

#game .geheugen-info-container .titlebar-button.repeat-button{
	background-color: var(--illi-purple);
}

#game .geheugen-info-container .titlebar-button.repeat-button:focus::after{
	background-color: var(--illi-light-purple);
	border-color: var(--illi-purple);
}

#game .geheugen-info-container .titlebar-button.repeat-button i{
	margin-right: calc(var(--percentage-width) * 1);
}