:root {
  --black: #000000;
  --white: #ffffff;
  --red: #e70e06;
  --red-rgb: 231, 14, 6;
  --grey: #a9a9a9;
  --dark-grey: #121214;
}
* {
  padding: 0;
  margin: 0;
  /* font-family: "Times New Roman", Times, serif; */
  font-family: sans-serif;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 10%;
}
/*  */
/*  */
/*  */
body {
  background-color: var(--black);
  background-image: repeating-linear-gradient(
      175deg,
      #000 0px,
      #000 31px,
      transparent 31px,
      transparent 35px
    ),
    repeating-linear-gradient(
      125deg,
      #000 0px,
      #000 31px,
      transparent 31px,
      transparent 35px
    ),
    repeating-linear-gradient(
      250deg,
      #000 0px,
      #000 31px,
      transparent 31px,
      transparent 35px
    ),
    repeating-linear-gradient(
      106deg,
      #000 0px,
      #000 31px,
      transparent 31px,
      transparent 35px
    ),
    linear-gradient(90deg, var(--red), var(--red));
  background-attachment: fixed;
  background-size: 100% 100vh;
  background-repeat: no-repeat;
}
@media (max-width: 500px) {
  body {
    background-image: none;
  }
}
.text-color {
  color: var(--red);
}
.text-bold {
  font-weight: bold;
}
/*  */
/*  */
/*  */
nav {
  position: fixed;
  width: 100%;
  z-index: 1818;
  display: flex;
  justify-content: center;

  .nav-container {
    width: clamp(700px, 55vw, 1292px);
    margin-top: 10px;

    padding: 5px 20px 5px 20px;
    border: 0.2px solid var(--grey);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.83);
    backdrop-filter: blur(2.3px);
    -webkit-backdrop-filter: blur(2.3px);

    display: flex;
    align-items: center;

    .nav-img {
      margin-right: auto;
      img {
        width: 30px;
        border-radius: 50%;
      }
    }

    .nav-burger {
      display: none;
      color: var(--white);
    }

    .nav-item {
      display: flex;
      list-style: none;
      gap: 12px;

      li {
        a {
          text-decoration: none;
          color: var(--white);
          letter-spacing: 1px;
          font-weight: bold;
          transition: color 0.3s;

          &:hover {
            color: var(--red);
          }
        }
      }
    }
  }
  @media (max-width: 1000px) {
    .nav-container {
      width: 70%;
    }
  }
  @media (max-width: 700px) {
    .nav-container {
      position: relative;

      .nav-burger {
        display: block;
      }

      .nav-item {
        position: fixed;
        z-index: 1818;
        flex-direction: column;
        width: 100%;
        gap: 0;
        top: 120%;
        left: 0;
        border: 0.2px solid var(--grey);
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.83);
        backdrop-filter: blur(2.3px);
        -webkit-backdrop-filter: blur(2.3px);
        transform: translateY(-125%);
        opacity: 0;
        transition: transform 0.5s, opacity 0.5s;

        li {
          display: flex;
          border-bottom: 1px solid var(--grey);

          &:last-child {
            border-bottom: 0;
          }

          a {
            padding: 25px 20px 25px 20px;
            width: 100%;
            text-align: center;
          }
        }
      }
      .nav-item-mobile {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
/*  */
/*  */
/*  */
.main {
  min-height: 88vh;
  display: flex;
  background-color: #000000;
  opacity: 1;
  background-image: linear-gradient(#181818 1px, transparent 1px),
    linear-gradient(to right, #181818 1px, #000000 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
  justify-content: center;

  .main-container {
    display: flex;
    /* margin-top: auto; */
    align-items: center;
    justify-content: center;

    .main-img {
      /* width: 420px; */
      width: clamp(437.75px, 28.5vw, 693px);
      transform: translateX(6%);
      margin-top: auto;
    }

    .main-content {
      display: flex;
      flex-direction: column;
      width: 34%;
      transform: translateX(-6%);
      color: var(--white);
      font-weight: bold;

      .main-content-text {
        p {
          /* font-size: 58px; */
          font-size: clamp(22px, 3.75vw, 60px);
        }
      }
      .main-content-name {
        /* margin-bottom: 0.6vw; */
        margin-bottom: clamp(8px, 0.6vw, 15px);
        p {
          /* font-size: 80px; */
          font-size: clamp(25px, 5.18vw, 80px);
        }
      }
      .main-content-brief {
        /* margin-bottom: 1vw; */
        margin-bottom: clamp(8px, 1vw, 25px);
        p {
          /* font-size: 40px; */
          font-size: clamp(20px, 2.68vw, 45px);
        }
      }
      .main-content-link {
        ul {
          display: flex;
          gap: clamp(10px, 1vw, 18px);

          li {
            list-style: none;

            a {
              text-decoration: none;
              color: var(--white);
              /* font-size: 30px; */
              font-size: clamp(20px, 2vw, 35px);
              transition: color 0.3s;

              &:hover {
                color: var(--red);
              }
            }
          }
        }
      }
    }
  }
  @media (max-width: 700px) {
    .main-container {
      flex-direction: column;
      margin: 5%;
      gap: 5vw;

      .main-img {
        width: 70%;
        margin-top: 0;
        transform: translateX(0);
        border-bottom: 1px solid var(--red);
      }
      .main-content {
        width: 62%;
        transform: translateX(0);
        /* text-align: center; */
        padding: 15px 8px;
        /* border: 1px solid var(--red);
        border-radius: 15px; */
        /* background: rgba(0, 0, 0, 0.83);
        backdrop-filter: blur(2.3px);
        -webkit-backdrop-filter: blur(2.3px); */
        line-height: clamp(22px, 6vw, 30px);

        /* .main-content-link {
          ul {
            justify-content: center;
          }
        } */
      }
    }
  }
  @media (701px <= width <= 2100px) and (1080px < height < 2000px) {
    .main-container {
      .main-img {
        margin-top: 0;
        border-bottom: 1px solid var(--red);
        width: clamp(275px, 30vw, 598.5px);
      }
    }
  }
}
/*  */
/*  */
/*  */
.about {
  display: flex;
  justify-content: center;

  .about-container {
    margin: clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: column;

    .about-title {
      margin-bottom: clamp(20px, 3vw, 40px);

      p {
        font-size: clamp(21px, 2vw, 33px);
        color: var(--white);
        font-weight: bold;
        text-align: center;
      }
    }

    .about-row {
      display: flex;
      gap: clamp(12px, 1.2vw, 18px);

      &:nth-child(odd) {
        .about-content-not-empty {
          p {
            text-align: right;
            text-align-last: right;
          }

          p:nth-of-type(2) {
            transform: translateX(5%);
          }
        }
      }

      &:nth-child(even) {
        .about-content-mid {
          order: 2;
        }
        .about-content-not-empty {
          order: 3;
        }
      }

      &:last-child {
        .about-content-not-empty {
          padding-bottom: 0;
        }
      }

      .about-content {
        width: clamp(255px, 25.5vw, 450px);
      }
      .about-content-not-empty {
        color: var(--white);
        display: flex;
        flex-direction: column;
        gap: clamp(7px, 0.5vw, 10px);
        padding-bottom: 20px;

        p:nth-of-type(2) {
          font-size: clamp(20px, 2vw, 31px);
          font-weight: bold;
          transform: translateX(-5%);
          opacity: 0;
          transition: transform 0.5s, opacity 0.5s;

          &.scroll-simple {
            transform: translateX(0);
            opacity: 1;
          }
        }
        p:nth-of-type(3) {
          font-size: clamp(15px, 1.3vw, 23px);
          text-align: justify;
          line-height: clamp(20px, 1.7vw, 30px);
          transform: translateY(15%);
          opacity: 0;
          transition: transform 1s, opacity 1s;

          &.scroll-simple {
            transform: translateY(0);
            opacity: 1;
          }
        }
        p:nth-of-type(1) {
          font-size: clamp(14px, 1.1vw, 19px);
          color: var(--grey);
        }
      }

      .about-content-mid {
        display: flex;
        flex-direction: column;
        align-items: center;

        .about-content-mid-circle {
          width: clamp(7.5px, 1vw, 13px);
          height: clamp(7.5px, 1vw, 13px);
          border-radius: 100%;
          background-color: var(--white);
          opacity: 0;
          transition: opacity 1s;
          transition-delay: 0.2s;

          &.scroll-circle {
            opacity: 1;
          }
        }
        .about-content-mid-line {
          height: 100%;
          width: clamp(1px, 0.2vw, 3px);
          position: relative;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: var(--white);
            transition: height 1s;
          }
          &.scroll-line::before {
            height: 100%;
          }
        }
      }

      &.about-current {
        .about-content-mid {
          .about-content-mid-circle {
            background-color: var(--red);
            animation: blink 1.25s ease-in-out infinite;
          }
        }
      }
    }
  }
  @media (max-width: 637px) {
    .about-container {
      margin: 8vw 1.5vw 1.5vw 1.5vw;

      .about-title {
        p {
          text-align: left;
        }
      }

      .about-row {
        &:nth-child(odd) {
          .about-content-not-empty {
            p {
              text-align: justify;
              text-align-last: left;
            }
            P:nth-of-type(2) {
              text-align: left;
              transform: translateX(-5%);

              &.scroll-simple {
                transform: translateX(0);
              }
            }
          }
        }

        .about-content-not-empty {
          order: 2;
          padding-bottom: clamp(20px, 6vw, 35px);

          p:nth-of-type(3) {
            line-height: 20px;
          }
        }

        .about-content-empty {
          display: none;
        }
      }
    }
  }
}
@keyframes blink {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0.9),
      0 0 0 0 rgba(var(--red-rgb), 0.9);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--red-rgb), 0),
      0 0 10px rgba(var(--red-rgb), 0.5);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(var(--red-rgb), 0),
      0 0 0 0 rgba(var(--red-rgb), 0);
  }
}
/*  */
/*  */
/*  */
.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  margin: 35px 0;

  .skill-container {
    width: 90%;

    &[data-animated="true"] {
      overflow: hidden;
      mask: linear-gradient(
        90deg,
        transparent,
        #fff 20%,
        #fff 80%,
        transparent
      );
    }
    &[data-animated="true"] .skill-list {
      flex-wrap: nowrap;
    }
    &[data-animated="true"] .scroller-inner {
      width: fit-content;
      animation: scroll var(--scroll-duration, 40s)
        var(--scroll-direction, forwards) linear infinite;
    }
    &[data-direction="right"] {
      --scroll-direction: reverse;
    }
  }

  .skill-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: clamp(10px, 2vw, 30px);
    flex-wrap: wrap;

    li {
      img {
        width: clamp(80px, 7.5vw, 170px);
        font-size: 200px;
      }
    }
  }
}
@media (max-width: 900px) {
  .skill {
    margin: 8vw 0;
  }
}
@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}
/*  */
/*  */
/*  */
.project {
  display: flex;
  justify-content: center;

  .project-container {
    margin: clamp(20px, 4vw, 60px) clamp(7px, 10vw, 200px);
    width: 70%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: clamp(9px, 1.5vw, 37.8px);

    .project-title {
      p {
        font-size: clamp(21px, 2vw, 33px);
        font-weight: bold;
        color: var(--white);
        text-transform: uppercase;
      }
    }

    .project-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(12px, 1.5vw, 37.8px);

      .project-p {
        height: clamp(355px, 26.5vw, 470px);
        width: clamp(280px, 20.5vw, 355px);
        background-color: var(--dark-grey);
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1vw, 10px);
        color: var(--white);
        text-decoration: none;
        opacity: 0;
        transform: translateY(15%);
        transition: transform 0.5s, opacity 0.5s;

        &.scroll-simple {
          opacity: 1;
          transform: translateY(0);
        }

        .p-res {
          iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
          }
          img {
            width: 100%;
          }
        }
        .p-content {
          padding: 0 clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px);
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .p-title {
          p {
            font-size: clamp(18px, 1.3vw, 23px);
            font-weight: bold;
          }
        }
        .p-type {
          p {
            font-size: clamp(15px, 1.1vw, 19px);
            color: var(--grey);
          }
        }
        .p-desc {
          p {
            font-size: clamp(15px, 1.1vw, 19px);
            line-height: clamp(20px, 1.3vw, 23px);
          }
        }
        .p-arrow {
          margin-top: auto;
          text-align: right;
          font-size: clamp(15px, 1.1vw, 19px);
          opacity: 0;
          transform: translateX(-30%);
          color: var(--red);
          transition: opacity 0.5s, transform 0.5s;
        }
        &:hover .p-arrow {
          opacity: 1;
          transform: translateX(-5%);
        }
      }
    }
  }
  @media (1100px < width < 1270px) {
    .project-container {
      margin: clamp(20px, 4vw, 60px) 1.5vw;
      width: 90%;
    }
  }
  @media (max-width: 1100px) {
    .project-container {
      margin: 1.5vw 1.5vw;
      width: 90%;

      .project-content {
        .project-p {
          .p-arrow {
            opacity: 1;
            transform: translateX(-5%);
            color: var(--white);
          }
        }
      }
    }
  }
  /* @media (max-width: 450px) {
    .project-container {
      .project-content {
        .project-p {
          width: 100%;
          height: clamp(350px, 100vw, 380px);
        }
      }
    }
  } */
}
/*  */
/*  */
/*  */
.blog {
  display: flex;
  justify-content: center;

  .blog-container {
    display: flex;
    justify-content: center;
    gap: 1.3vw;
    width: 65%;
    margin: 2vw 0;

    .blog-title {
      p {
        /* font-size: 2vw; */
        font-size: clamp(21px, 2vw, 33px);
        font-weight: bold;
        color: var(--white);
        margin-top: 2vw;
        text-transform: uppercase;
      }
    }
    .blog-content {
      width: 88%;

      ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 1vw, 20px);

        li {
          border: 1px solid var(--red);
          border-radius: 10px;
          position: relative;
          overflow: hidden;
          opacity: 0;
          transform: translateX(-5%);
          transition: transform 0.5s, opacity 0.5s;

          &.scroll-simple {
            opacity: 1;
            transform: translateX(0);
          }

          &::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 0%;
            top: 0;
            left: -10%;
            transform: skew(45deg);
            background-color: var(--red);
            z-index: -1;
            transition: all 1s;
          }

          &:hover::before {
            width: 100%;
          }

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

          a {
            display: flex;
            align-items: center;
            gap: clamp(10px, 1vw, 25px);
            color: var(--white);
            text-decoration: none;
            padding: clamp(10px, 1vw, 23px);
            font-size: clamp(15px, 1.2vw, 23px);
            transition: color 0.5s;

            i {
              width: 1.2rem;
              text-align: center;
            }

            .blog-link {
              margin-left: auto;
              color: var(--grey);
              transition: 0.15s;
            }
          }
        }
      }
    }
  }
  @media (max-width: 900px) {
    .blog-container {
      flex-direction: column;
      align-items: center;
      width: 90%;
      margin: 8vw 1.5vw;
      gap: clamp(8px, 2.5vw, 20px);

      .blog-title {
        width: 100%;
        p {
          text-align: left;
          margin-top: 0;
          margin-left: 4%;
        }
        @media (max-width: 515px) {
          p {
            text-align: center;
            margin-left: 0;
          }
        }
      }

      .blog-content {
        width: 100%;

        @media (max-width: 530px) {
          ul li a .blog-link {
            width: 4ch;
            text-align: right;
          }
        }
      }
    }
  }
}
/*  */
/*  */
/*  */
footer {
  background-color: var(--black);
  display: flex;
  justify-content: center;

  .footer-container {
    margin-top: 2%;
    padding: 18px 0 32px 0;
    width: clamp(700px, 55vw, 1292px);
    border-top: 1px solid var(--grey);
    display: flex;
    justify-content: space-between;

    p {
      color: var(--grey);
      text-align: center;
      font-size: clamp(14px, 1vw, 17px);
    }
  }
  @media (max-width: 1000px) {
    .footer-container {
      width: 70%;
      p {
        font-size: clamp(10px, 1.98vw, 14px);
      }
    }
  }
  @media (max-width: 900px) {
    .footer-container {
      flex-direction: column;
      p {
        line-height: 3vw;
      }
    }
  }
}
/*  */
/*  */
/*  */
.under-construction {
  height: 92vh;
  display: none;
  align-items: center;
  justify-content: center;

  h2 {
    color: var(--red);
  }
}
.mini-blog {
  color: var(--white);
  display: none;
  justify-content: center;

  #mini-blog-content {
    margin: 60px 0 20px;
    width: 50%;
    max-width: 900px;
    min-width: 320px;

    line-height: 1.75;
    font-size: 1rem;

    h1,
    h2,
    h3 {
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      font-weight: 600;
    }

    h1 {
      font-size: 2.2rem;
    }
    h2 {
      font-size: 1.7rem;
    }
    h3 {
      font-size: 1.3rem;
    }
    p {
      margin-bottom: 1.2rem;
    }

    ul,
    ol {
      margin: 1rem 0 1.5rem 2rem;
    }

    li {
      margin-bottom: 0.5rem;
    }

    a {
      text-decoration: none;
      color: var(--red);

      &:hover {
        text-decoration: underline;
        color: var(--white);
      }
    }

    img {
      max-width: 100%;
      border: 1px solid var(--red);
    }

    hr {
      margin: 3rem 0;
      border: none;
      border-top: 1px solid #333;
    }

    code {
      background: rgba(231, 14, 6, 0.15);
      padding: 0.2em 0.4em;
      border-radius: 4px;
      font-size: 0.95em;
      font-family: "Fira Code", "JetBrains Mono", monospace;
    }

    pre {
      background: var(--dark-grey);
      padding: 1.2rem 1.5rem;
      margin: 2rem 0;
      border-radius: 8px;
      overflow-x: auto;
    }

    pre code {
      background: none;
      padding: 0;
      font-size: 0.95rem;
      color: var(--grey);
      display: block;
      line-height: 1.6;
    }

    blockquote {
      margin: 2rem 0;
      padding: 1.2rem 1.5rem;
      border-left: 5px solid var(--red);
      background: rgba(231, 14, 6, 0.08);
      border-radius: 6px;
    }

    blockquote strong {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--red);
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    blockquote p {
      margin: 0;
      color: var(--grey);
    }
  }
  @media (max-width: 768px) {
    #mini-blog-content {
      width: 90%;
    }
  }
}
/*  */
/*  */
/*  */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.83);
  backdrop-filter: blur(2.3px);
  -webkit-backdrop-filter: blur(2.3px);
  transition: opacity 0.5s ease, visibility 0.5s ease;

  &.loader-hidden {
    opacity: 0;
    visibility: hidden;
  }

  .loader {
    width: 40px;
    aspect-ratio: 1;
    position: relative;

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      margin: -8px 0 0 -8px;
      width: 16px;
      aspect-ratio: 1;
      background: var(--red);
      animation: l1-1 2s infinite, l1-2 0.5s infinite;
    }
    &:after {
      background: var(--red);
      animation-delay: -1s, 0s;
    }
  }
}
@keyframes l1-1 {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 100%;
    left: 0;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 0;
    left: 100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes l1-2 {
  80%,
  100% {
    transform: rotate(0.5turn);
  }
}
/*  */
/*  */
/*  */