*{
	margin: 0;
	padding: 0;
}

body {
	background-color: #fafafa;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-family: Helvetica, sans-serif;
	color: #333;
}

#bottom, #middle, #top{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100vw;
}

#bottom, #top{
	flex-direction: column;
}
#top{
	flex: 3;
	justify-content: center;
}
#bottom{
	flex: 2;
	justify-content: flex-start;
}
#middle{
	flex: 6;
}

#highscore{
	font-size: 3.5em;
	font-weight: bold;
	/*color: #ff9100;*/
	color: #12a5ed;
}

#highscoreBox{
	margin-top: -2em;
	margin-bottom: 2em;
}

#continue{
	color: #12a5ed;
	margin-top: 1em;
	font-size: 2em;
}

#title{
	font-size: 4em;
	font-weight: lighter;
}

#left, #right{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#left:hover, #right:hover{
	cursor: pointer;
	opacity: .8;
}
#center{
	width: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#left{
	margin-right: -3vw;
}
#right{
	margin-left: -3vw;
}

#sign{
	font-size: 8em;
	font-weight: lighter;
}

.name{
	font-weight: lighter;
	font-size: 4em;
}

.fact{
	font-size: 2.5em;
}

.flagBox, .nameBox, .factBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 2em 0;
}

.flag{
	height: 10em;
}

.right{
	color: #1d7;
}
.wrong{
	color: #d11;
}
.normal{
	color: initial;
}

#category{
	font-size: 3em;
}