@font-face {
  font-family: 'Avara';
  src: url('/fonts/Avara-Bold.ttf');
}
html, body {
    position: relative;
    margin:0;
    padding:0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-x: hidden;
  }
  .tooltiptext{
    font-family: Avara;
    font-size:200%;
    top: 50%;
    left: 0%;
    translate: -10vw 5vh;
  }
  .gauche{
    position: absolute;
    background-color: blueviolet;
    height: 100vh;
    width: 7vw;
    cursor: url(/images/left.png) 8 14, pointer;
    opacity: 0%;
    z-index: 1;
  }
  .droite{
    position: absolute;
    background-color: rgb(49, 226, 43);
    height: 100vh;
    width: 7vw;
    right: 0;
    cursor: url(/images/right.png) 24 14, pointer;
    opacity: 0%;
    z-index: 1;
  }
  .haut{
    position: absolute;
    background-color: rgb(226, 43, 43);
    height: 10vh;
    width: 100vw;
    cursor: url(/images/up.png) 14 6, pointer;
    opacity: 0%;
    z-index: 1;
  }
  .bas{
    position: absolute;
    background-color: rgb(43, 46, 226);
    height: 10vh;
    width: 100vw;
    bottom: 0;
    cursor: url(/images/down.png) 16 24, pointer;
    opacity: 0%;
    z-index: 1;
  }
  

.fond{
  height: 100%;
  width:auto;
  background-image: url("/images/aeroport.jpg");
  background-size:cover;
  background-color: rgb(59, 51, 51);
  }

  .LCD{
    position: absolute;
    height: 2000px;
    width:2000px;
    background-size:cover;
    background-image: url("/images/LCD.jpg");
    mix-blend-mode:hue;
    opacity: 50%;
  }

  .embarquement{
    position: absolute;
    aspect-ratio: 8/7;
    top: 20%;
    left: 0px;
    height: 60vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  .tableau{
    position: absolute;
    aspect-ratio: 8/3;
    top: 40%;
    left: 73vh;
    height: 12vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  .visas{
    position: absolute;
    aspect-ratio: 3/1;
    top: 60%;
    left: 125vh;
    height: 12vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  .sandwitch{
    position: absolute;
    aspect-ratio: 4/5;
    top: 62%;
    left: 98vh;
    height: 16vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  .retour{
    position: absolute;
    aspect-ratio: 5/2;
    top: 2%;
    left: 48vh;
    height: 35vh;
    translate: 0% 0%;
    background-color: rgb(255, 145, 0);
    cursor: pointer;
    opacity: 0%;
  }
  /*quand on dépasse la width de l'image (1472)*/
  @media (min-aspect-ratio: 7/4){
    .embarquement{
      position: absolute;
      bottom: 0px;
      top: 12vw;
      height: 35vw;
      width: 40%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
    }
    .visas{
      position: absolute;
      bottom: 0px;
      top: 34vw;
      left: 72vw;
      height: 8vw;
      width: 20%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
      
    }
    .tableau{
      position: absolute;
      bottom: 0px;
      top: 23vw;
      left: 42vw;
      height: 7vw;
      width: 18.5%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%; 
    }
    .sandwitch{
      position: absolute;
      bottom: 0px;
      top: 35vw;
      left: 57vw;
      height: 10vw;
      width: 7%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
    }
    .retour{
      position: absolute;
      bottom: 500px;
      top: 2vw;
      left: 30vw;
      height: 20vw;
      width: 45%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
    }
  }