@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;
    zoom: 180%;
    background-size:cover;
    background-image: url("/images/LCD.jpg");
    mix-blend-mode:hue;
    opacity: 15%;
  }

  .embarquement{
    position: absolute;
    aspect-ratio: 1/1;
    top: 0%;
    left: 0px;
    height: 60vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
    /* au dessus de retour gauche*/
    z-index:3 ;
  }
  .tableau{
    position: absolute;
    aspect-ratio: 12/3;
    top: 13%;
    left: 70vh;
    height: 14vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  .visas{
    position: absolute;
    aspect-ratio: 10/3;
    top: 40%;
    left: 160vh;
    height: 20vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
     /* au dessus de retour droite*/
     z-index:3 ;
  }
  .sandwitch{
    position: absolute;
    aspect-ratio: 10/3;
    top: 70%;
    left: 56vh;
    height: 14vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  .depliant{
    position: absolute;
    aspect-ratio: 7/2;
    top: 65%;
    left: 87vh;
    height: 8vh;
    translate: 0% 0%;
    background-color: rgba(165, 42, 42, 0);
    cursor: pointer;
    opacity: 100%;
  }
  /*quand on dépasse la width de l'image (1472)*/
  @media (min-aspect-ratio: 9/4){
    .embarquement{
      position: absolute;
      bottom: 0px;
      top: 1vw;
      height: 24vw;
      width: 25%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
      /* au dessus de retour gauche*/
      z-index:3 ;
    }
    .visas{
      position: absolute;
      bottom: 0px;
      top: 18vw;
      left: 73vw;
      height: 9vw;
      width: 30%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
    }
    .tableau{
      position: absolute;
      bottom: 0px;
      top: 3vw;
      left: 32vw;
      height: 9vw;
      width: 25%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%; 
    }
    .sandwitch{
      position: absolute;
      bottom: 0px;
      top: 32vw;
      left: 26vw;
      height: 6vw;
      width: 21%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
    }
    .depliant{
      position: absolute;
      bottom: 0px;
      top: 29vw;
      left: 39vw;
      height: 4vw;
      width: 13%;
      background-color: rgba(42, 161, 165, 0);
      cursor: pointer;
      opacity: 100%;
    }
  }