body,html{
margin:0px;
padding:0px;
 
background-image:url('sos.png');
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

#promo{margin-top:3px;margin-bottom:3px;text-align:center;}
#menuArea a:hover, a:visited, a:link, a:active{
    
	text-decoration: inherit;
}
@font-face {
    font-family: Montserrat;
    src: url('Montserrat-Medium.ttf'); 
	 
    }


#activityTitle1{
text-align:center;
font-size:35px;
line-height:38px;
font-family:Montserrat,Arial;
margin-top:40px;
height:38px;

}

#activityTitle2{
text-align:center;
font-size:25px;
 
font-family:Montserrat,Arial;
}

#quizArea{
width:300px;
height:200px;
margin:auto;
margin-top:40px;
border:3px solid #ABB7B7;
border-radius:5px;
position:relative;
overflow:hidden;
}


#card1{
width:300px;
height:200px;
position:absolute;
text-align:center;
line-height:200px;
font-size:45px;
color:#efefef;
font-family:Montserrat,Arial;
cursor:pointer;
}



#card2{
width:300px;
height:200px;
position:absolute;
text-align:center;
line-height:200px;
font-size:45px;
color:#efefef;
background-color:#34495E;
font-family:Montserrat,Arial;
cursor:pointer;
}

#nextButton{
width:80px;
text-align:center;
font-size:20px;
padding:10px;
cursor:pointer;
color:#efefef;
margin:auto;
margin-top:30px;
background-color:#019875;
border: 2px solid #1E824C;
border-radius:5px;
font-family:Montserrat,Arial;
}

#nextButton:hover{
opacity:.6;
}


#finalMessage{
text-align:center;
font-size:30px;
margin-top:30px;
font-family:Montserrat,Arial;
}



#menubutang{
width:60px;
text-align:center;
font-size:16px;
padding:2px;
cursor:pointer;
color:#000;

margin-top:-2px; 
 
background-color:#dadfe1;
border: 1px solid #6C7A89;
border-top:none;
border-radius:0px 0px 4px 4px;
font-family:Arial;
}

#menubutang:hover{
opacity:.6;
}



#menuArea{width:800px;margin:auto;}





@media screen and (max-width:800px) {

#menuArea{width:100%;}

#menubutang{margin-left:5px;}
}