/* CSS Document */



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

#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:20px; margin-bottom:20px;}


#infos {display:flex; display:-webkit-flex; align-items: center;  justify-content: space-between; margin-bottom : 25px;}

#score {margin-bottom: 40px;
        font-size: 1.2em; color: #C1BCBC;}
#score span {font-size: 1em; color: #243D09; }

#instructions {font-size: 1em; text-align :center; font-family: "Arvin", Times; width : 75%; } 
#line {display:flex; display: -webkit-flex; width : 100%; margin-left:2%; margin-right:2%; position:relative; 
       max-height : 40px;}

.case { width: 12%; border-radius:10px; border:  1px solid black ; background-color: #C1BCBC; text-align: center;
     text-align:center; display:flex; display:-webkit-flex; align-items: center;  justify-content: space-around;
	 -webkit-justify-content: space-around; font-size: 1.4em; }

.signe {width: 8%; margin: 0 .5%; align-items: center;}

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

/*.signe svg {width:100%; vertical-align:middle; margin-top: 8px;} */

#bas {display: flex; display : -webkit-flex; justify-content: space-around; -webkit-justify-content: space-around;
        height : 40%; align-items: center;  -webkit-align-items: center;
		margin-top : 20px; }

#btn_valider {width : 40%;  background-color: #243D09; color: white; font-size:2em; text-align:center;
              border-radius: 15px; margin-top : 15%; font-family: "Nyala",Times New Roman, serif;
			  padding-top: 1em; padding-bottom : 1em;/* height : 30%; */
			  cursor : pointer; transition : border 1s; line-height: 50%;}
#btn_valider:hover { color: #243D09; border:  1px solid #243D09; background-color: white;  }
			  
#mascotte { width : 25%;         }	
#mascotte img {width : 100%;}	


/* game stuff    */

.over {border-style: dashed;}

.movable {  cursor:move;   }


.change {
	
   animation-name: case-change;
   animation-duration: .2s;	
	
}

.rightsign { stroke-width :10; }


.wrongsign { stroke : #F20303;}

.invisible {visibility:hidden;}

@keyframes case-change {
    
    30%  {transform : scale(1.2);}
    100% {transform : scale(1);} 

}


	  
			  

@media screen and (min-width : 500px) 	{ 
  
  #banner #logotext {  padding-right: 100px;}
  #banner #logotext p {display:block;}
  .cases svg {margin-top : 0px;}
  .case { border-radius:15px;}
  #result {margin-top : 20px;}
  #btn_valider { margin-top : 10%; font-size: 2.5em;  }
  #instructions {font-size : 1.5em;}
  #bas {margin-top : 30px;}

                         }		  
			  
@media screen and (min-width : 896px) 	{ 			  

#banner #logotext h1   {font-size: 2.5em;}
#banner #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;}
#bas {margin-top : 50px;}
#btn_valider { margin-top : 10%; font-size: 3em;   }
}