@import 'font.css';
body,html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

}
body {

  /* background-image: url("../image/fond2.png");
  background-repeat: repeat;
  background-size: contain; */
  /* position: fixed;
  top:0; */
  overflow-x: hidden;
}
#fond-20{
  background: lightgrey;
  overflow-x: hidden;
  overflow-y: scroll;

}
#fond-19{
  /* background-image: linear-gradient(180deg, rgba(241,255,0,1),rgb(53,152,246), rgba(251,0,134,1)); */
  height: 100vh;
  overflow-x: hidden;

}
#nuancier{
  background-image: url("../image/fond2.png");
  background-repeat: repeat;
  overflow-x: hidden;
  overflow-y: scroll;
  /* background-position: top left;
  width: 100%;
  height: 100%;
  position: absolute; */
}
.date{
  font-family: "bell";
}
.date2{
  font-family:"goozette";
}
.date-21 a{
  color:black;
}
.date2 a{
  color: #49a39b;
}
.date a{
  color: white;
}
.date3 a{
  text-decoration: none;
  background:white;
  background: linear-gradient(180deg, rgba(53,152,246,1) 0%, rgba(251,0,134,1) 50%, rgba(241,255,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.date3{
  font-family: "crickx";
  background: linear-gradient(180deg, rgba(53,152,246,1) 0%, rgba(251,0,134,1) 50%, rgba(241,255,0,1) 100%);
  background-clip: border-box;
  filter: blur(1px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.titre-19{
  font-family: "crickx";
  font-size: 1.5vw;
}
.titre-20{
font-family: "goozette";
}
.titre-21{
  font-family: "bell";
  color: white;
}
iframe {
  width: 80vw;
  height: 80vh;
  margin-left: 10vw;
  margin-top: 10vh;
  position: relative;

}


.cube-container {
  left: 1vw;
  top: 1vh;
  position: absolute;
  transform-style: preserve-3d;
  animation: 10s linear 0s infinite alternate move;
  perspective: 100vw;
}
.contenu-21{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0vw;
  margin-top: 0vh;
}
.contenu-21 img{
  width: 99vw;
  padding: 0;
  margin: 0;
}
.contenu{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1vw;
  position: relative;
  height: 100vh;
}
.contenu img{
  width: 50vw;
  margin: 1vw;
}
.contenu img:hover{

}

/* partie publi20 */
#cube {
  width: 10vw;
  height: 10vh;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ( -5vw) rotateZ(45deg) rotateX(45deg);
  animation: spin 5s infinite linear;
  z-index: -100;
}
.cube-container-2 {
  left: 80vw;
  top: 75vh;
  position: relative;
  transform-style: preserve-3d;
  animation: 10s linear 0s infinite alternate move-2;
  perspective: 100vw;
  z-index: -10;
}
.cube-container-3 {
  left: 80vw;
  top: 10vh;
  position: relative;
  transform-style: preserve-3d;
  animation: 8.5s linear 0s infinite alternate move-3;
  perspective: 100vw;
  z-index: -10;

}

@keyframes spin {
  0% { transform: translateZ( -5vw ) rotateY(360deg) rotateZ(0deg) rotateX(45deg) }
  50% { transform: translateZ( -5vw ) rotateY(180deg) rotateZ(180deg) rotateX(45deg) }
  100% { transform: translateZ( -5vw) rotateY(0deg) rotateZ(360deg) rotateX(45deg) }
}
#cube figure {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  border: 1px dotted black;
  backface-visibility: hidden;
}
#cube figure img{
  width: 100%;
  height: auto;
}
#cube .front  { transform: rotateY(   0deg ) translateZ( 5vw ); }
#cube .back   { transform: rotateX( 180deg ) translateZ( 5vw ); }
#cube .right  { transform: rotateY(  90deg ) translateZ( 5vw ); }
#cube .left   { transform: rotateY( -90deg ) translateZ( 5vw); }
#cube .top    { transform: rotateX(  90deg ) translateZ( 5vw ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 5vw ); }
iframe{
width: 80vw;
height: 80vh;

margin-left: 10vw;
margin-top: 10vh;
position: relative !important;

}


@keyframes move {

   16.5% {
     left: 87vw;
     top: 20vh;
   }
   33%{
     left: 0vw;
     top: 55vh;
   }

   49.5% {
     left: 87vw;
     top: 1vh;

   }
   66% {
     left: 55vw;
     top:40vh;

   }
   83% {
     left: 45vw;
     top: 0vh;

   }
   100%{
     top:40vh;
   left: 10vw;
   }

   }
   @keyframes move-2 {

      16.5% {
        left: 1vw;
        top: 40vh;
      }
      33%{
        left: 55vw;
        top: 5vh;
      }

      49.5% {
        left: 87vw;
        top: 85vh;

      }
      66% {
        left: 20vw;
        top:1vh;

      }
      83% {
        left: 1vw;
        top: 80vh;

      }
      100%{
        top:20vh;
      left: 87vw;
      }

      }

      @keyframes move-3 {

         16.5% {
           left: 15vw;
           top: 85vh;
         }
         33%{
           left: 1vw;
           top: 15vh;
         }

         49.5% {
           left: 40vw;
           top: 1vh;

         }
         66% {
           left: 87vw;
           top: 70vh;

         }
         83% {
           left: 45vw;
           top: 85vh;

         }
         100%{
           top:35vh;
         left: 1vw;
         }

         }