@charset "UTF-8";

@font-face {
  font-family: 'ABCGravity-ExtraCondensed';
  src: url('../fonts/ABCGravity-ExtraCondensed-Trial.woff') format('woff');

  font-family: 'ABCGravity-XXCompressed';
  src: url('../fonts/ABCGravity-XXCompressed-Trial.woff') format('woff');
}


:root {
  touch-action: pan-x pan-y;
  height: 100%
}

html {
  height: 100dvh;
  width: 100dvw;
}

body {
  height: 100dvh;
  width: 100vw;
  font-family: 'ABCGravity-XXCompressed';
  font-size: 20px;
  font-size: 2em;
  overflow: hidden;

}

.boite2,
.boite3 {
  position: relative;
  height: 100vh;
}


.container-ask {
  width: 100%;
  height: 200%;
  /* height: 100%; */

  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.random-div {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: scroll;
  top: 0%;
  left: 100%; /* Start the div off-screen to the left */
  background-color: white;
  transition: left 0.5s ease-in-out;
  z-index: 1000;
}

.visible-div {
  left: 0% !important; /* Move the div to the center */
}


.right {
  left: -100%; /* Move the div to the right side */
}

.left {
  left: 100%; /* Move the div to the left side */
}

h1 {
  text-align: center;
  width: 100%;
  padding-top: 17%;
  color: #ff0000;
  letter-spacing: 1px;
  font-size: 12rem;
  text-shadow:
    0 0 7px #ff6262,
    0 0 10px #ff6262,
    0 0 21px #ff6262;
  z-index: 100;
  position: relative;
  pointer-events: none;

}

.buttons {
  width: 40vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 70%;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: center;
  /* flex-wrap: wrap; */
  font-size: 3rem;
  z-index: 4;
}



.btn {
  /* width: 20%; */
  background-color: red;
  /* margin-bottom: 30%; */
  border-radius: 11px;
  padding: 7px 15px 5px 15px;
  text-align: center;
}

.btn-txt {
  width: 30%;
  cursor: pointer;
  color: white;
  text-decoration: none;
}


.btn:hover {
  background-color: white;
  transition: all 0.2s;
  border: solid #ff0000 3px;
}

.btn-txt:hover {
  color: red;
  transition: all 0.2s;
}

.pastis {
  margin-top: 3%;
}




.img00002 {
  top: 2%;
  left: 27%;
  width: 46vw;
  position: absolute;

}






.img00 {
  top: 26%;
  left: 50%;
  width: 31vw;
  position: absolute;
  transform: translate(-50%, -50%);
}


.img001 {
  top: 25%;
  left: 50%;
  width: 60vw;
  position: absolute;
  transform: translate(-50%, -50%);
}

.img0002 {
  top: 25%;
  left: 50%;
  width: 60vw;
  position: absolute;
  transform: translate(-50%, -50%);
}

.img0003 {
  top: 25%;
  left: 50%;
  width: 45vw;
  position: absolute;
  transform: translate(-50%, -50%);
}

.img0005 {
  top: 25%;
  left: 50%;
  width: 32vw;
  position: absolute;
  transform: translate(-50%, -50%);
}

.img00 {
  top: 25%;
  left: 50%;
  width: 33vw;
  position: absolute;
}




.img01 {
  width: 22%;
  right: 4%;
  transform: rotate(8deg);
  top: 195px;
  position: absolute;
}

.img02 {
  width: 24%;
  left: 23%;
  top: 52px;
  position: absolute;
  transform: rotate(-5deg);

}

.img03 {
  width: 20%;
  left: 3%;
  top: 25px;
  transform: rotate(3deg);
  position: absolute;
}

.img04 {
  width: 20%;
  width: 20%;
  left: 78%;
  position: absolute;
}

.img05 {
  width: 22%;
  transform: rotate(5deg);
  position: absolute;
  z-index: 2;
  left: 59%;
  top: 330px;
}


.img06 {
  width: 25%;
  transform: rotate(5deg);
  position: absolute;
  z-index: -2;
  left: 41%;
  top: 90px;

}

.img07 {
  width: 22%;
  left: 44%;
  top: 300px;
  transform: rotate(-5deg);
  position: absolute;
}

.img08 {
  width: 20vw;
  left: 13%;
  top: 312px;
  transform: rotate(-3deg);
  position: absolute;
}


.background-img {
  background-image: url("../IMG/funn2.png");

  width: 100vw;
  position: absolute;
  top: 0;
  z-index: 1;
  height: 161%;
}

.background-img img {
  width: 100%;
  height: 63%;
}

.text-question {
  position: absolute;
  width: 100%;
  height: 100%;
}

h2 {

  width: 100% !important;
  text-align: center;
  color: #ff0000 !important;
  letter-spacing: 1px !important;
  font-size: 30rem !important;
  text-shadow:
    0 0 7px #ff6262,
    0 0 10px #ff6262,
    0 0 21px #ff6262 !important;
  margin-bottom: 52%;
  z-index: 5;

}


.p2 {
  font-size: 8rem;
  color: red;
  margin-bottom: 8%;

}





.boite {
  position: relative;
  height: 100vh;

}



.btn-anim:hover {
  background-color: white;
  transition: all 0.2s;
  border: solid #ff0000 3px;
  border-radius: 11px;
}

.btn-anim:hover p {
  color: red;
  transition: all 0.2s;
}


.anim-bloc {
  width: 27vw;
  height: 60vh;
  background-color: white;
  border: solid red 3px;
  border-radius: 20px;
  position: absolute;
  padding-left: 4%;
  display: none;
  z-index: 20;
  right: 190%;
  bottom: -51%;
}

.buttons-anim:hover .anim-bloc {
  display: block;


}




.D {
  text-align: right;
}


.p2 {
  font-size: 8rem;
  color: red;
  margin-bottom: 8%;

}

.container {
  width: 100vw;
  display: flex;

}


.img-cool {

  width: 40vw;
  position: relative;
}

#article1 {
  position: relative;
  height: 100%;
  background-color: white;
}

#article2 {
  position: relative;
}




.p1 {
  font-size: 8rem;
  color: red;
  margin-left: 3%;
  text-align: center;
  padding-top: 5%;
  line-height: 113px;

}

.buttons-anim {
  width: 10vw;
  height: 15vh;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
  width: 30%;
  background-color: red;
  /* margin-bottom: 30%; */
  border-radius: 11px;
  position: absolute;
  /* margin-top: 13%; */




}



.btn-anim {
  height: 100%;
  width: 30vw;
  /* margin-bottom: 30%; */
  /* padding: 5px 15px; */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
}

.btn-anim p {
  margin-top: 7px;
  /* height: 0; */
  color: white;
  font-size: 6rem;
  text-transform: uppercase;

}

.btn-anim:hover {
  background-color: white;
  transition: all 0.2s;
  border: solid #ff0000 3px;
  border-radius: 11px;
}

.btn-anim p:hover {
  color: red;
  transition: all 0.2s;
}


.anim-bloc {
  width: 27vw;
  height: 60vh;
  background-color: white;
  border: solid red 3px;
  border-radius: 20px;
  position: absolute;
  padding-left: 4%;
  display: none;
  z-index: 20;
  right: 100%;
  bottom: -51%;
}

.buttons-anim:hover .anim-bloc {
  display: block;


}

.left-txt {
  padding-left: 4%;
}

.troistxt {
  margin-bottom: 16%;
}

.cassis {
  padding-left: 4%;
}

.first-txt {
  margin-top: 2%;
  margin-bottom: 4%;
}

.anim-bloc p {
  color: red;
  font-size: 5.5rem;
  text-transform: uppercase;
  line-height: 7.5rem;
  width: 92%;
}

.D {
  text-align: right;
}


.p2v2 {
  padding-top: 3%;
  font-size: 8rem;
  color: red;
  text-shadow:
    0 0 7px #ff6262,
    0 0 10px #ff6262,
    0 0 21px #ff6262;
  text-align: center;
}

.p2 {
  font-size: 8rem;
  color: red;
  text-shadow:
    0 0 7px #ff6262,
    0 0 10px #ff6262,
    0 0 21px #ff6262;
  padding-top: 4%;
  text-align: center;

}

.container {
  width: 100vw;
  display: flex;

}


.img-cool {

  width: 40vw;
  position: relative;
}

.img03-v2 {
  left: 137%;
  transform: rotate(5deg);
  z-index: 1;
  position: absolute;
  width: 103%;
  top: -2px;

}


.img04-v4 {

  transform: rotate(-7deg);
  position: absolute;
  z-index: 2;
  top: -54px;
  left: 14%;
  width: 80%;
}

.img04-v2 {

  transform: rotate(-7deg);
  position: absolute;
  z-index: 2;
  top: -54px;
  left: 14%;
  width: 60%;
}

.img05-v2 {
  width: 110%;
  transform: rotate(5deg);
  position: absolute;
  z-index: 2;
  left: 80%;
  top: 330px;
}

.img06-v2 {
  width: 114%;
  transform: rotate(5deg);
  position: absolute;
  z-index: -2;
  left: 74%;
  top: 38px;
}




.img04-v3 {
  width: 100%;
  transform: rotate(-5deg);
  position: absolute;
  z-index: 2;
  left: 24%;
  top: 45px;
}


.img03-v3 {
  width: 94%;
  transform: rotate(-3deg);
  position: absolute;
  z-index: 2;
  left: 141%;
  top: 27px;
}


.img05-v3 {
  width: 85%;
  transform: rotate(5deg);
  position: absolute;
  z-index: 2;
  left: 80%;
  top: 207px;
}

.retour {
  z-index: 20;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 8vw;
  height: 4vw;
  padding-top: 0.3%;
  background-color: red;
  /* margin-bottom: 30%; */
  margin: 1rem;
  border-radius: 11px;
  color: white;
  font-size: calc(2vh + 2vw);
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.retour:hover {
  background-color: white;
  transition: all 0.2s;
  color: red;

  border: solid #ff0000 3px;
}


/* 
.random-div {
  display: none;
} */







@media (max-width: 900px) {}




@media (max-width: 756px) {
  h1 {
    text-align: center;
    width: 100%;
    top: 5%;
    font-size: 4rem;
    letter-spacing: 1px;



  }
}

@media (max-width: 400px) {

  .troistxt {
    margin-bottom: 15.5%;
  }

  .cassis {
    padding-left: 6%;
  }

  h1 {
    text-align: center;
    left: 0, 5%;
    width: 100%;
    top: 19%;
    letter-spacing: 1px;
    font-size: 7rem;
    line-height: 93px;

  }


  .buttons {
    width: 100vw;
    left: 51%;
    top: 60%;



  }



  .container-img-header {
    width: 100vw;


  }


  .img01 {
    width: 58%;
    right: 6%;
    transform: rotate(5deg);
    top: 43px;

  }

  .img02 {
    width: 44%;
    left: 6%;
    top: 229px;
    transform: rotate(-5deg);

  }

  .img03 {
    width: 40%;
    left: 13%;
    top: 97px;
    transform: rotate(3deg);
    text-align: center;

  }

  .img04 {
    width: 40%;
    left: 41%;
    top: 210px;
    transform: rotate(-2deg);
  }

  .img05 {
    width: 40%;
    left: 56%;
    top: 211px;
    transform: rotate(-3deg);
    position: absolute;
  }



  .img06 {
    width: 40%;
    left: 41%;
    top: 210px;
    transform: rotate(-2deg);

  }

  .img07 {
    width: 43%;
    left: 54%;
    top: 418px;
    transform: rotate(-5deg);

  }

  .img08 {
    width: 45vw;
    left: 16%;
    top: 406px;

  }

  h2 {

    width: 100% !important;
    text-align: center;
    padding-bottom: 135%;
    letter-spacing: 1px !important;
    font-size: 10rem !important;

    margin-bottom: 55%;
    z-index: 5;
    line-height: 7.3rem;

  }

  .img00 {
    top: 25%;
    left: 50%;
    width: 82vw;

    transform: translate(-50%, -50%);
  }

  .p1 {
    font-size: 4rem;
    color: red;
    margin-left: 0%;
    text-align: center;
    padding-top: 21%;
    margin-top: 20%;
    line-height: 56px;
  }


  .buttons-anim {
    height: 7vh;
    /* left: 35%; */
    top: 105%;
    display: flex;
    flex-wrap: wrap;
    /* width: 31%; */
    position: absolute;
    /* margin-top: 18%; */




  }

  .btn-anim p {
    color: white;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-top: 4px;
    padding: 5% 7%;
    justify-content: center;

  }


  .btn-anim {
    /* width: 30vw; */
    margin-bottom: 30%;
    text-align: center;

  }

  .p2 {
    font-size: 4rem;
    padding-top: 34%;
    text-align: center;
    margin-top: 31%;

  }

  .buttons-anim-v2 {
    height: 7vh;
    /* left: 35%; */
    top: 88%;
    display: flex;
    flex-wrap: wrap;
    width: 31%;
    position: absolute;
    margin-top: 13%;

  }

  .boite2,
  .boite3 {
    position: relative;
    height: 70vh;
  }

  .img04-v2 {
    transform: rotate(-7deg);
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 14%;
    width: 130%;
  }

  .img03-v2 {
    left: 67%;
    transform: rotate(5deg);
    z-index: 1;
    position: absolute;
    width: 173%;
    top: -2px;

  }

  .img06-v2 {
    width: 182%;
    transform: rotate(5deg);
    position: absolute;
    z-index: -2;
    left: 47%;
    top: 227px;
  }


  .img001 {
    top: 25.5%;
    left: 50%;
    width: 92vw;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .p2v2 {
    padding-top: 39%;
    font-size: 4rem;
    color: red;
    text-align: center;
    margin-bottom: 11%;
  }

  .img04-v3 {
    width: 179%;
    transform: rotate(-5deg);
    position: absolute;
    z-index: 2;
    left: 16%;
    top: 45px;
  }

  .img03-v3 {
    width: 199%;
    transform: rotate(3deg);
    position: absolute;
    z-index: 2;
    left: 40%;
    top: 202px;
  }

  .img05-v3 {
    width: 163%;
    transform: rotate(-5deg);
    position: absolute;
    z-index: 2;
    left: 22%;
    top: 332px;
  }


  .anim-bloc {
    width: 96vw;
    height: 58vh;
    position: absolute;
    padding-left: 4%;
    display: none;
    z-index: 20;
    right: -116.5%;
    bottom: 149%;

  }

  .anim-bloc p {
    font-size: 5.5rem;
    text-transform: uppercase;
    line-height: 6.5rem;
    width: 92%;
  }

  .img04-v4 {
    transform: rotate(-7deg);
    position: absolute;
    z-index: 2;
    top: 141px;
    left: 15%;
    width: 161%;
  }

  .img0002 {
    top: 25%;
    left: 50%;
    width: 100vw;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .img0005 {
    top: 25%;
    left: 50%;
    width: 83vw;
    position: absolute;
    transform: translate(-50%, -50%);
  }


  .img00002 {
    top: 13.5%;
    left: 5%;
    width: 90vw;
    position: absolute;

  }

  .retour {

    z-index: 20;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 26vw;
    height: 12vw;
    /* margin-bottom: 30%; */
    margin: 1rem;
    border-radius: 11px;
    padding-top: 1%;
    color: white;
    font-size: calc(3.5vh + 3.5vw);
    text-align: center;
    /* letter-spacing: 0px; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }



}