@import url(http://fonts.googleapis.com/css?family=Cabin);
@import url(http://fonts.googleapis.com/css?family=Luckiest+Guy);

html, body {
margin: 0;
padding: 0;
background: transparent;
font-family: 'Cabin', sans-serif;

	    }

#navContent{
margin:auto;	
width:800px;
height:400px;
position:relative;
overflow:hidden;
}

#game1{
margin:auto;
width:800px;
height:400px;
right:0px;
position:absolute;

}

#game2{
margin:auto;	
width:800px;
height:400px;
right:-800px;
position:absolute;

} 

.questionText{
font-size:20px;
color:#10698a;
font-family: 'Cabin', sans-serif;
text-align: center;
}

.replay{
margin-top: 50px;
font-size:30px;
color:#10698a;
font-family: 'Luckiest Guy', cursive;
text-align: center;
}

.option{
width:200px;
height:30px;
margin:15px;
font-size:18px;
color:#10689a; 
padding:18px 4px 12px 8px;
border: 2px dotted #10689a;
cursor:pointer;
background-color:transparent;
border-radius: 0px;
text-transform: uppercase;
font-family: 'Luckiest Guy', cursive;
   }

.option:hover{
border:#cb4e4e dotted 2px;
color:#cb4e4e;
}

#topbar{
height:90px;
margin:auto;
margin-top:60px;
color:#FFF;
font-size:46px;
font-family: 'Luckiest Guy', cursive;
width:800px;

}
 
.spacer{
height:30px;

}

.bien{
margin-top: 50px;    
width:150px;
padding:15px;
font-size:20px;
color:green;
border: 2px dotted green;    
font-family: 'Luckiest Guy', cursive;
text-align:center;
border-radius: 0px;
}

.mal{
margin-top: 50px;
width:150px;
padding:15px;
font-size:20px;
color:red;
border: 2px dotted red;  
font-family: 'Luckiest Guy', cursive;
text-align:center;
border-radius: 0px;
}


.si{
margin-top: 15px;    
width:150px;
padding:10px;
font-size:60px;
color:green;
font-family: 'Luckiest Guy', cursive;
text-align:center;
text-decoration: none;
}

.no{
margin-top: 15px;
width:150px;
padding:15px;
font-size:20px;
color:red; 
font-family: 'Luckiest Guy', cursive;
text-align:center;
text-decoration: none;
}

 
@media screen and (max-width:800px) {
	#topbar{margin-left:1%;margin-right:1%;	width:96%;}
	#navContent{margin:1%;	width:98%;}
	#game1{margin:1%;	width:98%;}
	#game2{margin:1%;	width:98%;}


}
@media screen and (max-width:460px) {
	.option{width:100px;
height:15px;margin:5%;font-size:12px;}
    #topbar{font-size: 25px;}
    .logo {width: 150px;}
    .bien {margin-top: 25px; }
    .mal {margin-top: 25px; }
}