/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}



@font-face {
  font-family: "Nimbus Sans";
  src: url("../fonts/NimbusSanL-Reg.otf"),
         url("../fonts/NimbusSanL-Reg.otf");
 }


body {
  position: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: black;
    font-family: "Nimbus Sans", sans-serif;
font-style: normal;
font-weight: 500;
 
}

.body-negatif {
  width: calc(100%);
  height: 100vh;
  background-color: black;
  display: none;
}

.body-ok {
  position: fixed;
  width: calc(100%);
  height: 100vh;
  display: block;
  background-color: white;
  animation-duration: 3s;
  animation-name: slidein-11;
}

@keyframes slidein-11 {
  from {
   opacity: 0;
  }

  to {
    opacity: 1;
  }
}



::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol, ul {
    list-style: none;
}

a {
  z-index: 10000000;
  position: absolute;
  background-color: none;
  width: 100vw;
  height: 90vh;
    text-decoration: none;
    color: none;
    transition: 2s ease-in-out;
}

@media screen and (max-width: 600px)  {
  a {
    height: 80vh;
   }
 }


a :hover {
    z-index: 10000000;
    width: 100vw;
    height: 100vw;
    transition: 2s ease-in-out;
}


.hidden {
    display: none;
}


img {
    max-width: 100%;
    height: auto; 
    transition: transform 1s ease-in-out;
}

body {
  font-family: "Nimbus Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  cursor: pointer;
}




.foreground-text {
    font-family: "Nimbus Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    color: white;
    padding: 1% 1% 0;
    font-size: 2rem;
    letter-spacing: -0.03em; 

}



.foreground-text-2 {
    font-family: "Nimbus Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    z-index: 1000;
    display: flex;
  flex: wrap;
  float: left;
  bottom : 1%;
  left: 0%;
  font-size: 2rem;
  letter-spacing: -0.03em;
  padding: 1% 1% 0;
    position: fixed;
    color:white;
  

}


@media screen and (max-width: 600px)  {
  .foreground-text, .foreground-text-2 {
       padding: 3% 3% 0;

   }
 }

.index {
    font-family: "Nimbus Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    float: left;
    right: 0%;
    bottom : 1%;
    position: fixed;
    color: white;
    padding: 1% 1% 0;
    font-size: 2rem;
    letter-spacing: -0.03em; 
    transition: 0.5s ease-in-out;

}


@media screen and (max-width: 600px)  {
  .index  {
       padding: 3% 3% 0;
   }
 }


.index:hover {
  color: gray;
  transition: 0.5s ease-in-out;
}

@media screen and (max-width: 600px)  {
  .index:hover {
    color: gray;
    transition: 0.5s ease-in-out;
  }
 }


.index-open{
  font-family: "Nimbus Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  z-index: 100000;
  display: none;
  flex-wrap: wrap;
  float: left;
  right: 0%;
  top: 5%;
  position: fixed;
  color:white;
  padding: 1% 1% 0;
  font-size: 2rem;
  letter-spacing: -0.03em; 
  transition: 2s ease-in-out;

}

.index-ok {
  font-family:"Nimbus Sans" sans-serif;
  font-style: normal;
  width: 95vw;
  font-weight: 500;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  float: left;
  left: 0%;
  top: 5%;
  position: fixed;
  color: rgb(255, 255, 255);
  padding: 1% 1% 0;
  font-size: 2rem;
  text-justify:distribute;
  /* mix-blend-mode:difference; */
  letter-spacing: -0.03em; 
  animation-duration: 3s;
  animation-name: slidein-10;
}

@media screen and (max-width: 600px)  {
  .index-open, .index-ok {
       font-size: 1.6rem;
       color: white;
       padding: 3% 3% 0;
   }
 }

@keyframes slidein-10 {
  from {
   opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.container {
  width: 100vw;
  height: 100vh;
  position:absolute;
  top: 0%;
}

.image {
    z-index: 100;
    position: absolute;
    width: 60%;
    height: 45vh;  
    background-color: none;
    /* padding: 0; */
    mix-blend-mode: difference;
    /* padding-left: 19%;
    bottom: -20%; */
    /* transform: rotate3d(0, 1, 0.5, 1.042rad); */
    /* transition: 10s ease-in-out;  */
    
  }

  @media screen and (max-width: 600px)  {
    .image {
      width: 100%;
     
     }
   }


  .image:hover {
    display: block;
    /* transition: 10s ease-in-out; 
    transform: rotate3d(0, 1, 0.5, 0.842rad) scale(1.1); */
    
  }


  .image-2 {
    position: absolute;
     top: 0%;
     animation-name: slidein;
  }

  .image-15 {
    position: absolute;
    top: 50%;
    animation-name: slidein;
   }


  .image-16 {
    top: 55%;
   }

   .image-10 {
    top: 15%;
   }

   .image-1 {
    top: -30%;
    left: 70%;
   }


  .image-2 .slidein {
    animation-duration: 30s;
    animation-name:  slidein;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

  }

  .image-15 .slidein {
    animation-duration:35s;
    animation-name:  slidein-2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

  }

  .image-16 .slidein {
    animation-duration: 45s;
    animation-name:  slidein-3;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

  }

  .image-10 .slidein {
    animation-duration: 55s;
    animation-name:  slidein-4;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

  }

  .image-1 .slidein {
    animation-duration: 65s;
    animation-name:  slidein-5;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

  }
  
  .stopped {
    animation-name: none;
  }
  
  @keyframes slidein  {
    0% {
      margin-left: 0%;
      margin-top: 60%;
      transform: rotate3d(0, 1, 0.5, 1.042rad);
    }
    50% {
        margin-left: 50%;
        margin-top: -50%;
        transform: rotate3d(0, 1, 0.5, 0.542rad);
    }
    100% {
        margin-left: 0%;
        margin-top: -20%;
        transform: rotate3d(2, 1, 0.5, 1.6rad);
    }
  }

  @keyframes slidein-2  {
    0% {
      margin-left: 50%;
      margin-top: -50%;
      transform: rotate3d(1, 2, 0.5, 1.542rad);
    }
    50% {
        margin-left: 20%;
        margin-top: 50%;
        transform: rotate3d(0, 1, 0.5, 0.542rad);
    }
    100% {
        margin-left: 60%;
        margin-top: -50%;
        transform: rotate3d(0, 1, 1.5, 1.542rad);
    }
  }


  @keyframes slidein-3 {
    0% {
      margin-left: 20%;
      margin-top: -90%;
      transform: rotate3d(0, 1, 0.5, 1.542rad);
    }
    50% {
        margin-left: 60%;
        margin-top: -100%;
        transform: rotate3d(0, 1, 0.5, 0.142rad);
    }
    100% {
        margin-left: 30%;
        margin-top: 0%;
        transform: rotate3d(1, 2, 1.5, 1.042rad);
    }
  }

  @keyframes slidein-4 {
    0% {
    
      margin-left: -50%;
      margin-top: 50%;
      transform: rotate3d(1.8, 1, 0.5, 1.6rad);
    }
    50% {
       
        margin-left: 50%;
        margin-top: -10%;
        transform: rotate3d(0, 1, 0.5, 1.142rad);
    }
    100% {
      
        margin-left: 120%;
        margin-top: 70%;
      transform: rotate3d(0, 1, 0.5, 1.142rad);
    }
  }

  @keyframes slidein-5 {
    0% {
      
      margin-left: 0%;
      margin-top: 0%;
      transform: rotate3d(0, 1, 0.5, 1.142rad);
    }
    50% {
      
        margin-left: -100%;
        margin-top: 50%;
        transform: rotate3d(0, 1, 0.5, 0.7rad);
    }
    100% {
        
        margin-left: 120%;
        margin-top: 70%;
        transform: rotate3d(1, 2, 1.5, 0.042rad);
    }
  }