@media only screen and (max-width: 868px) {
  html {
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .verb {
    word-break: keep-all;
  }
  #infinite-scroll-container p {
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  }
  #infinite-scroll-container {
    /* font-size: 2rem;
    line-height: 2.1rem; */
    font-size: 8vw;
    line-height: 8.4vw;
    letter-spacing: -0.05rem;
    width: 92%;
    text-align: center;
    overflow-y: visible;

    /* text-align: center; */
    /* word-break: break-all; */
    /* overflow: visible; */
  }
  .top-onscroll {
    top: 6%;
    /* transform: translate(-50%, -50%) scale(0.7); */
  }
  .works,
  .intro {
    width: 100%;
  }
  .text-container {
    display: block;
    transform: translateX(0);
    position: relative;
    left: 0.5rem;
  }

  img {
    position: relative;
  }

  .go-onbottom {
    /* font-size: 9.5vw !important; */
    top: 94% !important;
  }

  #typewriter-trigger {
    transition: 850ms cubic-bezier(0.43, 0, 0, 1.01); /* transition: 250ms cubic-bezier(0.43, 0, 0, 1.01) !important; */
  }
  .expanded #typewriter-trigger {
    font-size: 1.9rem !important;
  }
  .about-container {
    width: 96%;
    height: 93.5%;
    font-size: 0.75rem;
    line-height: 0.95rem;
    /* width: 95.5vw; */
    width: 122.5vw;
    height: 7svh;
    /* transform: translate(-50%, -50%) matrix(1.15, 0, 0, 1.15, 0, 0); */

    /* clip-path: inset(285px 115px); */
    /* clip-path: inset(290px 0px); */
  }

  .close-button {
    opacity: 0;
  }
  .normal-clip {
    /* clip-path: inset(290px 140px); */
    width: 27vw;
    height: 8svh;
  }
  .size-up {
    transform: translate(-50%, -50%) matrix(0.75, 0, 0, 0.75, 0, 0);
  }
  #infinite-scroll-container p {
    display: inline;
    margin: 0;
    width: 95%;
    color: rgb(245, 245, 245);
    /* margin-left: 1em; */
  }
  sup {
    font-size: 50%;
    vertical-align: 1rem;
    padding-left: 0.25rem;
  }

  .credits {
    bottom: 3.5rem;
  }

  footer > div:nth-child(1) {
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
  }
  footer {
    width: 95%;
  }

  .intro {
    margin-top: 0;
  }
  .intro > p:nth-child(1) {
    margin-bottom: 0.75rem;
  }
  .about-container.expanded {
    width: 94.5vw !important;
    height: 99.5svh;
  }

  .about-content {
    width: 95%;
    line-height: 0.95rem;
    z-index: -2;
    position: relative;
    transition: 1000ms cubic-bezier(0.43, 0, 0, 1.01);
    padding-bottom: 7.5rem;
  }

  .scroll-indicator svg {
    width: 40%;
  }

  img {
    height: 100%;
  }

  .descale {
    transform: translate(-50%, 0%) scale(1) !important;
  }
  a#typewriter-trigger {
    font-size: 2.5rem !important;
    transform: translate(-50%, -50%);
    bottom: initial;
    top: 47.5%;
  }
  .image-overlay {
    height: 100%;
    width: 100%;
    background-color: #e6ff28f4;
    display: none;
    flex-direction: column;
    position: absolute;
    justify-content: flex-start;
  }
  .works,
  .intro,
  .clients {
    width: 100%;
  }
  .image-overlay img {
    width: 100%;
    left: 0;
    height: 100%;
    object-fit: contain;
  }

  ul {
    margin-top: 0.5rem;
    padding-inline-start: 0px;
  }
  .section-t-1 {
    flex-direction: column;
    margin-top: 0rem;
  }
  .section-t-1 {
    padding: 0.5rem;
  }

  .section-t-1 > div:nth-child(1) {
    width: 98% !important;
  }
  .section-t-1 > div > div:nth-child(1) {
    /* margin-top: 0.5rem; */
    margin-left: 0;
  }
  .section-t-1 > div > div:nth-child(2) {
    /* margin-top: 0.5rem; */
    margin-left: 0;
  }

  .section-t-1 div:nth-child(1) {
    width: 50%;
  }

  ul > li:nth-child(1) {
    margin-bottom: 0.5rem;
  }

  .section-t-2 {
    flex-direction: column;
  }

  .img-wrapper img {
    /* width: 100%; */
  }
  #infinite-scroll-container p {
    color: rgb(245, 245, 245);
  }

  .credits {
    font-size: 0.5rem;
  }
}

/* Iphone 8 */

@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  /* .about-container {
    clip-path: inset(235px 0px);
  } */
  /* a#typewriter-trigger {
    top: 47%;
  } */
  .normal-clip {
    width: 27.5vw !important;
    height: 8.5svh;
  }

  .about-container {
    height: 8.5svh;
    width: 130vw;
  }

  .expanded #typewriter-trigger {
    font-size: 1.75rem !important;
  }
  .go-onbottom {
    /* font-size: 9.5vw !important; */
    top: 93% !important;
  }
}

/* Iphone X */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .normal-clip {
    /* clip-path: inset(277px 137px) !important; */
  }

  .about-container {
    /* clip-path: inset(277px 0px); */
  }
}

/* Iphone 14 Pro Max */

@media only screen and (min-width: 422px) and (max-width: 440px) {
  /* Styles spécifiques */
  a#typewriter-trigger {
    /* top: 47.75% !important; */
  }
  .about-container {
    width: 117.5vw;
  }
  .normal-clip {
    /* clip-path: inset(325px 160px); */
    width: 27vw !important;
  }
  .go-onbottom {
    top: 95% !important;
  }
  .expanded #typewriter-trigger {
    font-size: 2rem !important;
  }
}

@media only screen and (min-width: 744px) and (max-width: 1366px) and (min-resolution: 2dppx) and (orientation: portrait) and (hover: none) {
  .normal-clip {
    /* clip-path: inset(457px 275px) !important; */
    height: 10svh !important;
    width: 30vw !important;
  }
  .about-container.expanded {
    width: 98.5vw !important;
  }
  .about-container {
    /* clip-path: inset(450px 5px); */
  }
  a#typewriter-trigger {
    font-size: 6rem !important;
    transform: translate(-50%, 0%);
    bottom: initial;
  }
  .about-container {
    height: 8.5svh;
  }
  .about-container {
    width: 142.5vw;
    height: 9.5svh;
  }
  .about-container.expanded {
    width: 98.5vw;
    height: 100.5svh !important;
  }

  .expanded #typewriter-trigger {
    font-size: 4rem !important;
    bottom: -4rem;
    top: 96% !important;
  }
  .size-up {
    transform: translate(-50%, -50%) matrix(0.65, 0, 0, 0.65, 0, 0);
  }
}
@media only screen and (min-width: 744px) and (max-width: 1366px) and (min-resolution: 2dppx) and (orientation: landscape) and (hover: none) {
  /* Styles spécifiques pour tous les iPads en mode paysage */
  .about-container.expanded {
    width: 102.5vw !important;
    height: 96.5vh;
    /* -webkit-clip-path: inset(0% 0% 0% 0%) !important;
    clip-path: inset(0% 0% 0% 0%) !important; */
  }
  .about-container {
    /* clip-path: inset(20rem 0rem);
    width: 102.5vw !important; */
    width: 95vw;
    height: 13vh;
  }

  .normal-clip {
    width: 20vw !important;
    height: 13vh;
  }
  .normal-clip {
    /* clip-path: inset(20rem 27rem) !important; */
    /* clip-path: inset(20.5rem 28rem) !important; */
  }
  a#typewriter-trigger {
    font-size: 6rem !important;
    top: 52.5% !important;
  }
  .expanded #typewriter-trigger {
    font-size: 7rem !important;
    top: 92.5% !important;
  }
  #infinite-scroll-container {
    font-size: 5.5vw;
    line-height: 5.1vw;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .expanded #typewriter-trigger {
    font-size: 6rem !important;
  }
  .works,
  .intro,
  .clients {
    width: 90%;
  }
  a#typewriter-trigger {
    transform: translate(-50%, -40%);
    font-size: 7rem !important;
  }
  #infinite-scroll-container {
    font-size: 7.2vw;
    line-height: 6.8vw;
    text-align: center;
  }
  .about-container {
    width: 136.5vw;
    height: 10svh;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .expanded #typewriter-trigger {
    font-size: 8.5rem !important;
    top: 93.5% !important;
  }
  .about-container {
    width: 85vw;
    height: 11vh;
  }
  .normal-clip {
    width: 18vw !important;
    height: 11vh;
  }
  .about-container.expanded {
    width: 102.5vw !important;
    height: 96.5vh;
  }
  #infinite-scroll-container {
    font-size: 5.5vw;
    line-height: 5.1vw;
  }
}

@media only screen and (min-width: 744px) and (max-width: 1200px) and (min-resolution: 2dppx) and (orientation: landscape) and (hover: none) {
  .about-container {
    width: 100vw;
  }
}