body{
  /* background-color: #000000; */
  overflow: hidden;
  position: relative;
  margin:0;
}

img{
  min-width: 100%;
  max-width: 100%;
}

#preload{
  display: none;
}

@font-face {
    font-family: "PicNic";
    src: url('PicNic-Regular.woff2');
  }

.font {
  font-family: "PicNic-Regular";
    font-size: 5vw;
}

.fond{
height: 200%; 
width: 200%; 
top:-50%; 
background-color: rgb(22, 10, 68); 
line-height:60px;
color:rgb(255, 154, 108); 
position: fixed;
z-index: 0;
font-size:70px;
font-family: 'PicNic';


}

.un{
  border:0;
  width: 80%;
}

.deux{
  border: 0;
  width: 35%;
}

#wait{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:  70%;
height:80%;
display:flex;
justify-content: center;
align-items: center;
background-color: white;
z-index: 99;

}

#timer{
  display:flex;
  justify-content: center;
  align-items: center;
}

.wrap{
display: flex;
}

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    

  }


  #faux-gif {
        z-index: 2;
        position: static;
        width: 60vw;
        height: 85vh;
       background-image: url(images/tourne/1.png);
       background-repeat: no-repeat;
       background-origin:border-box;
       background-size: 100%;
       background-position: center;
       animation: giffy 1.5s infinite linear;
       animation-play-state:paused;
       margin-top: 5vh;
       border: 20px solid rgb(255, 255, 255); 
     }

     #faux-gif:hover {
       animation-play-state:running;
     }

     @keyframes giffy {
       0%   { background-image: url('images/tourne/1.png'); }
       10%  { background-image: url('images/tourne/2.png'); }
       20%  { background-image: url('images/tourne/3.png');}
       30%  { background-image: url('images/tourne/4.png'); }
       40%  { background-image: url('images/tourne/5.png'); }
       50%  { background-image: url('images/tourne/6.png'); }
       60%  { background-image: url('images/tourne/7.png'); }
       70%  { background-image: url('images/tourne/8.png'); }
       80%  { background-image: url('images/tourne/9.png'); }
       90%  { background-image: url('images/tourne/10.png'); }
       100%  { background-image: url('images/tourne/1.png'); }
     }

       #faux-gif img {
         width: 100%;
}

     .board {
           z-index: 3;
     position: absolute;
     cursor: pointer;
   }

   .board img {
     width: 100%;
     height: auto;
   }