@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Plaster&display=swap");

/* Generals */
:root {
  --green: #63e6be;
  --blue: #74c0fc;
  --yellow: #ffd43b;
  --red: #ff8787;
  --green-dark: #0ca678;
  --blue-dark: #1c7ed6;
  --yellow-dark: #fab005;
  --red-dark: #e03131;
  --black: #183153;
  --white-dark: #f0f1f3;
  --two-px: clamp(2px, 0.17vw, 0.17vw);
  --five-px: clamp(5px, 0.4vw, 0.4vw);
  --eight-px: clamp(0.5rem, 0.65vw, 0.65vw);
  --fourteen-px: clamp(14px, 1.13vw, 1.13vw);
  --eighteen-px: clamp(18px, 1.45vw, 1.45vw);
  --one-rem: clamp(1rem, 1.3vw, 1.3vw);
  --one-twenty-five-rem: clamp(1.25rem, 1.6vw, 1.6vw);
  --one-five-rem: clamp(1.5rem, 1.94vw, 1.94vw);
  --two-rem: clamp(2rem, 2.6vw, 2.6vw);
  --two-five-rem: clamp(2.5rem, 3.221vw, 3.221vw);
  --three-rem: clamp(3rem, 3.9vw, 3.9vw);
  --five-rem: clamp(5rem, 6.45vw, 6.45vw);
  --six-rem: clamp(6rem, 7.73vw, 7.73vw);
  --ten-rem: clamp(10rem, 12.9vw, 12.9vw);
  --fifteen-rem: clamp(15rem, 19.33vw, 19.33vw);
  --twenty-rem: clamp(20rem, 25.76vw, 25.76vw);
  --twenty-two-rem: clamp(22rem, 28.35vw, 28.35vw);
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
* {
  margin: 0;
  pad: 0;
  box-sizing: border-box;
  font-family: "Nunito";
}
body {
  scroll-snap-type: y mandatory;
}
h1 {
  font-size: var(--three-rem);
}
h2 {
  font-size: var(--two-rem);
}
h4 {
  font-size: var(--one-rem);
}
p {
  line-height: var(--one-five-rem);
  color: var(--black);
  font-size: var(--one-rem);
}
section:not(#gallery, #about, #contact),
.first,
.second,
footer {
  padding: var(--six-rem) var(--five-rem);
}

/* Animatons */
@keyframes rotate {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes scrollLeft {
  to {
    left: -25rem;
  }
}

/* Toggle JS */
.scrolled {
  & main {
    background-color: var(--blue);
    color: white;
    margin: var(--one-rem) var(--two-rem);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;

    & a {
      color: white;

      &:hover {
        color: var(--blue-dark);
      }
    }

    @media only screen and (max-width: 884px) {
      & nav {
        background-color: var(--blue);
      }
    }
  }
}
.scrolled-more {
  & main {
    background-color: var(--green);
    color: white;
    margin: var(--one-rem) var(--two-rem);

    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;

    & a {
      color: white;

      &:hover {
        color: var(--green-dark);
      }
    }

    @media only screen and (max-width: 884px) {
      & nav {
        background-color: var(--green);
      }
    }
  }
}

/* Styling */
header {
  z-index: 999;
  position: fixed;
  top: 0;
  color: white;
  width: 100%;

  & main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--one-rem) var(--two-rem);
    transition: 500ms;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    -o-transition: 500ms;
    & h4 {
      font-size: var(--one-rem);
    }

    & label {
      display: none;
    }

    & input {
      display: none;
    }

    & nav {
      display: flex;
      gap: var(--one-rem);
      background-color: transparent;
      list-style-type: none;
      font-weight: 500;
      transition: 500ms;
      -webkit-transition: 500ms;
      -moz-transition: 500ms;
      -ms-transition: 500ms;
      -o-transition: 500ms;

      & li {
        padding: var(--eight-px) var(--one-rem);
        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);

        & a {
          color: white;
          text-decoration: none;
          font-size: var(--one-rem);
        }

        &:hover a {
          color: var(--blue);
        }
      }
    }
    @media only screen and (max-width: 920px) {
      & nav {
        display: none;
      }

      & input:checked ~ nav {
        display: flex;
        flex-direction: column;
        background-color: var(--blue);
        position: absolute;
        top: 5rem;
        right: 2rem;
        padding: var(--eight-px);
        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);
        transition: 500ms;
        -webkit-transition: 500ms;
        -moz-transition: 500ms;
        -ms-transition: 500ms;
        -o-transition: 500ms;
      }
      & input:checked ~ label {
        background-color: rgb(0, 0, 0, 0.2);
      }
      & label {
        display: grid;
        place-content: center;
        padding: var(--two-px);
        border-radius: var(--five-px);
        -webkit-border-radius: var(--five-px);
        -moz-border-radius: var(--five-px);
        -ms-border-radius: var(--five-px);
        -o-border-radius: var(--five-px);

        &:hover {
          background-color: rgb(0, 0, 0, 0.2);
        }
      }
    }
  }
}

#home {
  display: grid;
  place-content: center;
  background-color: var(--black);
  color: white;
  height: 100vh;
  position: relative;
  font-size: large;

  & .constellation {
    height: var(--five-rem);
    position: absolute;
    bottom: 5rem;
    left: 15rem;
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
  }

  & .venus {
    height: var(--ten-rem);
    position: absolute;
    top: -3rem;
    right: -1rem;
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
  }

  & .stars {
    position: absolute;
    width: max(100vw, 100vh);
    mask-image: linear-gradient(
      to bottom,
      var(--black) 50%,
      transparent 70%,
      transparent
    );
    filter: hue-rotate(30deg) opacity(0.5);
    -webkit-filter: hue-rotate(30deg) opacity(0.5);
  }

  & .saturn {
    height: var(--five-rem);
    position: absolute;
    top: 20%;
    left: 8%;
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
  }
  & .falling-star {
    height: var(--two-five-rem);
    position: absolute;
    right: 8%;
    top: 25%;
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
  }

  & main {
    position: relative;
    text-align: center;

    & img {
      height: var(--five-rem);

      &#flower-face {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
      }
      &#petals {
        animation: rotate 30s linear infinite;
        -webkit-animation: rotate 30s linear infinite;
      }
    }

    & .text {
      display: grid;
      gap: var(--two-rem);

      & p {
        color: var(--white-dark);
        font-size: var(--one-twenty-five-rem);
      }
      & a {
        background-color: var(--green);
        color: var(--black);
        width: fit-content;
        margin: auto;
        padding: var(--one-rem) var(--two-rem);
        font-weight: 500;
        text-decoration: none;
        font-size: var(--one-rem);
        box-shadow: 0 var(--five-px) var(--green-dark);
        border: var(--two-px) var(--green-dark) solid;
        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);

        &:hover {
          border-color: var(--black);
        }

        &:active {
          box-shadow: none;
          transform: translateY(var(--five-px));
          -webkit-transform: translateY(var(--five-px));
          -moz-transform: translateY(var(--five-px));
          -ms-transform: translateY(var(--five-px));
          -o-transform: translateY(var(--five-px));
        }
      }
    }
  }
}
#about {
  position: relative;

  & main span {
    color: var(--red);
  }

  & .first {
    display: grid;
    gap: var(--two-rem);
    position: relative;
    background: linear-gradient(
      to bottom,
      var(--black) 50%,
      var(--blue-dark) 100%
    );

    & .text {
      display: grid;
      place-content: center;
      gap: var(--two-rem);
      text-align: center;

      & h2 {
        color: white;
      }

      & p {
        color: var(--white-dark);
      }
    }

    & .smiled-earth {
      position: relative;
      margin: auto;
      z-index: 10;

      & img:nth-child(1) {
        z-index: 888;
        position: absolute;
        left: 50%;
        max-width: var(--six-rem);
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
      }

      & img:nth-child(2) {
        max-width: 80vw;
        box-shadow: #74c0fc 0 0 var(--twenty-rem);
        border-radius: 1000px;
        -webkit-border-radius: 1000px;
        -moz-border-radius: 1000px;
        -ms-border-radius: 1000px;
        -o-border-radius: 1000px;
        animation: rotate 60s linear infinite;
        -webkit-animation: rotate 60s linear infinite;
      }
      & .satelite {
        height: var(--three-rem);
        position: absolute;
        top: 0;
        left: -1rem;
        transform: scaleX(-1) rotate(5deg);
        -webkit-transform: scaleX(-1) rotate(5deg);
        -moz-transform: scaleX(-1) rotate(5deg);
        -ms-transform: scaleX(-1) rotate(5deg);
        -o-transform: scaleX(-1) rotate(5deg);
      }
    }
  }
  & .second {
    display: grid;
    gap: var(--two-rem);
    background: linear-gradient(to bottom, var(--blue-dark), var(--blue));
    position: relative;

    & .plane {
      height: var(--fifteen-rem);
      position: absolute;
      top: -5rem;
      left: 100%;
      transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      animation: scrollLeft 30s linear infinite;
      -webkit-animation: scrollLeft 30s linear infinite;
    }

    & .clouds:nth-child(1) {
      height: var(--fifteen-rem);
      position: absolute;
      top: -5rem;
      left: -2rem;
    }

    & .clouds:nth-child(2) {
      height: var(--fifteen-rem);
      position: absolute;
      right: -5rem;
      bottom: -2rem;
    }

    & h2 {
      color: white;
      z-index: 10;
    }
    & .cards {
      display: grid;
      grid-template-columns: repeat(
        auto-fit,
        minmax(var(--twenty-two-rem), 1fr)
      );
      place-content: center;
      gap: var(--one-rem);
      z-index: 10;

      & .card {
        display: flex;
        gap: var(--one-rem);
        background-color: white;
        color: var(--black);
        padding: var(--one-rem);
        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);
        transition: 30ms;
        -webkit-transition: 30ms;
        -moz-transition: 30ms;
        -ms-transition: 30ms;
        -o-transition: 30ms;

        &:nth-child(1):hover {
          background-color: var(--red);
        }
        &:nth-child(2):hover {
          background-color: var(--yellow);
        }
        &:nth-child(3):hover {
          background-color: var(--green);
        }
        &:nth-child(4):hover {
          background-color: var(--blue);
        }

        & img {
          height: var(--five-rem);
        }
        & .text {
          display: grid;
          gap: var(--eight-px);
        }
      }
    }
  }
}
#tips {
  background-color: var(--blue);
  position: relative;

  & .birds {
    position: absolute;
    height: calc(var(--five-rem) - var(--one-rem));
    right: -20rem;
    top: 0rem;
  }
  & .cloud:nth-child(1) {
    position: absolute;
    height: var(--fifteen-rem);
    left: -2rem;
    top: 8rem;
  }
  & .cloud:nth-child(2) {
    position: absolute;
    height: var(--fifteen-rem);
    right: -2rem;
    bottom: -5rem;
  }
  & main {
    display: grid;
    gap: var(--two-rem);

    & h2 ~ p {
      text-align: center;
      z-index: 10;
    }
    & h2 {
      text-align: center;
      z-index: 10;
    }
    & .cards {
      display: grid;
      place-content: center;
      grid-template-columns: repeat(auto-fit, var(--twenty-rem));
      gap: var(--two-rem);
      z-index: 10;

      & .card {
        display: flex;
        gap: var(--one-rem);

        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);

        & img {
          height: var(--two-rem);
        }
        & .text {
          display: grid;
          gap: var(--eight-px);

          & h4 {
            font-size: var(--eighteen-px);
          }
          & p {
            font-size: var(--fourteen-px);
          }
        }
      }
    }
  }
}
#benefits {
  background: linear-gradient(to bottom, var(--blue) 80%, white 100%);
  position: relative;

  & .school {
    position: absolute;
    bottom: -1.2rem;
    left: -6rem;
    height: var(--twenty-rem);
  }

  & .clouds:nth-child(1) {
    position: absolute;
    height: var(--twenty-rem);
    right: -5rem;
    bottom: 2rem;
  }
  & .clouds:nth-child(2) {
    left: -7rem;
    position: absolute;
    height: var(--twenty-rem);
    top: 0;
  }
  & main {
    display: grid;
    gap: var(--two-rem);

    & h2 {
      z-index: 10;
    }
    & p {
      z-index: 10;
    }

    & .cards {
      display: grid;
      place-content: center;
      grid-template-columns: repeat(auto-fit, minmax(var(--ten-rem), 1fr));
      gap: var(--two-rem);
      position: relative;
      z-index: 10;

      & .card {
        display: grid;
        gap: var(--one-rem);
        padding: var(--one-rem);
        text-align: center;
        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);

        & img {
          height: var(--three-rem);
          margin: auto;
        }

        &:nth-child(1) {
          background-color: var(--red);
          box-shadow: 0 var(--five-px) var(--red-dark);

          &:hover {
            border: var(--two-px) var(--red-dark) solid;
            box-shadow: none;
            transform: translateY(var(--five-px));
            -webkit-transform: translateY(var(--five-px) (--five-px));
            -moz-transform: translateY(var(--five-px));
            -ms-transform: translateY(var(--five-px));
            -o-transform: translateY(var(--five-px));
          }
        }
        &:nth-child(2) {
          background-color: var(--yellow);
          box-shadow: 0 var(--five-px) var(--yellow-dark);

          &:hover {
            border: var(--two-px) var(--yellow-dark) solid;
            box-shadow: none;
            transform: translateY(var(--five-px));
            -webkit-transform: translateY(var(--five-px));
            -moz-transform: translateY(var(--five-px));
            -ms-transform: translateY(var(--five-px));
            -o-transform: translateY(var(--five-px));
          }
        }
        &:nth-child(3) {
          background-color: var(--green);
          box-shadow: 0 var(--five-px) var(--green-dark);

          &:hover {
            border: var(--two-px) var(--green-dark) solid;
            box-shadow: none;
            transform: translateY(var(--five-px));
            -webkit-transform: translateY(var(--five-px));
            -moz-transform: translateY(var(--five-px));
            -ms-transform: translateY(var(--five-px));
            -o-transform: translateY(var(--five-px));
          }
        }
        &:nth-child(4) {
          background-color: var(--blue);
          box-shadow: 0 var(--five-px) var(--blue-dark);

          &:hover {
            border: var(--two-px) var(--blue-dark) solid;
            box-shadow: none;
            transform: translateY(var(--five-px));
            -webkit-transform: translateY(var(--five-px));
            -moz-transform: translateY(var(--five-px));
            -ms-transform: translateY(var(--five-px));
            -o-transform: translateY(var(--five-px));
          }
        }
      }
    }
  }
}
#gallery {
  background: linear-gradient(to bottom, var(--green), var(--green-dark));
  position: relative;

  & .students {
    position: absolute;
    height: var(--fifteen-rem);
    top: -7rem;
    right: 5rem;
  }

  & .river {
    position: absolute;
    height: calc(var(--twenty-two-rem) + var(--one-rem));
    left: 70%;
    top: 0;
    z-index: 9;
  }
  & .text {
    display: grid;
    position: relative;
    gap: var(--two-rem);
    padding: var(--six-rem) var(--five-rem) var(--two-rem) var(--five-rem);
    z-index: 10;
  }
  & main {
    z-index: 10;
    & .photos {
      z-index: inherit;
      display: flex;
      gap: var(--two-rem);
      position: relative;
      background-color: var(--black);
      padding: var(--two-rem);
      height: calc(var(--twenty-rem) - var(--one-rem));
      width: max(100vw, 1128px);
      overflow: hidden;

      & img {
        --second: 60s;
        position: absolute;
        left: 100%;
        object-fit: cover;
        height: var(--fifteen-rem);
        width: var(--fifteen-rem);
        filter: grayscale(1);
        border-radius: var(--one-rem);
        -webkit-border-radius: var(--one-rem);
        -moz-border-radius: var(--one-rem);
        -ms-border-radius: var(--one-rem);
        -o-border-radius: var(--one-rem);
        animation: scrollLeft var(--second) linear infinite;
        -webkit-animation: scrollLeft var(--second) linear infinite;
        -webkit-filter: grayscale(1);

        &:hover {
          transition: 50ms;
          filter: grayscale(0);
          -webkit-filter: grayscale(0);
          transform: translateY(clamp(-0.5rem, -0.65vw, -0.65vw));
          -webkit-transform: translateY(clamp(-0.5rem, -0.65vw, -0.65vw));
          -moz-transform: translateY(clamp(-0.5rem, -0.65vw, -0.65vw));
          -ms-transform: translateY(clamp(-0.5rem, -0.65vw, -0.65vw));
          -o-transform: translateY(clamp(-0.5rem, -0.65vw, -0.65vw));
          -webkit-transition: 50ms;
          -moz-transition: 50ms;
          -ms-transition: 50ms;
          -o-transition: 50ms;
        }

        &:nth-child(1) {
          animation-delay: calc(var(--second) / 6 * (6 - 1) * -1);
        }
        &:nth-child(2) {
          animation-delay: calc(var(--second) / 6 * (6 - 2) * -1);
        }
        &:nth-child(3) {
          animation-delay: calc(var(--second) / 6 * (6 - 3) * -1);
        }
        &:nth-child(4) {
          animation-delay: calc(var(--second) / 6 * (6 - 4) * -1);
        }
        &:nth-child(5) {
          animation-delay: calc(var(--second) / 6 * (6 - 5) * -1);
        }
        &:nth-child(6) {
          animation-delay: calc(var(--second) / 6 * (6 - 6) * -1);
        }
      }
      &:hover img {
        animation-play-state: paused;
      }
    }
  }
}
footer {
  background-color: var(--black);
  color: white;

  & img {
    height: var(--one-rem);
  }
  & a {
    color: white;
    font-size: var(--fourteen-px);
    position: relative;
  }

  & p {
    color: white;
    font-size: var(--fourteen-px);
  }
  & main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--fifteen-rem), 1fr));
    gap: var(--two-rem);

    & #contact {
      display: grid;
      gap: var(--one-rem);

      & .label {
        display: flex;
        gap: var(--one-rem);
      }
    }
  }
}
/* Genenral Media Queries */
@media only screen and (max-width: 625px) {
  #about .first,
  #about .second,
  #tips,
  #benefits,
  footer {
    padding: var(--six-rem) var(--two-five-rem);
  }
  #gallery .text {
    padding: var(--six-rem) var(--two-five-rem) var(--two-rem)
      var(--two-five-rem);
  }
}
@media only screen and (max-width: 780px) {
  #gallery .students {
    right: -16rem;
  }
  #tips .birds {
    right: -29rem;
    top: 5rem;
  }
}

@media only screen and (max-width: 540px) {
  #benefits .clouds:nth-child(1) {
    right: -10rem;
  }
}