@font-face {
	font-family: 'ComicNeue';
	font-style: normal;
	font-weight: 400;
	src: local(''), url(../fonts/ComicNeue-Regular.woff2) format('woff2'), url(../fonts/ComicNeue-Regular.woff) format('woff')
}

body {
	font-family: 'ComicNeue', sans-serif;
	margin: 0;
}

body#homepage {
	background-color: #4682b4;
}

body#homepage>main>div {
	margin: 0 auto 30px;
	padding: 10px 25px;
	color: #000;
	background-color: #fff;
	width: 66%;
	border-radius: 10px;
	font-size: 24px;
}

#gameWindow {
	width: 100%;
	margin: auto;
	text-align: center;
}

a,
.blue {
	color: #4682b4;
	text-decoration: none;
}

a:hover {
	color: #B47846
}

.red {
	color: #B4464B;
}


#scoreContainer {
	margin: 10px;
	padding: 5px 0 10px;
	background-color: #b4eb7c;
	font-size: 32px;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	margin-bottom: 10%;
}

.playerScore {
	display: inline;
	padding: 5px;
	border: solid 2px #b4eb7c;
}

.currentTurn {
	background-color: #b37ceb;
	border: solid 2px #fff;
	border-radius: 20px;
}

#txtScore {
	font-size: 28px;
	margin-bottom: 3px;
}

#divQuestionContainer {
	font-size: 64px;
	margin: 0 auto 10px;
	padding: 10px 100px;
	display: inline-block;
	border-radius: 10px;
	background-color: #fff;
}


#gameQuestion {
	font-size: 78px;
	text-align: center;
}

.divChoiceBox {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
	border: solid 2px #000;
	border-radius: 10px;
	background-color: #fff;
	vertical-align: top;
	padding: 0 16px;
	text-align: center;
	padding: 10px;
	font-size: 56px;
}

.correctAnswer {
	background-color: #7ceb7c;
	color: #fff;
	border-radius: 10px;
}

.incorrectAnswer {
	background-color: #eb7c7c;
	color: #fff;
	border-radius: 10px;
}

#congratulations {
	position: fixed;
	font-size: 192px;
	text-align: right;
	bottom: 20px;
	right: 20px;
	max-width: 25%;
	max-height: 40%;
}
/*
#congratulations img {
    object-fit: contain;
    object-position: right bottom;
}
*/

main * {
	user-select: none;
}

.rainbow {
	filter: drop-shadow(2px 2px 2px #ff7149) drop-shadow(-2px 2px 2px #ff7149) drop-shadow(2px -2px 2px #ff7149) drop-shadow(-2px -2px 2px #ff7149) drop-shadow(2px 2px 2px yellow) drop-shadow(-2px 2px 2px yellow) drop-shadow(2px -2px 2px yellow) drop-shadow(-2px -2px 2px yellow) drop-shadow(2px 2px 2px #5bcc61) drop-shadow(-2px 2px 2px #5bcc61) drop-shadow(2px -2px 2px #5bcc61) drop-shadow(-2px -2px 2px #5bcc61) drop-shadow(2px 2px 2px #6adcfc) drop-shadow(-2px 2px 2px #6adcfc) drop-shadow(2px -2px 2px #6adcfc) drop-shadow(-2px -2px 2px #6adcfc) drop-shadow(2px 2px 2px #EE82EE) drop-shadow(-2px 2px 2px #EE82EE) drop-shadow(2px -2px 2px #EE82EE) drop-shadow(-2px -2px 2px #EE82EE);
}

.bronze {
	filter:
		drop-shadow(2px 2px 2px #cd7f32) drop-shadow(-2px 2px 2px #cd7f32) drop-shadow(2px -2px 2px #cd7f32) drop-shadow(-2px -2px 2px #cd7f32);
}

.silver {
	filter:
		drop-shadow(3px 3px 3px #c0c0c0) drop-shadow(-3px 3px 3px #c0c0c0) drop-shadow(3px -3px 3px #c0c0c0) drop-shadow(-3px -3px 3px #c0c0c0);
}

.gold {
	filter:
		drop-shadow(4px 4px 4px #ffd700) drop-shadow(-4px 4px 4px #ffd700) drop-shadow(4px -4px 4px #ffd700) drop-shadow(-4px -4px 4px #ffd700);
}

.platinum {
	filter:
		drop-shadow(6px 6px 6px #e5e4e6) drop-shadow(-6px 6px 6px #e5e4e6) drop-shadow(6px -6px 6px #e5e4e6) drop-shadow(-6px -6px 6px #e5e4e6);
}

.diamond {
	filter:
		drop-shadow(10px 10px 10px #b1f9ff) drop-shadow(-10px 10px 10px #b1f9ff) drop-shadow(10px -10px 10px #b1f9ff) drop-shadow(-10px -10px 10px #b1f9ff);
}

.mud {
	filter:
		sepia(1) drop-shadow(10px 10px 10px #70543e) drop-shadow(-10px 10px 10px #70543e) drop-shadow(10px -10px 10px #70543e) drop-shadow(-10px -10px 10px #70543e);
}

#answerInSentenceContainer.correct {
	color: #7ceb7c;
}

#answerInSentenceContainer.incorrect {
	color: #eb7c7c;
}
/*

.hidden{
visibility:hidden;
}
*/