body{			/* body definition */
	font-family: 'Roboto Slab', serif;
	background: #fffaf0;
}

.container{ /* page wrapper */
	height: 330px;
	width: 1000px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%); /* this adjusts the container to the center of the page */
	background: #dcdcdc;
	padding: 20px;
	border: 1px solid #08038C;
	box-shadow: 0 0 8px 3px #fff;
}

.title{	 /* question title */
	padding-top: 20px;
	text-align: center;
	font-size: 36px;
	text-transform: uppercase;
	color: #08038C;
}

.question{	/* main question */
	padding: 20px;
	font-size: 22px;
	background: #08038C;
	border-radius: 20px;
	margin: 10px 0 10px 0;
	color: #f6f6f6;
}

.option{ 	/* multiple choice question */ 
	width: 470px;
	display: inline-block;
	padding: 10px 0 10px 15px;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.5);
	margin: 10px 0 10px 10px;
	color: #000000;
	border-radius: 20px;
}

.question2{ /* main question for text box input*/
	padding: 20px;
	font-size: 22px;
	background: #08038C;
	border-radius: 20px;
	margin: 10px 0 10px 0;
	color: #f6f6f6;
}

.optionA{ /* multiple choice question for text box input */
	width: 470px;
	display: inline-block;
	padding: 10px 0 10px 15px;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.5);
	margin: 10px 0 10px 10px;
	color: #000000;
	border-radius: 20px;
}
.option:hover{
	background: #08038C;
	color: #f6f6f6;
}

.next-btn{ /* next button settings */
	border: none;
	outline: none;
	background: #add8e6;
	width: 100px;
	height: 35px;
	border-radius: 20px;
	cursor: pointer;
	float: right;
	margin: 10px;
}

.next-btn:hover{
	background: #08038C;
	color: #f6f6f6;
}

.result{ /* result element */
	height: 100px;
	text-align: center;
	font-size: 75px;
}



footer{
	position:absolute;
	bottom:.5%;
}