body{
	padding: 0;
	margin: 0;	
	width:100vw;
	height: 100vh;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;	
}
.panel{
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
		background-color: rgba(0,0,0,0);
}
.question-container{
	margin: 10px;
	padding: 5px;
	width: 80vw;
	height: 15vh;
	background-color: #c7dddf;
	font-size: 1.75em;
	text-align: center;
	
}
.result{
	margin: 10px;
	padding: 5px;

	text-align: center;
	font-size: 2.5em;
	
}
/* taken out of above result
	width:80vw;
	height: 10vh;
*/


.option-container{
	display: flex;
	justify-content: space-around;
	margin: 10px;
	padding: 5px;
	width: 80vw;
	height: 15vh;
	background-color: rgba(0,0,0,0);
	
	
}
/*background-color: #9eb1b3;*/


.option{	
	padding: 10px;
	width: 15vw;
	height: 10vh;
	font-size: 1.5em;
	background-color: lightskyblue;
	border-radius: 25%;
}
.option:hover{
	background-color: lightgoldenrodyellow;
}
.navigation{
	width: 72vw;
	height: 10vh;
	margin: 10px;
	padding: 5px;
	display: flex;
	justify-content: space-around;
	background-color: rgba(0,0,0,0);
	
}
/* background-color:#c7dddf; */


.evaluate,.next{
	width:28vw;
	height: 8vh;
	padding: 5px;
	font-size: 1.75em;
}
.evaluate{
	background-color: #50DBB4;
}
/* #50DBB4 */

.next{
	color: black;
	background-color: lightpink;
}
/* background-color: #BF3325; */

.evaluate:hover{
	background-color: #00BBB4;
}
.next:hover{
	background-color: coral;
}




.answers{
	color: black;

	display: flex;
	justify-content: space-around;
	margin: 10px;
	padding: 5px;
	width: 80vw;
	height: 25vh;
	background-color: lightblue;
}










/* Super cool way to style two buttons at once

.evaluate:hover,.next:hover{
	background-color: #00CBB4 ;
}


*/