html, body {
  height: 100%;
  margin: 0;
}

body {
  background: rgb(203,203,203);
  background: linear-gradient(126deg, rgba(203,203,203,1) 0%, rgba(24,24,24,1) 10%, rgba(255,255,255,1) 26%, rgba(0,0,0,1) 49%, rgba(156,156,156,1) 62%, rgba(74,74,74,1) 84%, rgba(251,251,251,1) 99%);      
  /* ---- Patern de points ----
  background-image: radial-gradient(currentColor .5px, transparent .5px);
  background-size: calc(10 * .5px) calc(10 * .5px);
  */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
      
canvas {
  border: 0px solid #fff; background: #121212;
  -webkit-box-shadow: 10px 10px 123px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 123px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 123px 0px rgba(0,0,0,0.75);
}

#game {
  border: 0px solid red;
}

@media (max-width: 767px) {
  #game {
  border: 2px solid black;
  border-radius: 10px;
    width: 300px;
    height: 300px;
  }
}

.board-display {
  position: absolute;
    /* border: 2px solid black; */
    border-radius: 10px;
    background: #ddd;
    display: flex;
    flex-direction: column;
}

.play-button {
  /*border: 1px solid red;*/
}
.restart-button {
  /*border: 1px solid red;*/
}
.gameover-div {
  padding: 10px 20px;
}


/* buttons */
.snake-controler {
  border: 2px solid black;
  position: relative;
  /* bottom: 30px; */
  /* left: 30px; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

/* key board looks */
.arrow-buttons {
  position: relative; 


  border: 2px solid black;
  border-radius: 10px;

  display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
}

.arrow-button {
  border: 2px solid black;
  padding: 10px 20px;
  margin: 10px;
  }

    .up {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }
    
    .right {
      grid-column: 3 / 4;
      grid-row: 2 / 3;
    }
    
    .down {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }
    
    .left {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }


/* les boutons */
button {
  border: 2px solid black;
  padding: 10px 20px;
  margin: 10px;
  border-radius: 4px;
}












/* ---------------------------------------------------------------------------------------- */ 
/* ---- le style et petit html suivant sont juste pour afficher mon smiley / logo ---- */

/* titre & smile */
#titre-qr-home {
    position: fixed; 
    top: 20px; 
    left: 20px;
    display: inline-block;
    z-index: 100;
}    

#titre-qr-home h2{
    font-size: 60px;
    font-family: arial,helvetica;
    display: inline-block;
    vertical-align: top;
}    

#titre-qr-home p {
    width:60px;
    padding: 9px 10px 0;
    display: inline-block;
}

#titre-qr-home img {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
    
    vertical-align: bottom;
max-width: 100%!important;
}
   
  

#titre-qr-home img:hover {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-o-transform: rotate(540deg);
-ms-transform: rotate(540deg);
transform: rotate(540deg);
}     

.insta-incorner {
    position: fixed; 
    top: 30px; 
    right: 20px;
    display: inline-block;
    z-index: 90;
}

@media (max-width: 700px) {
    #titre-qr-home {
        top: 10px; 
    }          
    .insta-incorner {
        top: 20px; 
        right: 20px; 
    }    
    #titre-qr-home p {
        width:40px;
    }
}