/*

FONTS:

font-family: 'Bangers', cursive;
font-family: 'Ceviche One', cursive;
font-family: 'Titillium Web', sans-serif;
font-family: 'Chewy', cursive;

*/

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	display: grid;
	grid:
		". . ." 5vh
		". game ." auto
		". . ." 15vh
		/ 10vw 80vw 10vw;
	background-image: url('../images/background2.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	
	font-family: 'Titillium Web', sans-serif;
}





.game-container {
/*
	margin: 0 auto;
	width: 80%;
	height: 80vh;
*/
	grid-area: game;
/* 	height: 100%; */
	height: auto;
	width: 100%;
	min-height: 80vh;
	background: rgba(25, 25, 112, 0.75);
	border: 1px solid firebrick;
	border-radius: 1em;
	line-height: 1.6;
}
header {
	width: 90%;
	height: 10%;
	margin: 0 auto;
	border-bottom: 1px solid firebrick;
	font-size: 4em;
	color: #FFF;
	color: chartreuse;
	color: #EEC643;
	color: #FBCA03;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	
	font-family: 'Bangers', cursive;
/* 	font-family: 'Ceviche One', cursive; */
}
.content-container {
	width: 100%;
	height: 85%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	color: #FFF;
	text-align: center;
	overflow: hidden;
}
.start-menu {
	height: 100%;
}
.start-menu h2 {
	font-size: 1.5em;
	padding: 0.5em;
	padding-bottom: 0.5em;
}
.start-menu div {
	padding: 0.75em;
}
#start-button {
		padding: 1em;
}




.question-menu {
	width: 100%;
	height: 100%;
}
.timer {
	margin: 0.5em auto;
}
.question-container {
/* 	height: 50%; */
	height: auto;
	width: 75%;
	min-width: 75%;
/* 	margin: 2em auto; */
	margin: 1em auto;
	background: rgba(178, 34, 34, 0.5);
	border: 1px solid #FFF;
	border-radius: 1em;
}
.question {
	padding: 0.5em;
	border-bottom: 1px solid #FFF;
	width: 95%;
	margin: 0 auto;
}
/*
.option {
	color: aqua;
}
*/
/*
.option:hover {
	
}
*/
@media (hover:hover) {
    .option:hover {
        background: rgba(25, 25, 112, 0.75);
		cursor: pointer;
    }
}
.question-counter {
	margin-bottom: 1em;
}





.result {
	font-size: 1.2em;
	font-weight: 900;
	color: darkseagreen;
}
.incorrect {
	color: firebrick;
}
.image img {
	width: 500px;
	margin: 0.5em;
	border: 1px solid firebrick;
	border-radius: 1em;
	opacity: 0.75;
}
#answer {
	font-weight: 900;
}





.gameover-menu {
	width: 100%;
}
.gameover-menu div {
	margin: 0.5em auto;
}
.end-message {
	font-size: 2.5em;
	margin: 0.5em auto;
}
.end-stats {
	margin: 2em auto;
	background: rgba(178, 34, 34, 0.5);
	border: 1px solid #FFF;
	border-radius: 1em;
	padding: 0.5em;
	height: 50%;
	width: 75%;
	min-width: 75%;
}
.stats {
	font-size: 1.25em;
}
#new-game {
	padding: 1em;
	background: rgba(25, 25, 112, 0.75); 
	margin: 0.5em auto;
	border: none;
}
#new-game:hover {
	background: rgba(139, 0, 0, 0.75);
	background: rgba(251, 202, 3, 0.75);
	border: none;
}




.button {
	width: 25%;
	height: 1em;
	min-width: 175px;
	background: rgba(178, 34, 34, 0.75);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 1em auto;
	font-size: 0.75em;
	cursor: pointer;
	border: 1px solid midnightblue;
	border-radius: 1em;
	
	font-family: 'Chewy', cursive;
	color: #FFF;
}
.button:hover {
	background: rgba(139, 0, 0, 0.75);
}
.hidden {
	display: none;
}



@media screen and (max-width: 960px) {
	header {
		font-size: 2.25em;
		height: 10vh;
		padding: 1em 0;
	}
	.start-menu div {
		font-size: 0.75em;
	}
	.start-menu h2 {
		font-size: 1em;
		margin-top: 0.5em;
	}
	.timer {
		margin: 1em auto;
		box-sizng: border-box;
	}
	.question {
		font-size: 0.75em;
	}
	.option {
		font-size: 0.85em;
		border-bottom: 1px dashed rgba(25, 25, 112, 0.5);
	}
	#three {
		border-bottom: none;
	}
	.result,
	.answer {
		padding: 0 0.5em;
	}
	.answer-menu {
		width: 100%;
	}
	.image img {
		width: 325px;
	}
	.end-message {
		font-size: 1.5em;
		margin: 0.25 auto;
	}
	.gameover-menu div {
		margin: 1em auto;
	}
}
@media screen and (max-width: 420px) {
	.image img {
/* 		width: 275px; */
		width: 225px;
	}
	.timer {
		font-size: 0.75em;
		margin: 0.25em auto;
	}
	.start-menu h2 {
		font-size: 0.75em;
	}
	.question {
		font-size: 0.75em;
	}
	.end-message {
		font-size: 1em;
	}
/*
	.option {
		font-size: 0.75em;
	}
*/
}
/*
@media screen and (min-width 420px) {
	.option:hover {
		background: rgba(25, 25, 112, 0.75);
		cursor: pointer;
	}
}
*/