/* defaults */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

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

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color:black;
  font-size: 2rem;
  font-family: "Nimbus Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  cursor: pointer;
  
}


::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 {
font-family: "Nimbus Sans", sans-serif;
  text-decoration: none;
  color: white;
  position: fixed;
  z-index: 1000;
  font-size: 2rem;
  letter-spacing: -0.03em; 
  bottom: 1%;
  padding: 2% 1% 0%;
  transition: 0.5s ease-in-out;
}

a:hover {
  z-index: 10000000;
  transition: 0.5s ease-in-out;
  color: gray;
}

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

.hidden {
  display: none;
 

}

p {
z-index: 1000;
font-family: "Nimbus Sans", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 2rem;
letter-spacing: -0.03em; 
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: white;
}

.accueil {
  margin-left: 45vw;
  }
  


.titre-1 {
position: fixed;
top: -3.5%;
z-index: 1000;
padding: 1% 1% 0%;
font-size: 2rem;

}

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

.infos
{
position: fixed;
z-index: 1000;
padding: 1% 1% 0%;
font-size: 2rem;
bottom: -3%;
right: 0.5%;
transition: 0.5s ease-in-out;
}

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

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

.paragraph {
display: none;
width: 40vw;
position: absolute;
z-index: 1000;
top: 5%;

padding: 1% 1% 0%;
transition: 0.5s ease-in-out;
}


.paragraph-ok {
display: block;
font-size: 1.3rem;
width: 50vw;
position: fixed;
z-index: 1000;
top: 3%;
padding: 1% 1% 0%;
transition: 2s ease-in-out;
animation-duration: 3s;
animation-name: slidein-10;
}

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

to {
  opacity: 1;
}
}

@media screen and (max-width: 600px)  {
.paragraph, .paragraph-ok {
     font-size: 1rem;
     padding: 3% 3% 0;
     width: 80vw;
 }
}


.parent {
top:0%;
z-index: 1000;
position: fixed;
width: calc(100%);
height: 100vh;
mix-blend-mode: difference;
}


@media screen and (max-width: 600px)  {
  .parent {
    top:60%;
    }
 }


  @media screen and (max-width: 800px)  {
  .parent {
    mix-blend-mode: normal;
    }
 }


 @media screen and (max-width: 1000px)  {
  .parent {
    mix-blend-mode: normal;
    }
 }

.div1 {  
  position: fixed;
 top: 0;
  height: 100vh;
  background-color:none; 


}



#MyImg {
    position: fixed;
    transition: 10s ease-in-out;
    z-index: 0;
    height: auto;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;

  
    
  } 

  @media screen and (max-width: 600px)  {
    #MyImg {
      max-width:100%;
      mix-blend-mode: none;
     }
   }

  .meteor {
    position: fixed;
    max-width:160%;
    top: 0%;
    width: calc(100%);
    height: 100vh;
    margin-left: 15%;
  }

  @media screen and (max-width: 600px)  {
    .meteor {
      position: fixed;
      max-width:100%;
      top: 50%;
      width: calc(100%);
  
      margin-left: 0%;
    }
   }

   @media screen and (max-width: 800px)  {
    .meteor {
      position: fixed;
      max-width:100%;
      top: 0%;

      margin-left:10%;
    }
   }

   @media screen and (max-width: 1000px)  {
    .meteor {
      position: fixed;
      max-width:100%;
      top: 20%;
      width: calc(100%);

      margin-left:0%;
    }
   }





img {

z-index: 0;
height: auto;
max-width:70%;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;

}


@media screen and (max-width: 600px)  {
img {
  z-index: 0;
  height: auto;
  max-width:20%;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  mix-blend-mode:none; 

  }
}



img.expanded {
display: block;
max-width: 100%;
z-index: 2000;

}


@media screen and (max-width: 1000px)  {
img {
  max-width:90%;
  top: 10%;
  mix-blend-mode:none; 
 }
}

@media screen and (max-width: 800px)  {
img {
  max-width:90%;
  top: 15%;
  left: 0%;
  mix-blend-mode:none; 
 }
}


@media screen and (max-width: 600px)  {
img {
  max-width:100%;
  top: 0%;
  left: 0%;
  mix-blend-mode:none; 
  
 }
}


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

}




@keyframes slidein  {
  0% {
    margin-left: 0%;
    margin-top: 0%;
    transform: rotate3d(0, 1, 0.5, 1.142rad);
  }
}



.item img {
z-index: 1000;
max-width: 100%;

}

@media screen and (max-width: 600px)  {
  .item img {
    mix-blend-mode: none;
    
  }
}

.item-1 {
z-index: 1000;
position: absolute;
max-width: 32%;
top: 40%;
margin-left: 5%;
transition: 2s ease-in-out;
}


@media screen and (max-width: 600px)  {
.item-1 {
  top: 0%;
  margin-left: 5%;
  max-width: 30%;
  mix-blend-mode: none;
}
}


.item-def {
display: none;
transition: 2s ease-in-out;
}

.item-def-ok {
display: block;
position: absolute;
font-size: 0.8rem;
margin-top: 1%;
width: 24vw;

}



@media screen and (max-width: 800px)  {
.item-def-ok {
  top: 100%;
  font-size: 0.6rem;
width: 30vw;

} 
}



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

}

.stopped {
animation-play-state: paused;
transform: rotate3d(0, 0, 0, 0) scale(1,1);
}



@keyframes slidein-2 {
0% {
  margin-left: 0%;
  margin-top: 20%;
  transform: rotate3d(0, 1, 0.5, 1.142rad) scale(1,-1);

}

50% {
  margin-left: -20%;
  margin-top: -10%;
  transform: rotate3d(1, 1, 0.5, 1.142rad) ;

}

100% {
  margin-left:50%;
  margin-top: 0%;
  transform: rotate3d(0, 1, 0.5, 1.142rad) ;
  
}
}



.item-2 {
z-index: 1000;
position: absolute;
max-width: 20%;
top: 50%;
left: 70%;

}

@media screen and (max-width: 600px)  {
.item-2 {
  top: 0%;
  left: 60%;
  max-width: 30%;
  mix-blend-mode: none;
  
}
}


@keyframes slidein-3 {
0% {
  margin-left: 30%;
  margin-top: -10%;
  transform: rotate3d(0, 1, 1.5, 1.142rad) ;

}

50% {
  margin-left: 50%;
  margin-top: -30%;
  transform: rotate3d(0, 1, 1.5, 3.142rad) ;
}

100% {
  margin-left:20%;
  margin-top: 30%;
  transform: rotate3d(0, 1, 1.5, 1.142rad) ;
  
}
}


.item-3 {
z-index: 1000;
position: absolute;
max-width: 25%;
top:10%;
left: 10%;

}


@media screen and (max-width: 600px)  {
.item-3 {
  max-width: 25%;
  top:-40%;
  left: 4%;
  mix-blend-mode: none;
}
}


@keyframes slidein-4 {
0% {
  margin-left: 70%;
  margin-top: 0%;
  transform: rotate3d(0, 1, 1.5, 1.142rad) ;

}

50% {
  margin-left: 50%;
  margin-top: 10%;
  transform: rotate3d(0, 1, 0.5, 1.142rad) ;
}

100% {
  margin-left:20%;
  margin-top: 0%;
  
  transform: rotate3d(0, 0, 1, 1.142rad) ;
}
}



.item-4 {
position: absolute;
max-width: 30%;
top: 10%;
left: 70%;

}

@media screen and (max-width: 600px)  {
.item-4 {
  max-width: 33%;
  top: -40%;
  left: 60%;
  mix-blend-mode: none;
}
}


@keyframes slidein-5 {
0% {
  margin-left: -50%;
  margin-top:10%;
  transform: rotate3d(0, 1, 0.5, 1.142rad) ;

}

50% {
  margin-left: 10%;
  margin-top: 10%;
  transform: rotate3d(0, 1, 0.5, 1.142rad) ;
}

100% {
  margin-left:20%;
  margin-top: 0%;
  transform: rotate3d(0, 1, 1.5, 1.142rad) s;
  
}
}