/* rem and em do NOT depend of HTML fontsize in media queries */
/* Instead, 1rem = 1em = 16px */

/* ******************************* */
/*   BELOW 1344 PIXELS (SMALLER DESKTOPS)   */
/* ******************************* */
@media (max-width: 84em) {
  .title-name {
    font-size: 18rem;
  }
}

/* ******************************* */
/*   BELOW 1200 PIXELS   */
/* ******************************* */
@media (max-width: 75em) {
  .title-name {
    font-size: 16rem;
  }

  .projects {
    padding: 0 3.2rem;
  }

  .project-title {
    font-size: 2rem;
  }

  .project-description {
    font-size: 1.2rem;
  }

  .about-text-box {
    font-size: 1.2rem;
    /* gap: 1rem; */
  }

  .footer {
    padding: 3.2rem 3.2rem;
  }

  .footer-content p:last-child {
    font-size: 18rem;
  }
}

/* ******************************* */
/*   BELOW 1072 PIXELS*/
/* ******************************* */
@media (max-width: 67em) {
  .title-name {
    font-size: 14rem;
  }

  .project-title {
    font-size: 1.8rem;
  }

  .about-text-box {
    /* font-size: 1.2rem; */
    gap: 1rem;
  }

  .footer-content p:last-child {
    font-size: 16rem;
  }
}

/* ******************************* */
/*   BELOW 944 PIXELS  */
/* ******************************* */

@media (max-width: 59em) {
  .title-name {
    font-size: 12rem;
  }

  .projects {
    padding: 0 3.2rem;
  }

  .project-title {
    margin-top: 1.4rem;
    font-size: 1.6rem;
  }

  .project-description {
    font-size: 1rem;
  }

  .footer-content p:last-child {
    font-size: 14rem;
  }
}

/* ******************************* */
/*   BELOW 880 PIXELS  */
/* ******************************* */

@media (max-width: 55em) {
  .title-name {
    font-size: 10rem;
  }

  .project-title {
    font-size: 1.4rem;
  }

  .title-role {
    font-size: 4.4rem;
  }

  .footer-content p:last-child {
    font-size: 12rem;
  }
}

/* ******************************* */
/*   BELOW 848 PIXELS  */
/* ******************************* */

@media (max-width: 53em) {
  .project-title {
    margin-top: 0;
  }

  .tag {
    font-size: 0.8rem;
  }

  .card-btn {
    height: 4rem;
    width: 4rem;
  }
}

/* ******************************* */
/*   BELOW 752 PIXELS  */
/* ******************************* */

@media (max-width: 47em) {
  .about-content {
    grid-template-columns: 1fr;
    row-gap: 3.2rem;
  }

  .about-img {
    width: 50%;
    grid-row: 2;
  }

  .project-title {
    font-size: 1.2rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.2rem;
    padding: 1.2rem 1.6rem; /* Adjust padding to fit in smaller screens */
  }

  .card-btn {
    position: relative;
  }

  .footer-content p:last-child {
    font-size: 10rem;
  }
}

/* ******************************* */
/*   BELOW 672 PIXELS  */
/* ******************************* */

@media (max-width: 42em) {
  .footer-content p:last-child {
    font-size: 7.4rem;
  }

  .title-name {
    font-size: 7.4rem;
  }

  .projects {
    grid-template-columns: 1fr;
    width: 80%;
    row-gap: 3.2rem;
  }

  .project-title {
    font-size: 2.4rem;
  }

  .project-description {
    font-size: 1.4rem;
  }

  .card-btn {
    position: absolute;
  }

  #container3D {
    width: 25rem;
    height: 25rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    padding: 1.2rem 1.2rem; /* Further adjust padding for very small screens */
  }
}

/* ******************************* */
/*   BELOW 512 PIXELS  */
/* ******************************* */

@media (max-width: 32em) {
  .hero-text-box {
    justify-content: center;
    align-items: center;
  }

  .footer-content p:last-child {
    font-size: 6rem;
  }

  .footer-link:link,
  .footer-link:visited {
    font-size: 1.2rem;
  }

  .project-title {
    font-size: 2rem;
  }

  .project-description {
    font-size: 1rem;
  }

  .contact-box {
    grid-template-columns: 1fr;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.2rem;
    padding: 1rem; /* Further adjust padding for very small screens */
  }

  .proj-header-main h1 {
    font-size: 2.4rem;
  }

  .date {
    font-size: 1.2rem;
  }
}

/* ******************************* */
/*   BELOW 384 PIXELS  */
/* ******************************* */

@media (max-width: 24em) {
  .footer-links {
    flex-direction: column;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.2rem;
    padding: 0.8rem; /* Further adjust padding for very small screens */
  }
}