:root {
  --custom-top-padding: 4.8rem;
}

/*  rem and em do NOT depend on HTML font-size in media queries

Instead, 1rem = 1em = 16px*/

/********************************/
/* BELOW 1200x (Smaller desktops) */
/********************************/
@media (max-width: 75em) {
  html {
    /* 9px / 16px = 56.25% */
    font-size: 56.25%;
  }

  .about-me--grid {
    grid-template-columns: repeat(9, auto);
    grid-template-rows: repeat(9, auto);
  }

  /* Changing Grid from About Me */
  .heading-about-me {
    grid-column: 8 / 10;
    grid-row: 5 / -1;
  }

  .profile-picture-about-me {
    grid-column: 8 / 10;
    grid-row: 1 / 5;
  }

  .experience-card-cover,
  .experience-card {
    grid-column: 1 / 8;
    grid-row: 1 / 5;
  }

  .education-card-cover,
  .education-card {
    grid-column: 1 / 4;
    grid-row: 5 / -1;
  }

  .licenses-certifications-card-cover,
  .licenses-certifications-card {
    grid-column: 4 / 8;
    grid-row: 5 / -1;
  }
}

/********************************/
/* BELOW 1024px (Smaller desktops) */
/********************************/
@media (max-width: 64em) {
  :root {
    --fs-primary-heading: 11.2rem;
  }

  .header {
    padding: 0 4.8rem;
  }

  /* Changing Grid from About Me */
  .heading-about-me {
    grid-column: 1 / -1;
    grid-row: 1 / 3;

    padding: var(--custom-top-padding) 0;
  }

  .profile-picture-about-me {
    grid-column: 8 / -1;
    grid-row: 3 / 5;
  }

  .experience-card-cover,
  .experience-card {
    grid-column: 1 / 8;
    grid-row: 3 / 5;
  }

  .education-card-cover,
  .education-card {
    grid-column: 1 / 5;
    grid-row: 5 / -1;
  }

  .licenses-certifications-card-cover,
  .licenses-certifications-card {
    grid-column: 5 / -1;
    grid-row: 5 / -1;
  }

  .text-box-wrapper {
    padding: 6.4rem 2.4rem;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 5000;
  }

  .main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    transform: translateY(10%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in;

    /* 1) Hide it visually */
    opacity: 0;

    /*  Make it unacessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen reader */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    background-color: var(--background-color);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 6.4rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3.2rem;
  }
}

/********************************/
/* BELOW 832px (Tablets) */
/********************************/
@media (max-width: 52em) {
  html {
    /* 9px / 16px = 56.25% */
    font-size: 50%;
  }

  /* HI THERE SECTION */
  .section-hi-there .container {
    min-height: auto;
  }

  .hi-there-heading--pos {
    grid-column: 1 / -1;
    grid-row: 1;

    padding: var(--custom-top-padding) 0;
  }

  .hi-there-text-box {
    grid-column: 1 / -1;
    grid-row: 2;

    min-height: 60vh;
  }

  /* PROJECTS SECTION */
  .projects--grid {
    grid-template-columns: repeat(10, auto);
    grid-template-rows: repeat(10, auto);
  }

  .projects--grid .section-title {
    grid-row: 1 / 3;
    grid-column: 1 / -1;
  }

  .project-card--1 {
    grid-row: 3 / 7;
    grid-column: 1 / 7;
  }

  .project-card--2 {
    grid-row: 3 / 7;
    grid-column: 7 / -1;
  }

  .project-card--3 {
    grid-row: 7 / -1;
    grid-column: 1 / 5;
  }

  .project-card--4 {
    grid-row: 7 / -1;
    grid-column: 5 / 8;
  }

  .project-card--5 {
    grid-row: 7 / -1;
    grid-column: 8 / -1;
  }

  .section-title {
    gap: 1.8rem;
    padding: var(--custom-top-padding) 0;
  }

  .projects-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
  }

  .project-item::before {
    content: "\00a0 ";
  }

  .project-item::after {
    content: " | ";
  }

  .project-item:first-child::before {
    content: "";
  }
  .project-item:last-child:after {
    content: "";
  }
}

/********************************/
/* BELOW 704x (Smaller Tablets) */
/********************************/
@media (max-width: 44em) {
  /* HERO SECTION */
  .welcome-text {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .to-my-text {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .portfolio-text {
    grid-column: 1 / -1;
    grid-row: 3;

    justify-self: center;
  }

  .hero-description {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  /* Changing Grid from About Me */
  .heading-about-me {
    grid-column: 1 / 6;
    grid-row: 1 / 3;

    padding: var(--custom-top-padding) 4.8rem;
  }

  .profile-picture-about-me {
    grid-column: 6 / -1;
    grid-row: 1 / 3;

    max-height: 50vh;
  }

  .experience-card-cover,
  .experience-card {
    grid-column: 1 / -1;
    grid-row: 3 / 5;
  }

  .education-card-cover,
  .education-card {
    grid-column: 1 / -1;
    grid-row: 5 / 7;
  }

  .licenses-certifications-card-cover,
  .licenses-certifications-card {
    grid-column: 1 / -1;
    grid-row: 7 / 10;
  }

  /* PROJECTS SECTION */
  .projects--grid {
    grid-template-columns: auto;
    grid-template-rows: repeat(6, auto);
  }

  .projects--grid .section-title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .project-card--1 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .project-card--2 {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .project-card--3 {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .project-card--4 {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .project-card--5 {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  /* GET IN TOUCH SECTION */
  .get-in-touch--grid {
    grid-template-columns: repeat(1, AUTO);
    grid-template-rows: repeat(2, auto);
  }

  .get-in-touch--grid .section-title {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: var(--custom-top-padding) 0;
  }

  .contact-me-box {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 6.4rem 0;
  }

  /* removing the card cover */
  .open-card {
    position: relative;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

/********************************/
/* BELOW 544x (Phones) */
/********************************/
@media (max-width: 34em) {
  :root {
    --fs-primary-heading: 9rem;
    --fs-primary-subheading: 4.8rem;
    --fs-subheading-primary: 2.8rem;
  }

  .lang-dark-mode-container {
    gap: 2.4rem;
    justify-content: center;
    padding-right: 0;
  }

  .section-hero {
    padding-left: 0;
    padding-right: 0;
  }

  .header {
    padding: 0 2.4rem;
  }

  .heading-about-me {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }

  .profile-picture-about-me {
    grid-column: 1 / -1;
    grid-row: 2 / 3;

    max-height: 70vh;
  }
}

/********************************/
/* BELOW 368px (Phones) */
/********************************/
@media (max-width: 23em) {
  .welcome-text {
    font-size: 85%;
  }

  .to-my-text {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .portfolio-text {
    font-size: 85%;
  }
}