html, body {
	padding: 0;
	margin: 0;
	font-family: 'Roboto',sans-serif;
}

#background {
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#screen {
	width: 100vw;
	height: 100vh;
	background: transparent radial-gradient(closest-side at 50% 50%,
	#FFFFFF00 0%, #0000002B 100%) 0% 0% no-repeat padding-box;
}

#scene {
	display: none;
	box-sizing: border-box;
	width: 96vw;
	height: 100vh;
	padding: 1vh 2vw 0 2vw;
}

#question {
	box-sizing: border-box;
	display: table;
	background-color: white;
	margin: 0 0 3vh 0;
	width: 100%;
	border-radius: 2vmin;
	font-size: 1vmin;
	height: 20vh;
	padding: 0.1em 2em 0.1em 2em;
	text-align: center;
	user-select: none;
}

.cent {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#answers {
	width: 100%;
}

.answer {
	display: table;
	box-sizing: border-box;
	background-color: white;
	margin: 1vh 0vh 0vh 0vh;
	width: 70%;
	border-radius: 2vmin;
	font-size: 1vmin;
	text-align: center;
	padding: 1vmin;
	padding-top: 5vmin;
	padding-bottom: 5vmin;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-shadow: 5px 5px 10px #000000A6;
	cursor: pointer;
}

.answer.correct {
	background: #31C23F 0% 0% no-repeat padding-box;
}

.answer.wrong {
	background: #FF0000 0% 0% no-repeat padding-box;
}

#image {
	box-sizing: border-box;
	background-color: #fff;
	background-image: url("img/tulips.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 28%;
	height: 64vh;
	display: inline-block;
	float: right;
	border-radius: 2vmin;
	border: 5px solid #fff;
	box-shadow: 5px 5px 10px #000000A6;
}

#testimg {
	position: absolute;
	z-index: -1;
	width: 1px;
	height; 1px;
}

#score {
	margin-top: 2vh;
	background-color: #5c6bc0;
	height: 5vh;
	display: inline-block;
	font-size: 3vmin;
	padding: 0 2em 0 2em;
	border-radius: 0.5vmin;
	line-height: 5vh;
	user-select: none;
	color: #fff;
	border: 0.1vmin solid #FFFFFF;
}

#skipbtn {
	margin-top: 2vh;
	float: right;
	background-color: #7e57c2;
	height: 5vh;
	display: inline-block;
	text-align: right;
	font-size: 3vmin;
	padding: 0 2em 0 2em;
	border-radius: 0.5vmin;
	line-height: 5vh;
	clear: both;
}

.clearboth {
	clear: both;
}

.btn {
	display: inline-block;
	padding: 0.7em 1.7em;
	margin:0 0.3em 0.3em 0;
	border-radius: 0.2em;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-weight: 400;
	color: #FFFFFF;
	background-color: #3369ff;
	box-shadow: inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),
			inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),
			inset 0 0 0em 0.05em rgba(255,255,255,0.12);
	text-align: center;
	position: relative;
	cursor: pointer;
	user-select: none;
	box-shadow: 0px 5px 10px #00000073;
	border: 5px solid #FFFFFF;
}
.btn:active{
	box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),
		inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}
@media all and (max-width: 30em){
	.btn{
		display: block;
		margin: 0.4em auto;
	}
}