#game .game-page {
	width: 100%;
	height: 100%;
	background-color: white;
}

*:focus-visible {
	outline: none;
}

#game .game-pause,
#game .game-end-screen,
#game .game-error-screen {
	height: 100%;
	overflow: hidden;
}

#game .game-settings,
#game .geheugentraining,
#game .pim-pam-pet,
#game .bingo {
	height: 100%;
	overflow: hidden;
}

#game .game-start-screen {
	height: 100%;
}

#game .game-start-screen i {
	position: absolute;
	bottom: calc(var(--percentage-height) * 5);
	font-size: calc(var(--percentage-width) * 6);
	left: calc(var(--percentage-width) * 47);
}

#game .game-start-screen-loading-bar {
	position: absolute;
	bottom: calc(var(--percentage-height)* 5);
	left: calc(var(--percentage-width)* 25);
	width: calc(var(--percentage-width) * 50);
	border-radius: calc(var(--percentage-width) * 1);
}

#game .game-start-screen-loading-progress {
	height: calc(var(--percentage-height) * 2);
	border-radius: calc(var(--percentage-width) * 1);
	width: 0%;
	transition: width 1.5s linear;
}

#game .game-loading-bar {
	width: calc(var(--percentage-width) * 10);
	border-radius: calc(var(--percentage-width) * 1);
	background-color: lightgray;
}

#game .game-loading-progress {
	background-color: grey;
	height: calc(var(--percentage-height) * 1.5);
	border-radius: calc(var(--percentage-width) * 1);
	width: 0%;
	transition: width 1.5s linear;
}

#game .game-start-screen-loading-bar[color="red"] {
	background-color: #d48291;
}

#game .game-start-screen-loading-bar[color="red"] .game-start-screen-loading-progress {
	background-color: #bf475d;
}

#game .game-loading-overlay.active-pimpampet i {
	--fa-primary-color: #bf475d;
	--fa-secondary-color: #bf475d;
}

#game .game-start-screen-loading-bar[color="dark-green"] {
	background-color: #619861;
}

#game .game-start-screen-loading-bar[color="dark-green"] .game-start-screen-loading-progress {
	background-color: #266126;
}

#game .game-loading-overlay.active-woordzoeker i {
	--fa-primary-color: #266126;
	--fa-secondary-color: #266126;
}

#game .game-start-screen-loading-bar[color="blue"] {
	background-color: #79a0d6;
}

#game .game-start-screen-loading-bar[color="blue"] .game-start-screen-loading-progress {
	background-color: #3b6aab;
}

.game-loading-overlay.active-geheugentraining i {
	--fa-primary-color: #3b6aab;
	--fa-secondary-color: #3b6aab;
}

#game .game-start-screen-loading-bar[color="yellow"] {
	background-color: #d8d59d;
}

#game .game-start-screen-loading-bar[color="yellow"] .game-start-screen-loading-progress {
	background-color: #c2be75;
}

.game-loading-overlay.active-fotoquiz i {
	--fa-primary-color: #c2be75;
	--fa-secondary-color: #c2be75;
}

#game .game-start-screen-loading-bar[color="dark-yellow"] {
	background-color: #ba8e23;
}

#game .game-start-screen-loading-bar[color="dark-yellow"] .game-start-screen-loading-progress {
	background-color: #dba92a;
}

.game-loading-overlay.active-memory i {
	--fa-primary-color: #dba92a;
	--fa-secondary-color: #dba92a;
}

#game .game-start-screen-loading-bar[color="apricot"] {
	background-color: #f9d5c3;
}

#game .game-start-screen-loading-bar[color="apricot"] .game-start-screen-loading-progress {
	background-color: #f7cab4;
}

#game .game-start-screen-loading-bar[color="green"] {
	background-color: rgb(139, 198, 149);
}

#game .game-start-screen-loading-bar[color="green"] .game-start-screen-loading-progress {
	background-color: #549e60;
}

.game-loading-overlay.active-bingo i {
	--fa-primary-color: #549e60;
	--fa-secondary-color: #549e60;
}

#game .container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#game .normal-button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 5);
	width: fit-content;
	height: calc(var(--percentage-height) * 10);
	color: white;
	border-radius: calc(var(--percentage-height) * 1.5);
	margin: calc(var(--percentage-height) * 1);
	text-align: center;
}

.modal-normal-button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 5);
	width: fit-content;
	height: calc(var(--percentage-height) * 10);
	color: white;
	border-radius: calc(var(--percentage-height) * 1.5);
	margin: calc(var(--percentage-height) * 1);
	text-align: center;
	border: solid 1px black;
}

/* Title bar */
#game .titlebar {
	height: calc(var(--percentage-height) * 15);
	background-color: #f9f9f9;
	box-shadow: 0 0 calc(var(--percentage-width) * 1) rgba(0, 0, 0, 0.37);
	color: var(--illi-black);
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
	position: absolute;
	/* bottom: 0; */
	top: 0;
	width: 100%;
}

#game .title {
	align-self: center;
	font-size: calc(var(--percentage-width) * 3);
	font-weight: 100;
}

#game .titlebar-button,
#game .settings-close {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 4);
	width: calc(var(--percentage-width) * 15);
	height: calc(var(--percentage-height) * 7);
	background-color: var(--illi-black);
	color: white;
	border-radius: calc(var(--percentage-height) * 1);
}

#game .settings-close {
	left: 9%;
	position: absolute;
	bottom: 86%;
}

#game .titlebar-button p {
	z-index: 2;
}

#game .titlebar-button:focus {
	outline: none;
}

#game .titlebar-button:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-black);
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 15.7);
	height: calc(var(--percentage-height) * 7.7);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
	border-color: rgba(45, 45, 45, 0.67);
	background: rgba(62, 62, 62, 0.206);
}

#game .rounds {
	width: calc(var(--percentage-width) * 15);
	overflow: hidden;
}

#game .empty-placeholder {
	width: calc(var(--percentage-width) * 15);
	overflow: hidden;
}

/* Start screen */
#game .start-screen-background {
	height: 100%;
	width: 100%;
	display: flex;
	object-fit: contain;
}

/* Settings */
#game .game-settings-component {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background-color: #0c0fa1;*/
}

/* Game background colours */
#game .game-start-screen .active-geheugentraining,
#game .game-loading-overlay.active-geheugentraining {
	background-color: #e1eeff;
}

#game .active-woordzoeker,
#game .game-loading-overlay.active-woordzoeker {
	background-color: #e3f1cd;
}

#game .active-pimpampet,
#game .game-loading-overlay.active-pimpampet {
	background-color: #f6cfd6;
}

#game .active-bingo,
#game .game-loading-overlay.active-bingo {
	background-color: #feead1;
}

#game .active-memory,
#game .game-start-screen .active-fotoquiz,
#game .game-loading-overlay.active-fotoquiz,
#game .game-loading-overlay.active-memory {
	background-color: #fffbb5
}

/* #game .spinner {
	position: absolute;
	padding: calc(var(--percentage-width) * 36.5);
	margin-top: calc(var(--percentage-width) * 2);
	width: calc(var(--percentage-width) * 7);
	height: calc(var(--percentage-width) * 10);
}

#game .splash-spinner {
	margin-left: calc(var(--percentage-width) * 10);
} */

#game .start {
	background-color: var(--illi-green);
	color: white;
	width: calc(var(--percentage-width) * 20);
	margin-bottom: calc(var(--percentage-height) * 2);
	margin-top: calc(var(--percentage-height) * 10);
}

#game .start-hidden {
	display: none;
}

#game .start p {
	z-index: 2;
}

#game .start:focus {
	outline: none;
	background-color: var(--illi-green);
	color: white;
}

#game .start:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-green);
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 21);
	height: calc(calc(var(--percentage-height) * 10) + calc(var(--percentage-width) * 1));
	background: var(--illi-light-green);
	border-radius: calc(var(--percentage-width) * 1);
}

/* Rounds */
#game .rounds-container {
	flex-direction: row;
}

#game .round-container {
	background-color: lightgray;
	border: calc(var(--percentage-height) * 0.3) solid black;
	border-radius: 20%;
	width: calc(var(--percentage-width) * 4);
	height: calc(var(--percentage-width) * 4);
	margin-right: calc(var(--percentage-width) * 0.3);
	margin-left: calc(var(--percentage-width) * 0.3);
}

#game .round {
	font-size: calc(var(--percentage-height) * 4);
	color: black;
	font-weight: 600;
	margin: 0;
}

#game #current-round {
	color: rgb(19, 122, 239);
}

/* Pause */
#game .game-pause-container {
	/* background-color: lightgray; */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

#game .pause-buttons-container {
	width: fit-content;
}

/* End Screen */
#game .game-end-screen-container {
	/* background-color: lightgray; */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

#game .end-buttons-container {
	width: fit-content;
}

#game .again,
#game .close,
#game .continue {
	background-color: var(--illi-green);
	width: calc(var(--percentage-width) * 18);
	margin-top: calc(var(--percentage-height) * 2);
}

#game .close {
	background-color: var(--illi-black);
	position: relative;
}

#game .again p,
#game .close p,
#game .continue p {
	z-index: 2;
}

#game .again:focus,
#game .close:focus,
#game .continue:focus {
	outline: none;
}

#game .again:focus::after,
#game .close:focus::after,
#game .continue:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid rgba(148, 56, 57, 0.72);
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 18);
	height: calc(var(--percentage-height) * 9);
	background: var(--illi-light-red);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
	width: calc(var(--percentage-width) * 18.5);
	height: calc(var(--percentage-height) * 11);
}

#game .continue:focus::after,
#game .again:focus::after {
	border-color: var(--illi-green);
	background: var(--illi-light-green);
}

#game .close:focus::after {
	border-color: rgba(45, 45, 45, 0.67);
	background: rgba(62, 62, 62, 0.206);
}

/* Game */
#game .game-container {
	align-items: normal;
	height: 100%;
}

/* Game error */
#game .game-error-container {
	width: 100%;
	height: calc(var(--percentage-height) * 80);
	display: flex;
	justify-content: center;
	align-items: center;
}

#game .error-message {
	font-size: calc(var(--percentage-width) * 3);
	width: calc(var(--percentage-width) * 75);
}

.game-loading-overlay {
	display: none;
	box-sizing: border-box;
	justify-content: flex-end;
	padding-bottom: calc(var(--percentage-height) * 5);
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: white;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	font-size: calc(var(--percentage-width) * 4);
	color: var(--illi-black);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}

.game-loading-overlay i {
	--fa-primary-color: #918e92;
	--fa-secondary-color: #918e92;
	margin: calc(var(--percentage-height) * 3.5);
}

.game-loading-icon {
	font-size: calc(var(--percentage-width) * 11);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: calc(var(--percentage-width) * 1);
	border: calc(var(--percentage-width) * 0.1) solid black;
	box-shadow: 0 0 calc(var(--percentage-width) * 1) rgba(0, 0, 0, 0.15);
	width: calc(var(--percentage-width) * 20);
	height: calc(var(--percentage-width) * 20);
	background-color: white;
	margin-top: calc(var(--percentage-height) * 10);
	margin-bottom: calc(var(--percentage-height) * 2);
}

.game-loading-text {
	font-size: calc(var(--percentage-width) * 3);
	margin-top: calc(var(--percentage-height) * 2);
	margin-bottom: calc(var(--percentage-height) * 3);
}