body,html{margin:0px;padding:0px;background-image:url(sos.png);font-family:Verdana, Geneva, sans-serif;}


#banner{width:97%;height:50px;background-color:#F39C12;padding-left:3%;}
#banner .png{}
h1{margin-bottom:10px;margin-top:10px;}

#gameArea{width:800px;height:460px;margin:auto;background-color:#fff;margin-top:40px;border:1px solid grey;box-sizing:border-box;}

#title1{text-align:center;background-color:#6C7A89;height:40px;padding:20px;font-size:40px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#title2{text-align:center;background-color:#6C7A89;height:40px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#pix1{text-align:center;}
#butang1{width:100px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1:hover{opacity:.6;}

#feedback1{float:right;position:relative;}
#feedback1 img{width:30px;position:absolute;right:0px;top:-5px;}

#passage{padding:2%;padding-top:0px;width:46%;float:left;}
#quiz{margin:2%;margin-top:40px;width:45%;height:300px;float:right;border-left: 1px solid #e8e8e8; position:relative;}
 
#promo{margin:auto;text-align:center;}

@media screen and (max-width:800px) {
	body,html{background-image:none;}
#gameArea{width:100%;}
 

}

@media screen and (max-width:650px) {
#passage{padding:2%;width:96%;float:none;height:auto;background-color:#fff;}
#quiz{background-color:#fff;margin:0%;margin-top:0px;width:100%;min-height:300px;float:none;border:none;border-top: 1px solid #e8e8e8; position:relative;}
#gameArea{min-height:460px;height:auto;}
h1{text-align:center;}
}


@media screen and (max-width:450px) {
	#title1{font-size:30px;}
	#banner{width:100%;height:50px;background-color:#F39C12;padding-left:0%;}
}