@import url('https://fonts.googleapis.com/css?family=Caveat&display=swap');
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}
/*delete */
#navContent, #game1, #game2, .splash, .gameplay, .final, .block-free-game {height:414px; width: 690px}
#navContent{
  font-size:18px;
  margin:30px auto;
  position:relative;
  overflow:hidden;
}
#game1{
margin:auto;
right:0px;
position:absolute;
}
#game2{
margin:auto;
right:-800px;
position:absolute;
}
.splash{
  background:url('img/splash.png');
  overflow: auto;
}
.splash p{
  font-family: 'Caveat', cursive;
  font-size: 23px;
  width: 400px;
  position: absolute;
  bottom: 18%;
  left: 19%;
  color: #a48060;
  line-height: normal;
}
.splash-btn{
  line-height: 37px;
  color: #fff;
  height:40px;
  width:130px;
  text-shadow: 0 1px 0 #FCDC5D;
  background-color: #734a22;
  border: 3px solid #9b733a;
  position: absolute;
  display:block;
  cursor:pointer;
}
.splash-btn:hover{
  -webkit-box-shadow: inset 0px -30px 25px -25px rgba(235,83,155,0.7);
  -moz-box-shadow: inset 0px -30px 25px -25px rgba(235,83,155,0.7);
  box-shadow: inset 0px -30px 25px -25px rgba(235,83,155,0.7);
  transition: .5s ease;
}
#howtoplay{left: 16%; bottom: 6%}
#start{left: 38.5%; bottom: 8%; font-weight: bold; font-size: 24px}
#didyouknow{position: absolute; right: 19%; top: 74%; cursor: pointer; font-size: 24px}
#didyouknow:hover{font-size: 22px}
#viewlesson{left: 61%; bottom: 6%}
a #viewlesson{font-weight: normal}
#titre-score{position: absolute; right: 4%; top: 3%; font-weight: bold}
#score{position: absolute; right: 2%; top: 10%; width: 80px; font-size: 19px; font-weight: bold;}

/*SPLASH: Panels*/
.splash-panel{
  display:none;
  background-color: #FFF;
  border: 5px solid #ccc;
  padding:12px;
  -webkit-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
  position: absolute;
  left: 125px;
  bottom: 105px;
  width:420px;  
  height:225px;
}
.splash-panel i{
  font-size: 12px
}
.splash-panel em{
  background-color: #ffeeee;
  padding: 1px 5px;
  font-style: normal;
  font-size: 12px;
  border: 1px solid #aa9999;
  color: #393939;
}
.gameplay{background:url('img/gameplay.jpg');}
.final{
  background:url('img/final.png');
}
.final p{
  font-size:39px; 
  font-family: 'Caveat', cursive;
  line-height: normal;
  position: absolute;
  top: 13%;
  left: 18%;
}
.final b{font-size: 32px; color:#cc3399; position: absolute;top: 56%; right: 32%}
#hscore{cursor: pointer;color: #FF8000; animation-iteration-count: 4; position: absolute;bottom: 29%; left: 42%}

 .grid-categ{
  padding: 4px 11px;
  border: 2px solid #d9d8d6;
  border-radius: 25px;
  color:#fff;
  font-weight: bold;
  font-variant: small-caps;
  position: absolute;
  top: 27%;
  right: 0%;
  background: #DCD2C4;
  width: 220px;
}
#puzzle {
  position: absolute;
  top: 6%;
  left: 3%;
  border: 3px solid #dcd2e3;
}
#puzzle div {
  width: 100%;
  margin: 0 auto;
}
#puzzle .puzzleSquare {
  height: 30px;
  width: 30px;
  text-transform: uppercase;
  background-color: #DCD2C4;
  border: 0;
  outline: none;
  font: 1em sans-serif;
  color: #ad8f68;
}
button::-moz-focus-inner {
  border: none;
  outline: none;
}
#puzzle .selected {
  color: #ee5426;
  outline: none;
}
#puzzle .selected:focus {
  border: none;
}
#puzzle .found {
  color: #fff;
}
#puzzle .solved {
  color: #ee5426;
}
#puzzle .complete {
  background-color: #ad8f68;
}
#words {
  width: 250px;
  color: #8b5230;
  position: absolute;
  right: 2%;
  top:34%;
}
#words ul {
  list-style-type: none;
}
#words li {
  padding: 0 0 7px;
  font: 1em sans-serif;
  display: inline-block;
  float: left;
  width: 100px;
}
#words .wordFound {
  text-decoration: line-through;
  color: #87c442;
}
#solve {
  background: transparent;
  border: none;
  color: #ee5426;
  opacity: .5;
  transition: opacity .25s ease-in;
}
#solve:hover, #solve.gameSolved {
  opacity: 1;
}