@media screen and (max-width: 800px) {
  .texte{
padding: 0rem 20%;
  }
}

@media screen and (max-width: 600px) {


/* #clickpiece {
  width: 130px;
  height: 130px;
  top: 50%;
  left: 20%;
  position: fixed;
  transform: translate(-50%, -50%) rotate(-10deg);
  transition: all 0.5s ease-in-out;
} */

.animate-piece {
  top: -10% !important;
  left: 40% !important;
  width: 800px !important;
  height: auto;
}


  #chapitre-indicator {
    top: 0.5rem;
  right: 0.5rem;
  text-align: center;
  position: absolute;
    font-size: 1em;
    width: fit-content;
  }

  #chapitreD-indicator {
    top: 0.5rem;
  right: 0.5rem;
  position: fixed;
  text-align: center;
    font-size: 1em;
    width: fit-content;
  }

  .story {
    font-size: 1.8em;
    position: fixed;
    bottom: 0.5rem !important;
    z-index: 3000;
    padding: 0 3%;
    top: auto;
    width: 100%;
  }

  .intro {
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
    font-size: 1.5em;
    padding: 0rem 4%;
  }

  .title {
    position: fixed;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 50;
    font-size: 2.5rem !important;
    padding: 0rem 10%;

  }

  #textsContainer {
    z-index: 30;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  #outroStory p {
    font-size: 1.5em;
    width: 100%;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);    z-index: 200;
  }

  .devant {
    width: 75vw;
    z-index: 10;
    transition: all 1.5s ease-in-out;
  }

  .circleTransitionUp {
    height: 75vw !important;
    width: 75vw !important;
  }

  #div-with-hole {
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    height: 150vw;
    width: 150vw;
    filter: blur(9px);
    position: absolute;
    }

    .circleTransitionUpOutro {
      will-change: box-shadow !important;
      width: 150vw !important;
      height: 150vw !important;
    }

  .circleTransitionUp2 {
    height: 25vw !important;
    width: 30vw !important;
    top: 43% !important;
    left: 24vw !important;
    filter: blur(8px) !important;
    transform: translate(-10%) !important;
  }

  .circleTransitionUp3 {
    height: 30vw !important;
    width: 30vw !important;
    top: 45% !important;
    left: 61vw !important;
    filter: blur(13px) !important;
  }

  .circleTransitionUp4 {
    height: 40vw !important;
    width: 40vw !important;
    filter: blur(7px) !important;
  }

  .circleTransitionUp5 {
    height: 20vw !important;
    width: 20vw !important;
    left: 55vw !important;
    filter: blur(8px) !important;
    transform: translate(-10 -20%) !important;
  }

  .circleTransitionUp6 {
    height: 24vw !important;
    width: 34vw !important;
    border-radius: 10px !important;
    top: 49% !important;
    left: 47% !important;
    filter: blur(8px) !important;
  }

  .circleTransitionUp7 {
    height: 68vw !important;
    width: 68vw !important;
    border-radius: 2% !important;
    filter: blur(11px) !important;
  }

  .circleTransitionUp8 {
    height: 94vw !important;
    width: 66vw !important;
    filter: blur(15px) !important;
  }

  .circleTransitionUp9 {
    height: 26vw !important;
    width: 26vw !important;
    left: 55vw !important;
    top: 48% !important;
    filter: blur(9px) !important;
  }

  .circleTransitionUp10 {
    height: 20vw !important;
    width: 53vw !important;
    top: 46% !important;
    left: 57% !important;
    filter: blur(13px) !important;
    transform: translate(-10 -20%) !important;
  }

  .circleTransitionUpBoom {
    height: 65vw !important;
    width: 65vw !important;
    top: 50% !important;
    left: 50% !important;
  }
}

@media screen and (max-width: 1000px) {
  .title {
    font-size: 8vw;
  }

  #outroStory p {
    font-size: 2rem;
    width: 80%;
  }
}