body{
  font-family: "worksans-regular";
}

section{
  width: 100vw;
  height: 100vh;
  /*border: 1px solid red;*/
}

h2{
  text-transform: none;
}

#premiere-partie{
  background-image: url(../imports/formes-degradees.png);
  background-repeat: no-repeat;
  background-position: left 0% bottom 0%;
  background-size: 185px;
}

#headerATTENTE{
  width: 250px;
  height: 60px;
  position: relative;
  margin: 50px 100px;
}

h2{
  /*border: 1px solid brown;*/
  font-family: "worksans-bold";
  font-size: 28px;
}

#date{
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
}

figure{
  width: 60vw;
  margin: auto;
  /*border: 1px solid green;*/
}

#heure{
  /*border: 1px solid red;*/
  margin: 40px auto 70px;
  width: 50vw;
  height: 100px;
  position: relative;
}

h3{
  /*border: 1px solid red;*/
  font-family: "worksans-regular";
  font-size: 28px;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  width: 300px;
  padding: 30px 50px;
  background-image: url(../imports/back-rose.png);
  background-size: 400px;
  background-repeat: no-repeat;
  background-position: center;
}

h4{
  /*border: 1px solid red;*/
  font-family: "worksans-regular";
  font-size: 28px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#reseaux{
  width: 70vw;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

#reseaux li{
  /*border: 1px solid red;*/
  padding: 10px 20px;
}

#reseaux li:hover{
  background-color: #d3ff59;
}

a{
  color: inherit;
  text-decoration: none;
}


#deuxieme-partie{
  position: relative;
}


#meilleurs-scores{
  position: absolute;
  width: 200px;
  height: 90vh;
  /*border: 1px solid red;*/
  margin-left: 25px;
  margin-top: 10vh;
  font-family: monospace;
}

#meilleurs-scores h2{
  font-size: 1em;
  /*border: 1px solid green;*/
}

#meilleurs-scores ul{
  /*border: 1px solid yellow;*/
  margin-top: 20px;
}





    #containerJEU {
      position: relative;
      width: 900px;
      height: 450px;
      margin: 100px auto;
    }

    #headerJEU{
      display: flex;
      justify-content: space-between;
    }

    canvas {
      background: white;
    }


    #score, #timer {
      text-transform: uppercase;
      color: black;
      font-size: 0.8em;
      margin-bottom: 10px;  
    }

    #containerJEU p{
      margin-top: 10px;
      text-align: center;
    }    

    #containerJEU p span{
      display: inline-block;
      text-align: center;
      width: 1em;
      height: 1em;
      margin: 0.4em;
      line-height: 1em;
      border: 1px solid black;
    }  

    .petit{
      position: relative;
      top: -0.5em;
      font-size: 0.5em;
      padding: 0.5em;      
    }
    .moyen{
      position: relative;
      top: -0.4em;
      font-size: 0.6em; 
      padding: 0.4em;      
    }


    #startBtn{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 17px 20px;
      font-family: "worksans-regular";
      font-size: 16px;
      cursor: pointer;
      background-color: #ffb1e9;
      border: none;
    }

    #startBtn:hover{
      color: white;
      background-color: #540916;
      border: none;
    }

    #gameOver{
      position: absolute;
      font-family: "worksans-bold";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: black;
      font-size: 2em;
      font-weight: bold;
      display: none;
      pointer-events: none;
      color: #ffb1e9;
    }



    #deuxieme-partie{
      display: flex;
      align-items: center;
    }