/* 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%;*/display:flex; display: -webkit-flex; justify-content: space-around; -webkit-justify-content: space-around;}
#mascotte img{width:100%;}
#infos div {/*width : 50%;*/}
#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;*/ width: 50%;
           padding-top: 15px;} 
#grille {display:flex; display: -webkit-flex; width : 85%; /*margin-left:2%; margin-right:2%; */ flex-wrap: wrap;
           margin : auto; position : relative;
           }

#big_instructions { position: absolute; font-size : 2.2em; text-align: center; max-height: 262px;font-family: "Arvin", Times;
                    margin : auto; width : 70%; margin-left: -35%; left: 50%;}
#big_instructions span {color:  #FF9312;}                     

.case { /*max-width:42%; min-width: 120px; */ width : 50%; min-height:70px;  border:  1px solid black ; background-color: #DDD; text-align: center; border-radius:10px; 
     text-align:center; display:flex; display:-webkit-flex; align-items: center;  justify-content: space-around; -webkit-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; }

#calcul { display:flex; display: -webkit-flex; width : 90%; justify-content: space-around; -webkit-justify-content: space-around; 
           margin : auto;  align-items: center; cursor: default; margin-bottom: 2em; user-select: none;}
#calcul div { font-size : 4em; color:#243D09; width : 40%; text-align: center;}
#calcul div:nth-child(2) { font-size: 3em; color: black; width: 20%}
	 
	 
#btn_valider {width : 90%; background-color: #243D09; color: white; font-size: 1.5em; 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 .5s;
			  margin-left : auto; margin-right : auto; margin-top: 40px;}


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

/* game effects   */

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


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

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


.wrong {  border: 10px solid red ;     }


.invisible {visibility : hidden;}

.ecart {margin-top:10px;}
			  
@media screen and (min-width : 400px) 	{
	
	.case {/*min-width: 90px; */
	       font-size : 2em; height : 100px;}
	#paroles {font-size: 1.2em;}
	div#mascotte { width: 30%;}
	
}

@media screen and (min-width : 480px) {
	
	.case {/*min-width: 110px;*/}
	#calcul div { font-size : 4em; }
    #calcul div:nth-child(2) { font-size: 3em;}
		
	
}


@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;*/
		         font-size: 3em;}
	
	}
	
	@media screen and (min-width :690px) {
		.case {/*min-width: 150px;*/}
		#paroles {font-size: 1.5em;}
		div#mascotte { width: 20%;}
		#calcul {margin-bottom : 3em;}
		
	}
			  
@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;}
#playground {border:  2px solid #243D09; border-radius:10px; }
}