@charset "utf-8";
/* CSS Document */
body, html {
	background: url("rondGris.jpg") ;
	background-repeat: repeat;
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 30px;
}
#btRetour {
	position:absolute;
	top:5px;
	left:5px;
	cursor:pointer;
	z-index:1;
}

#logo_exos {
	position:absolute;
	top:5px;
	right:10px;
}
 #lettres {
	 background-color: aliceblue;
		color:#020E92;
		font-family: Helvetica, Arial;
      font-size: 3em;
      letter-spacing: 20px;
      margin-bottom: 20px;
		font-weight: bold;
		text-align: center;
	font-stretch: extra-expanded;
 }
input[type="text"] {
	  color:blue;
	  text-transform: uppercase;
      font-size: 3em;
      padding: 5px;

 }	


    button {
      font-size: 1em;
      margin: 10px;
      padding: 10px 20px;
}
.result {
      margin-top: 20px;
      font-size: 1.2em;
}
#timer {
      font-size: 1.5em;
      color: darkred;
      margin-top: 15px;
	  visibility: hidden;
		
    }
#nouveauTirage{visibility: visible;}
#motLePlusLong{
	display:block; 
	text-align: center;
	cursor:pointer;
	margin:auto;
	margin-bottom: 20px;
	  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  font-size: 28px;
  padding: 20px;
  width: auto;
  transition: all 0.5s;
}

 #arrayMot{
		  display:inline-block;
		  width:30%;
			  
}
 #arrayMeilleurMot{
		 display:inline-block;
		  width:40%;		 
}	
	
li{
		   list-style-type: none;
		  text-align: left;
 }
 

::placeholder {
  color: grey;
  font-size: 0.35em;

}
#btValider{
	cursor:pointer;
}
#btValider :hover{
	opacity: 0.8;
}
#btValider:disabled {
background-color: lightgray;
}
#btValider:enabled {
background-color: yellow;
	
}
#image {
position:relative;
 top:50px;
	  }