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;
    }
  }


/* ---------------------------------------------------------------------------------------- */ 
/* ---- 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;
      }
  }	


/* 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;
  }