:root {

  --color-dark-1: #131517;
  --color-dark-2: #202327;
  --color-dark-3: #32373D;
  --color-dark-4: #40464F;

  --color-light-1: #FFFFFF;
  --color-light-2: #e1e1e1;
  --color-light-3: #cbcbcb;
  --color-light-4: #a4a4a4;
  --color-light-5: #909090;



  --color-main-1: #D8FF85;
  --color-main-2: #d5ff7a;
  --color-main-3: #c2e970;
  --color-main-4: #b7d86e;
  --color-main-5: #afd167;
  --color-main-6: #94b54b;
  --color-main-7: #4c5e26;
  --color-main-8: #2f3917;


}

html {
  font-size: 16px;
    scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
}

::selection {
  background-color: var(--color-main-1);
  color: var(--color-dark-1);
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ================ FONTS ================ */


/* ======================================= */



body {
  overflow-x: hidden;
  position: relative;
  background-color: var(--color-dark-1);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  color: var(--color-light-2);
  gap: clamp(4rem, 20vw, 6rem);
  font-family: "Inter", sans-serif;
  
}


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

#layout-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  --columns: 12;
  background-image:
      repeating-linear-gradient(
          to right,
          transparent 0,
          transparent calc((100% / var(--columns)) - 1px),
          rgba(255,255,255,.15) calc((100% / var(--columns)) - 1px),
          rgba(255,255,255,.15) calc(100% / var(--columns))
      );
  mix-blend-mode: difference;
  opacity: 1;
}

/* ============================== HEADER ============================== */
header {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(2.5rem, 4vw, 5rem);

}

/* ------------------ HOME SECTION ------------------ */

.home__heading h1 {
  font-size: clamp(2.2rem, 2.5vw, 3rem);
  line-height: clamp(2.2rem*1.1, 2.5vw*1.1, 3rem*1.1);

}

.home__sub-heading {
  margin-top: clamp(0.5rem, 0.5vw, 1rem);
}

.home__sub-heading h1 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: clamp(1.4rem*1.1, 2vw*1.1, 1.7rem*1.1);
  color: var(--color-main-3);
}

.home__detail p {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: clamp(1rem*1.6, 1.2vw*1.6, 1.2rem*1.6);
  color: var(--color-light-4);
}

.home__detail {
  margin-top: clamp(0.75rem, 1vw, 1.25rem);
}

/* -------------------------------------------------- */


/* ------------------ NAV ------------------ */

.nav__sections-links {
  display: none;
}

.nav__sections-links ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  scroll-target-group: auto;
}


.nav__sections-links .link {
  display: flex;
  width: fit-content;
  align-items: center;
  padding: clamp(0.5rem, 0.5vw, 1rem) 0;
  gap: 0.8rem;

}



.nav__sections-links .line {
  display: flex;
  width: 2rem;
  height: 1px;
  background-color: var(--color-light-5);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.nav__sections-links .link:hover .line {
  width: 4rem;
  background-color: var(--color-light-1);

}

.nav__sections-links .link:target-current .line {
  width: 4rem;
  background-color: var(--color-main-3);

}

.nav__sections-links .text {
  font-size: clamp(1rem, 0.8vw, 1.5rem);
  line-height: clamp(1rem*1.1, 1vw*1.1, 1.7rem*1.1);
  text-transform: uppercase;
  color: var(--color-light-5);
  transition: color 0.2s ease;
}

.nav__sections-links .link:hover .text {
  color: var(--color-light-1);
}

.nav__sections-links .link:target-current .text {
  color: var(--color-main-3);
  
}



/* ----------------------------------------- */


/* ------------------ SOCIALS ------------------ */

#header__social-links ul {
  position: relative;

  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}

#header__social-links li {
  height: 48px;
  aspect-ratio: 1 / 1;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

}

.social-link__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* --------------------------------------------- */




/* ==================================================================== */


/* ============================== MAIN ============================== */

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(4rem, 6vw, 6rem);

}

#about-section,
#experiences-section,
#projects-section {
  display: flex;
  width: 100%;
}

/* ------------------- ABOUT SECTION ---------------------- */
#about-section {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 3vw, 8rem);

}

.about__header h1 {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: clamp(1.4rem*1.1, 2vw*1.1, 1.7rem*1.1);
  text-transform: uppercase;
}

.about__paragraphs {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 2.2vw, 2.5rem);
  color: var(--color-light-4);
  
}

.about__paragraph p {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: clamp(1rem*1.3, 1.2vw*1.3, 1.2rem*1.3);
}

.about__paragraph .text--highlight {
  color: var(--color-light-1);
}

.about__footer {
  display: flex;
  justify-content: end;
}

.about__btn--download-resume {
  display: flex;
  width: fit-content;
  align-items: center;
  color: var(--color-light-1);
  transition: color 0.3s ease;
  text-transform: uppercase;
  gap: clamp(0.5rem, 0.5vw, 1rem);

}

.about__btn--download-resume:hover {
  color: var(--color-main-1);

}

.about__btn--download-resume p {
  font-weight: bolder;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: clamp(1rem*1.3, 1.2vw*1.3, 1.2rem*1.3);
}

.about__btn--download-resume .icon {
  height: 2rem;
  aspect-ratio: 1 / 1;
}

/* -------------------------------------------------------- */

/* ------------------- EXPERIENCES SECTION ---------------- */


#experiences-section {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 3vw, 8rem);
}

.experiences__header {
  text-transform: uppercase;
}

.experiences__blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 4vw, 6rem);

}

.experience__block {
  display: flex;
  flex-direction: column;
  color: var(--color-light-4);
  border-radius: 0.4rem;
  transition: background-color 0.1s ease-in-out;
  gap: 1rem;
}

.experience__meta {
  flex: 1.5;
}

.experience__period p {
  font-size: clamp(1rem, 0.5vw, 1.5rem);
  text-transform: uppercase;
}

.experience__main {
  display: flex;
  flex-direction: column;
  flex: 5;
}

.experience__heading {
  color: var(--color-light-1);
}

.experience__sub-heading {
  color: var(--color-main-3);
  transition: color 0.4s ease;
  margin-top: 0.3rem;
}

.experience__block:hover .experience__sub-heading {
  color: var(--color-main-3);
}

.experience__detail {
  margin-top: 2rem;
}

.experience__stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2rem;
  gap: 1rem;
}

.experience__stack .text-wrapper {
  background-color: var(--color-main-8);
  border-radius: 1rem;
  padding: 0.2rem 1rem;
}

.experience__stack .text {
  color: var(--color-main-3);
}

.experiences__footer {
  display: flex;
  justify-content: end;
}

.experiences__btn--all-experiences-link {
  display: flex;
  width: fit-content;
  text-transform: uppercase;
  align-items: center;
  color: var(--color-light-1);
  transition: color 0.3s ease;
  gap: clamp(0.5rem, 0.5vw, 1rem);

}

.experiences__btn--all-experiences-link:hover {
  color: var(--color-main-1);

}

.experiences__btn--all-experiences-link p {
  font-weight: bolder;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: clamp(1rem*1.3, 1.2vw*1.3, 1.2rem*1.3);
}

.experiences__btn--all-experiences-link .icon {
  height: 2rem;
  aspect-ratio: 1 / 1;
}

/* -------------------------------------------------------- */

/* ------------------- PROJECTS SECTION ------------------- */
#projects-section {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 3vw, 8rem);

}

.projects__header {
  text-transform: uppercase;
}

.projects__blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 4vw, 6rem);
}

.project__block {
  display: flex;
  flex-direction: column-reverse;
  color: var(--color-light-4);
  border-radius: 0.4rem;
  transition: background-color 0.1s ease-in-out;
  gap: 1rem;
}

.project__preview {
  /* border: 2px solid red; */
  display: flex;
  width: 100%;
  overflow: hidden;
  flex: 2;

}

.project__preview .img-wrapper {
  /* border: 2px solid red; */
  background-color: var(--color-dark-3);

  min-height: clamp(6rem, 10vw, 10rem);
  border-radius: 0.2rem;


  /* height: fit-content; */
  width: clamp(20rem, 20vw, 24rem);
  overflow: hidden;

}

.project__img {

  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.project__main {
  display: flex;
  flex-direction: column;
  flex: 5;
  
}

.project__title {
  color: var(--color-main-3);
  transition: color 0.4s ease;
}

.project__description {
  margin-top: 1rem;
}

.project__stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2rem;

  gap: 1rem;
}

.project__stack .text-wrapper {
  background-color: var(--color-main-8);
  border-radius: 1rem;
  padding: 0.2rem 1rem;
}

.project__stack .text {
  color: var(--color-main-3);
}



.projects__footer {
  display: flex;
  justify-content: end;
}

.projects__btn--all-projects-link {
  display: flex;
  width: fit-content;
  text-transform: uppercase;
  align-items: center;
  color: var(--color-light-1);
  transition: color 0.3s ease;
  gap: clamp(0.5rem, 0.5vw, 1rem);
}

.projects__btn--all-projects-link:hover {
  color: var(--color-main-1);

}


.projects__btn--all-projects-link p {
  font-weight: bolder;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: clamp(1rem*1.3, 1.2vw*1.3, 1.2rem*1.3);
}

.projects__btn--all-projects-link .icon {
  height: 2rem;
  aspect-ratio: 1 / 1;
}

/* -------------------------------------------------------- */




/* ================================================================== */


@media (min-width: 769px) and (max-width: 1024px) {
  #layout-grid {
    --columns: 8;
  }
}

@media (max-width: 768px) {
  #layout-grid {
    --columns: 4;
  }


}

@media (min-width: 768px)  {
  /* body {
    flex-direction: row;
  } */

  .experience__block {
    flex-direction: row;
  }

  .project__block {
    flex-direction: row;
  }

  .project__preview .img-wrapper {
    width: 100%;
  }
}

@media (min-width: 1025px)  {
  body {
    flex-direction: row;
    padding: 0 clamp(2rem, 14vw, 20rem);
    gap: unset;

  }

  header {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: clamp(1.5rem, 8vw, 6rem) 0;

  }

  .about__header {
    display: none;
  }

  .experiences__header {
    display: none;
  }

  .projects__header {
    display: none;
  }

  #home-section {
    padding-right: clamp(3rem, 6vw, 6rem);

  }

  .nav__sections-links {
    display: flex;
    flex: 1;
  }

  main {
    padding: clamp(1.5rem, 8vw, 6rem) 0;

  }

  #about-section {
    padding: 0 1rem;
  }

  .experiences__blocks {
    gap: 2rem;
  }

  .experience__block {
    padding: 1rem;
  }

  .experience__block:hover {
    background-color: var(--color-dark-2);
  }

  .experience__sub-heading {
    color: var(--color-light-2);
  }

  .experience__block:hover .experience__sub-heading {
    color: var(--color-main-3);
  }

  .projects__blocks {
    /* border: 2px solid red; */
    gap: 2rem;
  }

  .project__block {
    padding: 1rem;
  }

  .project__block:hover {
    background-color: var(--color-dark-2);
  }

  .project__title {
    color: var(--color-light-2);
  }

  .project__block:hover .project__title {
    color: var(--color-main-3);
  }
}