/* CSS Document */

#banner {display:flex; display: -webkit-flex; -webkit-justify-content:space-between; justify-content:space-between;}
#header {flex-grow: 2;}
#banner #logotext p {display:none; padding-left:8px;}
#logotext h1 {margin:0; font-size:1.5em; padding : 0 10px; margin-top: 10px;}


#playground {max-width: 800px; min-width: 300px;  margin: auto; margin-top:40px; margin-bottom:40px;
              display:flex; display:-webkit-flex; -webkit-justify-content:space-around; justify-content:space-around;}
.grand {color:#FF9312;}
#infos {width: 30%;}
#mascotte img{width:100%;}
#infos div {width : 100%}
#score {margin:auto; display:flex; display:-webkit-flex; justify-content: flex-end;
        font-size: 1.2em; color: #C1BCBC;}
#score span {font-size: 1em; color: #243D09; }

#paroles {font-size:1em; text-align :center; font-family: "Arvin", Times; height: 100px; } 
#grille {display:flex; display: -webkit-flex; width : 50%; margin-left:2%; margin-right:2%;  flex-wrap: wrap;
           }

#big_instructions {  font-size : 2.2em; text-align: center; max-height: 262px;font-family: "Arvin", Times;}
#big_instructions span {color:  #FF9312;}                     

.case { max-width:40%; min-width: 70px;  min-height:70px;  border:  1px solid black ; background-color: #C1BCBC; text-align: center; border-radius:10px; 
     text-align:center; display:flex; display:-webkit-flex; align-items: center;  justify-content: space-around;
	 font-size: 1.7em;  
	 box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	 user-select: none; cursor:pointer;}


#btn_valider {width : 40%; background-color: #243D09; color: white; font-size:1.2em; text-align:center;
              border-radius: 15px; font-family: "Nyala",Times New Roman, serif;
			  padding-top: 5px; padding-bottom: 5px;
			  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
			  cursor: pointer;  transition : border 1s;}


#btn_valider:hover { color: #243D09; border:  1px solid #243D09; background-color: white;  }			  

/* game effects   */

.selectcase:hover {  background-color : #CCC ;    }


.correct { border:  10px solid #243D09;    }

.missed {  border:  10px solid #FF9312 ;    }


.wrong {  border: 10px solid red ;     }


.invisible {display:none;}

.ecart {margin-top:10px;}
			  
@media screen and (min-width : 400px) 	{
	
	.case {min-width: 90px; }
	#paroles {font-size: 1.2em;}
	
	
}

@media screen and (min-width : 480px) {
	
	.case {min-width: 110px;}
	div#mascotte { width: 60%;}	
	
}


@media screen and (min-width : 500px) 	{ 
  
  
  #banner #logotext p {display:block;}
  
 .case { border-radius:15px;}
}		  
							
							
	@media screen and (min-width : 570px) {
		.case {min-width: 130px;}
	
	}
	
	@media screen and (min-width :690px) {
		.case {min-width: 150px;}
		#paroles {font-size: 1.5em;}
		
	}
			  
@media screen and (min-width : 990px) 	{ 			  

header #logotext h1   {font-size: 2.5em;}
header #logotext p {padding-left:10px; }
.case { font-size: 2em;}
#score {  font-size: 1.4em  ; margin-bottom: 40px; }
#score span {font-size: 1.2em;}
#result {font-size: 2em; margin-top : 50px;}
}