html {
  scroll-behavior: smooth;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgb(151, 156, 255) 0%,
    rgb(175, 175, 255) 30%,
    rgb(213, 211, 255) 50%,
    rgb(255, 255, 255) 100%
  );
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Space Grotesk", sans-serif;
  color: black;
  background-attachment: fixed;
  overscroll-behavior-y: none;

  .container-main {
    width: 100%;
    height: 100%;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    scroll-behavior: smooth;

    a {
      text-decoration:none;
      color: inherit;
    }

    section {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }

    .home-page {
      scroll-snap-align: start;
      position: relative;
      width: 100%;
      height: 100vh;
      scroll-behavior: smooth;
      
      header {
        width: 100%;
        position: static;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px 5%;
        box-sizing: border-box;
      }

      .logo {
        font-weight: 500;
        font-size: 45px;
        text-transform: capitalize;
        pointer-events: none;
        cursor: default;

      }

      .language {
        font-weight: 300;
        font-size: 22px;
        text-transform: uppercase;
        cursor: pointer;
      }

      @media screen and (max-width: 730px) {
        .logo {
          font-size: 45px;
        }

        .language {
          font-size: 20px;
        }
      }

      .language:hover {
        color: rgb(32, 32, 255);
      }

      .container-bottom-1 {
        position: absolute;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 5%;
        width: 100%;
        bottom: 50px;

        .about {
          font-size: 22px;
          font-weight: 200;
          align-self: center;
          margin: 0;
        }

        @media screen and (max-width: 900px) {
          .about {
            font-size: 20px;
          }
        }

        .container-portfolio {
          align-self: flex-end;
          display: flex;
          justify-content: space-between;
          margin: 0;
          padding: 0;
          scroll-behavior: smooth;
  
          .portfolio {
            align-self: flex-end;
            right: 0;
            font-size: 70px;
            font-weight: 100;
            font-style: italic;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
          }

          @media screen and (max-width: 900px) {
            .portfolio {
              display: none;
            }
          }
  
          .material-symbols-outlined {
            align-self: flex-end;
            right: 0;
            font-size: 80px;
            font-weight: 300;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
          }
        }
  
        .container-portfolio:hover {
          color: rgb(32, 32, 255);
          cursor: pointer;
        }
      }
    }

    .portfolio-page {
      display: flex;
      position: relative;
      flex-direction: column;
      scroll-snap-align: start;
      width: 100%;
      height: 100vh;
      scroll-behavior: smooth;

      .container-projects {
        display: flex;
        height: 90%;
        width: 100%;
        justify-content: center;
        align-content: center;
        gap: 3%;
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;

        h1 {
          position: absolute;
          font-weight: 400;
          font-size: 30px;
          bottom: 170px;
          left: 30px;
          right: 30px;
        }

        p {
          text-align: justify;
          position: absolute;
          left: 30px;
          right: 30px;
          top: 105px;
          font-size: 16px;
          font-weight: 200;
          line-height: 150%;
        }

        .project-1 {
          font-family: "Space Grotesk", sans-serif;
          position: relative;
          width: 300px;
          height: 60%;
          align-self: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          border-radius: 40px;
          border-color: black;
          border-style: solid;

          .view-button-1 {
            font-family: "Space Grotesk", sans-serif;
            position: absolute;
            align-self: flex-end;
            width: calc(100% - 44px);
            height: 38px;
            bottom: 22px;
            left: 22px;
            right: 22px;
            border-radius: 40px;
            font-size: 15px;
            text-transform: uppercase;
            border-style: none;
            background-color:rgb(255, 175, 15);
          }

          .view-button-1:hover {
            border-style: solid;
            border-width: 2px;
          }
        }
  
        .project-2 {
          font-family: "Space Grotesk", sans-serif;
          position: relative;
          width: 300px;
          height: 60%;
          align-self: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          border-radius: 40px;
          border-color: black;
          border-style: solid;

          .view-button-2 {
            font-family: "Space Grotesk", sans-serif;
            position: absolute;
            align-self: flex-end;
            width: calc(100% - 44px);
            height: 38px;
            bottom: 22px;
            left: 22px;
            right: 22px;
            border-radius: 40px;
            font-size: 15px;
            text-transform: uppercase;
            border-style: none;
            background-color: rgb(114, 116, 223);
          }

          .view-button-2:hover {
            border-style: solid;
            border-width: 2px;
          }
        }
  
        .project-3 {
          font-family: "Space Grotesk", sans-serif;
          position: relative;
          width: 300px;
          height: 60%;
          align-self: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          border-radius: 40px;
          border-color: black;
          border-style: solid;

          .view-button-3 {
            font-family: "Space Grotesk", sans-serif;
            position: absolute;
            align-self: flex-end;
            width: calc(100% - 44px);
            height: 38px;
            bottom: 22px;
            left: 22px;
            right: 22px;
            border-radius: 40px;
            font-size: 15px;
            text-transform: uppercase;
            border-style: none;
            background-color: rgb(147, 196, 173);
          }

          .view-button-3:hover {
            border-style: solid;
            border-width: 2px;
          }
        }
      }

      .container-bottom-2 {
        position: absolute;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 0 5%;
        width: 100%;
        bottom: 50px;
        scroll-behavior: smooth;

        .container-contact {
          align-self: flex-end;
          display: flex;
          justify-content: flex-end;
          margin: 0;
          padding: 0;
          scroll-behavior: smooth;

          .contact {
            align-self: flex-end;
            font-size: 55px;
            font-weight: 100;
            font-style: italic;
            margin: 0;
            padding: 0;
          }
  
          .material-symbols-outlined {
            align-self: flex-end;
            right: 0;
            font-size: 65px;
            font-weight: 300;
            margin: 0;
            padding: 0;
          }
        }
  
        .container-contact:hover {
          color: rgb(32, 32, 255);
          cursor: pointer;
        }
      }
    }

    .contact-page {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;

      .outside {
        display: flex;
        align-items: center;
        justify-content: center;

        .inside {
          width: auto;
          height: auto;
          padding-right: 15%;
          font-size: 18px;
          font-weight: 200;
          line-height: 200%;
          white-space: nowrap;
          text-align: right;
        }
  
        .photo {
          width: 230px;
          height: 230px;
        }
      }

      footer {
        position: absolute;
        align-self: flex-end;
        background-color: black;
        width: 100%;
        height: 50px;
        bottom: 0;
      }
    }
  }
}