@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:150%;
      top: 0%;
      left: 0%;
      translate: -14vw -10vh;
    }
    .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/musee01.PNG");
    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%;
    }
  
    .escalier{
      position: absolute;
      aspect-ratio: 4/7;
      top: 22%;
      left: 120vh;
      height: 25vh;
      translate: 0% 0%;
      background-color: rgba(165, 42, 42, 0.74);
      cursor: pointer;
      opacity: 100%;
    }
    .planpied{
      position: absolute;
      aspect-ratio: 5/3;
      top: 37%;
      left: 140vh;
      height: 8vh;
      translate: 0% 0%;
      background-color: rgba(165, 42, 42, 0.699);
      cursor: pointer;
      opacity: 100%;
    }
    .oeuvre01{
      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%;
    }
    .musee02{
      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){
      .escalier{
        position: absolute;
        bottom: 0px;
        top: 12vw;
        height: 35vw;
        width: 40%;
        background-color: rgba(42, 161, 165, 0.767);
        cursor: pointer;
        opacity: 100%;
      }
      .planpied{
        position: absolute;
        bottom: 0px;
        top: 34vw;
        left: 72vw;
        height: 8vw;
        width: 20%;
        background-color: rgba(42, 161, 165, 0.637);
        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%;
      }
    }