@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html,
.main-body {
  height: 100%;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: whitesmoke;
  background-color: #0e0e0e;
  background-size: cover;

  nav {
    z-index: 100;
    position: absolute;
    backdrop-filter: blur(5px);

    ul {
      list-style-type: none;
      margin: auto;
      padding: 0;
      font-size: 15px;
      overflow: hidden;

      li {
        float: left;

        &:first-child {
          animation: TransitionDown 0.5s ease-out;
          a {
            padding-left: 30px;
          }
        }
        &:nth-child(2) {
          animation: TransitionDown 0.6s ease-out;
        }
        &:nth-child(3) {
          animation: TransitionDown 0.7s ease-out;
        }
        &:last-child {
          animation: TransitionDown 0.8s ease-out;
        }

        a {
          display: block;
          color: white;
          text-align: center;
          padding: 16px 20px;
          text-decoration: none;
          transition: all 0.1s ease;

          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }

  .hero {
    height: 100vh;
    align-content: center;
    padding-left: 100px;
    line-height: 40px;

    h2 {
      animation: TransitionIn 0.7s ease-out;
      font-size: 30px;
      font-weight: 500;
    }
    h1 {
      animation: TransitionIn 0.9s ease-out;
      font-size: 50px;
      font-weight: 900;
    }

    p {
      animation: TransitionIn 0.5s ease-out;
      letter-spacing: 7px;
    }

    button {
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      color: whitesmoke;
      border: 1px solid whitesmoke;
      border-radius: 12px;
      margin-top: 1em;
      padding: 4px 30px;
      background: none;
      cursor: pointer;
      backdrop-filter: blur(3px);
      transition: all 0.1s ease;
      animation: TransitionIn 0.4s ease-out;

      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .info {
    padding-left: 100px;
    width: 550px;
    height: 100vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 10;

    .about {
      animation: TransitionDown 1.2s ease-out;
      padding-top: 100px;
      height: 33.3%;

      h2 {
        line-height: 40px;
        text-underline-offset: 3px;
        text-decoration-line: underline;
        text-decoration-color: rgb(16, 103, 202);
      }
    }

    .prgrph {
      padding: 50px 0px;
      height: 33.3%;

      p {
        &:first-child {
          animation: TransitionIn 0.7s ease-out;
        }
        &:last-child {
          animation: TransitionIn 0.5s ease-out;
        }
      }
    }

    .address {
      animation: TransitionUp 0.5s ease-out;
      padding-top: 160px;
      height: 33.3%;
    }
  }

  .myProfile {
    height: 100vh;
    float: right;
    padding-right: 40px;
    padding-left: 50%;
    animation: TransitionRightIn 1.5s ease-in-out;
  }

  .resume {
    display: flex;
    padding: 50px 46px;
    gap: 100px;

    section {
      &:first-child {
        width: 35%;
      }
      &:nth-child(2) {
        width: 30%;
      }
      &:last-child {
        width: 25%;
      }
      h3 {
        animation: FadeIn 1.5s ease;
        font-size: 17px;
        line-height: 40px;
        text-underline-offset: 3px;
        text-decoration-line: underline;
        text-decoration-color: rgb(16, 103, 202);
      }

      .resume-heading {
        padding: 20px 0px;

        p {
          line-height: 30px;
        }

        h4 {
          font-size: 16px;
          line-height: 25px;
        }

        span {
          display: inline;
        }

        .xp {
          margin-bottom: 10px;
          display: block;
        }

        div {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .block {
            display: block;
          }

          label {
            width: 125.11px;
          }

          input[type="range"] {
            flex: 1;
            appearance: none;
            height: 2px;
            background: white;
            outline: none;
            border-radius: 2px;
            position: relative;
            pointer-events: none;
          }

          input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            height: 7px;
            width: 7px;
            padding: 2px;
            border-radius: 50%;
            background: white;
            border: none;
            box-shadow: 0 0 0 3px #0e0e0e, 0 0 0 4.5px white;
            border-radius: 50%;
          }

          .language-row input[type="range"]::-moz-range-thumb {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
          }
        }
      }

      .icon {
        padding-right: 40%;
        padding-left: 10%;
        display: grid;
        gap: 5px;
        grid-template-areas:
          "one two"
          "three four";

        .flow {
          display: block;

          &:first-child {
            grid-area: one;
          }

          &:nth-child(2) {
            grid-area: two;
          }

          &:nth-child(3) {
            grid-area: three;
          }

          &:nth-child(4) {
            grid-area: four;
          }
        }
      }
    }
  }

  .works {
    line-height: 40px;
    text-underline-offset: 3px;
    text-decoration-line: underline;
    text-decoration-color: rgb(16, 103, 202);
    margin-top: 50px;
    margin-bottom: 50px;
    animation: FadeIn 1s ease-in-out;
  }

  .port {
    margin-bottom: 50px;
    display: grid;
    gap: 40px;
    justify-content: center;
    grid-template-areas:
      "one two three"
      "four five last";

    section {
      &:first-child {
        grid-area: one;
      }
      &:nth-child(2) {
        grid-area: two;
      }
      &:nth-child(3) {
        grid-area: three;
      }
      &:nth-child(4) {
        grid-area: four;
      }
      &:nth-child(5) {
        grid-area: five;
      }
      &:last-child {
        grid-area: last;
        section {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: x-large;
          color: rgb(200, 200, 200);
          text-align: center;
          width: 300px;
          height: 158.11px;
          border: 2px solid rgb(200, 200, 200);
          border-radius: 5px;
          &:hover {
            cursor: not-allowed;
          }
        }
        center {
          cursor: not-allowed;
        }
      }

      img {
        animation: FadeIn 1.5s ease-in-out;
        border-radius: 5px;
        transition: all 0.1s ease;
        &:hover {
          transform: scale(1.1);
          cursor: pointer;
        }
      }

      center {
        margin-top: 10px;
        a {
          color: whitesmoke;
          text-decoration: none;
          animation: Return 0.5s ease;
          &:hover {
            color: rgb(16, 103, 202);
            animation: Change 0.5s ease;
          }
        }
      }
    }
  }

  footer {
    position: absolute;
    bottom: 0;
    padding: 0px 0px 20px 80px;

    svg {
      cursor: pointer;

      &:first-child {
        transition: all 0.1s ease;
        animation: TransitionUp 0.6s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
      &:nth-child(2) {
        transition: all 0.1s ease;
        animation: TransitionUp 0.4s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
      &:nth-child(3) {
        transition: all 0.1s ease;
        animation: TransitionUp 0.5s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
      &:nth-child(4) {
        transition: all 0.1s ease;
        animation: TransitionUp 0.9s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
      &:nth-child(5) {
        transition: all 0.1s ease;
        animation: TransitionUp 0.3s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
      &:nth-child(6) {
        transition: all 0.1s ease;
        animation: TransitionUp 0.8s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
      &:last-child {
        transition: all 0.1s ease;
        animation: TransitionUp 0.7s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
}

@keyframes TransitionIn {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes TransitionRightIn {
  from {
    opacity: 0;
    transform: translateX(250px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes TransitionUp {
  from {
    opacity: 0;
    transform: translateY(200px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes TransitionDown {
  from {
    opacity: 0;
    transform: translateY(-200px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes FadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes Change {
  from {
    color: whitesmoke;
  }

  to {
    color: rgb(16, 103, 202);
  }
}

@keyframes Return {
  from {
    color: rgb(16, 103, 202);
  }

  to {
    color: whitesmoke;
  }
}

@media screen and (max-width: 768px) {
  html,
  .main-body {
    nav {
      border-bottom-right-radius: 5px;
      background-color: rgba(0, 0, 0, 0.658);
    }

    .hero {
      padding-left: 50px;
      line-height: 40px;

      h2 {
        font-size: 30px;
      }
      h1 {
        font-size: 50px;
      }
    }

    .info {
      width: inherit;
      padding: 0px 50px;
      text-align: center;
    }

    .myProfile {
      padding-left: 20%;
    }

    .resume {
      display: grid;
      gap: 50px;
      grid-template-areas:
        "one two"
        "three three";

      section {
        &:first-child {
          width: 100%;
          grid-area: one;
        }
        &:nth-child(2) {
          width: 100%;
          grid-area: two;
        }
        &:last-child {
          width: 100%;
          text-align: center;
          grid-area: three;

          .icon {
            padding-right: 35%;
            padding-left: 35%;
          }
        }
      }
    }

    .port {
      display: grid;
      gap: 40px;
      justify-content: center;
      grid-template-areas:
        "one two"
        "three four"
        "five last";
    }

    footer {
      position: absolute;
      bottom: 0;
      padding: 0px 0px 20px 50px;
    }
  }

  .body {
    overflow-y: visible;
  }
}

@media screen and (max-width: 430px) {
  html,
  .main-body {
    nav {
      width: 100%;
      border-radius: 0px;
      background-color: rgba(0, 0, 0, 0.658);

      ul {
        display: flex;
        justify-content: space-around;

        li {
          float: none;

          &:first-child {
            animation: TransitionDown 0.5s ease-out;
            a {
              padding-left: 0px;
            }
          }

          a {
            padding: 16px 0px;
          }
        }
      }
    }

    .hero {
      padding-left: 20px;
      line-height: 30px;

      h2 {
        font-size: 20px;
      }
      h1 {
        font-size: 40px;
      }
    }

    .info {
      padding-left: 25px;
      padding-right: 25px;
      width: inherit;

      .about {
        padding-top: 90px;
      }

      .prgrph {
        padding: 50px 0px;
      }

      .address {
        padding-top: 120px;
      }
    }

    .myProfile {
      height: 100%;
      padding-right: 10px;
      padding-left: 10%;
    }

    .resume {
      display: block;

      section {
        &:first-child {
          h3 {
            text-align: center;
          }
          p {
            text-align: center;
          }
        }

        &:nth-child(2) {
          text-align: center;
        }

        &:last-child {
          .icon {
            padding-right: 20%;
            padding-left: 20%;
          }
        }
      }
    }

    .port {
      display: grid;
      gap: 40px;
      justify-content: center;
      grid-template-areas:
        "one"
        "two"
        "three"
        "four"
        "five"
        "last";
    }

    footer {
      width: 100%;
      padding-left: 0px;
      display: flex;
      justify-content: center;
    }
  }

  .body2 {
    overflow-y: visible;
  }
}