style.css

body
{
	font-family: 'Sans-serif';
	background-image: url("val_banner.svg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: 1600px 800px   
}

#heading
{
	margin-left:auto;
	margin-right:auto;
	width: 1000px;
	background: rgba(255,255,255,0.9);
	padding: 20px;
	border: 1px solid #00038c;
	box-shadow: 0 0 8px 3px #fff;
}

#text
{
	text-align: center;
}

#quiz
{
	width: 1000px;
	position: center;
	margin-left:auto;
	margin-right:auto;
	top: 15%;
	transform: translateX(-50) translateY(-50);
	background: rgba(255,255,255,0.7);
	padding: 20px;
	border: 1px solid #00038c;
	box-shadow: 0 0 8px 3px #fff;
	text-align: center;
}

#question
{	
	padding: 20px;
	font-size: 22px;
	background: #FF642b;
	border-radius: 10px;
	margin: 10px 0 10px 0;
	color: #f6f6f6;
	
}

.option{
	width: 470px;
	display: inline-block;
	padding: 10px 0 10px 0;
	background: rgba(255,255,255,0.95);
	margin: 10px 0 10px 10px;
	color: #0000000;
	border: 2px solid #FF642b; 
	border-radius: 5px;
	text-align: left;
}

.option:hover{
	background: #FF642b;
	color: #f6f6f6;	
}

#next
{
	font-family: 'Sans-serif', cursive; 
	background-color: : #4CAF50;
	width:10%;
	height: 4%px;
	border: 1px solid #00038c;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	cursor: pointer;;
	margin-left:auto;
	margin-right:auto;
	display: block;
	padding: 10px 10px;
	
}

#next:hover{
	background-color:rgb(106, 90, 205)
}

#intro
{
	font-size:30px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	margin-top:10%;
	width: 1000px;
	background: rgba(255,255,255,0.9);
	padding: 20px;
	border: 1px solid #00038c;
	box-shadow: 0 0 8px 3px #fff;
}

#footnote{
	font-size:15px;
	text-align: left;
}


#result
{
	font-size:30px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	margin-top:10%;
	width: 900px;
	background: rgba(255,255,255,0.9);
	padding: 20px;
	border: 1px solid #00038c;
	box-shadow: 0 0 8px 3px #fff;
}