@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #1f242d;

  &::-webkit-scrollbar {
    display: none;
  }

  & section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;

    & .images {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    & h1 {
      color: #fff;
      font-size: 50px;
      text-align: center;

      @media screen and (width <= 768px) {
        font-size: 30px;
      }
    }
    & p {
      font-weight: 600;
      font-size: 25px;
      text-align: center;

      @media screen and (width <= 768px) {
        font-size: 15px;
      }
    }
    &.sec-1 p {
      color: #0ef;
    }
    &.sec-2 p {
      color: #0f0;
    }
    &.sec-3 p {
      color: #e0f;
    }
    &.sec-4 p {
      color: #ff0;
    }
    &.sec-5 p {
      color: #f00;
    }
    &.sec-6 .images img {
      width: 350px;
      margin: 30px;
      transform: skewY(90deg);
      transition-duration: calc(0.3s * var(--i));
    }
    &.sec-6.show-animate .images img {
      transform: skewY(0);
    }

    & .animate {
      transition: 1s;
      opacity: 0;
      filter: blur(5px);
    }
    &.show-animate .animate {
      opacity: 1;
      filter: blur(0);
    }
    &.sec-1 .animate {
      transform: translateX(-100%);
    }
    &.sec-1.show-animate .animate {
      transform: translateX(0);
    }
    &.sec-2 .animate {
      transform: translateX(100%);
    }
    &.sec-2.show-animate .animate {
      transform: translateX(0);
    }
    &.sec-3 .animate {
      transform: scale(0.6);
    }
    &.sec-3.show-animate .animate {
      transform: scale(1);
    }
    &.sec-4 .animate {
      transition: 2s;
      transform: rotate3d(-1, 0, 0, 90deg);
    }
    &.sec-4.show-animate .animate {
      transform: rotate3d(0, 0, 0, 0);
    }
    &.sec-5 .animate .showRight-animate {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: #1f242d;
      transition: 1s;
      transition-duration: calc(0.3s * var(--i));
    }
    &.sec-5.show-animate .animate .showRight-animate {
      transform: translateX(100%);
    }
  }
}