/* rem and em do NOT depend on html font size in media queries! 
Instead, 1 rem = 1 em = 16px */

/* ********************************** */
/* BELOW 1392px  */
/* ********************************** */
/* @media (max-width: 87em) {
  html {
    font-size: 59.37%;
  }
} */

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

  /* .hero-welcome-box {
    max-width: 37rem;
  } */

  .project-box--title {
    font-size: 1.6rem;
  }
  .title-modal-10 {
    margin-bottom: 0.8rem;
  }
  .title-modal-11 {
    margin-bottom: 1.3rem;
  }
  .title-modal-12 {
    margin-bottom: 1.3rem;
  }
  .title-modal-13 {
    margin-bottom: 1.3rem;
  }
}

/* ********************************** */
/* 1056/16 = 66 */
/* BELOW 1056px  */
/* ********************************** */
@media (max-width: 66em) {
  html {
    /* 8px/16px = 50% */
    font-size: 50%;
  }

  .hero-description {
    font-size: 1.9rem;
  }

  .title-modal-1 {
    margin-bottom: 3rem;
  }
  .title-modal-2 {
    margin-bottom: 2.5rem;
  }
  .title-modal-3 {
    margin-bottom: 2.5rem;
  }
  .title-modal-4 {
    margin-bottom: 2.5rem;
  }
  .title-modal-5 {
    margin-bottom: 2.5rem;
  }
  .title-modal-6 {
    margin-bottom: 2.2rem;
  }
  .title-modal-7 {
    margin-bottom: 2.3rem;
  }
  .title-modal-8 {
    margin-bottom: 2rem;
  }
  .title-modal-9 {
    margin-bottom: 1.5rem;
  }
  .title-modal-10 {
    margin-bottom: 1.5rem;
  }
  .title-modal-11 {
    margin-bottom: 2.3rem;
  }
  .title-modal-12 {
    margin-bottom: 2.3rem;
  }
  .title-modal-13 {
    margin-bottom: 0.5rem;
  }
  .title-modal-14 {
    margin-bottom: 0.5rem;
  }
  .title-modal-15 {
    margin-bottom: 2.3rem;
  }
  .title-modal-16 {
    margin-bottom: 1.7rem;
  }
  .title-modal-17 {
    margin-bottom: 2.3rem;
  }
  .title-modal-18 {
    margin-bottom: 2.3rem;
  }
  .title-modal-19 {
    margin-bottom: 2.3rem;
  }
  .title-modal-20 {
    margin-bottom: 2.3rem;
  }
}

/* ********************************** */
/* 944/16 = 59 */
/* BELOW 944px  */
/* ********************************** */
@media (max-width: 59em) {
  html {
    /* 7px/16px = 43.75% */
    font-size: 43.75%;
  }

  /* .container {
    padding: 0 0;
  } */

  .container {
    padding: 0 2.4rem;
  }

  .about-me-description {
    font-size: 2rem;
  }

  .subheading {
    font-size: 2rem;
  }

  .description {
    font-size: 2rem;
  }

  .heading-tertiary {
    font-size: 1.8rem;
  }

  /* .social-icon {
    height: 5rem;
    width: 5rem;
  } */

  .title-modal-1 {
    margin-bottom: 3rem;
  }
  .title-modal-2 {
    margin-bottom: 2.5rem;
  }
  .title-modal-3 {
    margin-bottom: 2.5rem;
  }
  .title-modal-4 {
    margin-bottom: 3rem;
  }
  .title-modal-5 {
    margin-bottom: 3rem;
  }
  .title-modal-6 {
    margin-bottom: 2.5rem;
  }
  .title-modal-7 {
    margin-bottom: 3.2rem;
  }
  .title-modal-8 {
    margin-bottom: 2.5rem;
  }
  .title-modal-9 {
    margin-bottom: 1.5rem;
  }
  .title-modal-10 {
    margin-bottom: 1.5rem;
  }
  .title-modal-11 {
    margin-bottom: 2.5rem;
  }
  .title-modal-12 {
    margin-bottom: 2.5rem;
  }
  .title-modal-13 {
    margin-bottom: 3rem;
  }
  .title-modal-14 {
    margin-bottom: 2.7rem;
  }
  .title-modal-15 {
    margin-bottom: 2.5rem;
  }
  /* .title-modal-16 {
    margin-bottom: 2rem;
  } */
  .title-modal-17 {
    margin-bottom: 2.5rem;
  }

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

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.75s ease-out;
    flex-direction: column;
    gap: 4.8rem;

    /* Hide navigation */
    /* Allow no transition at all */
    /* display: none; */

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

    /* 2) make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) hide it from screen readers */
    visibility: hidden;
  }

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

  .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: 4.8rem;
    align-items: center;
    justify-content: center;
  }

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

  .header {
    /* background-color: rgb(255, 255, 255, 0.95);
    opacity: 0.6; */
  }

  .header.sticky {
    background-color: #ebf4f9;
    height: 6rem;
    opacity: 1;
  }
}

/* ********************************** */
/* 815/16 = 51 */
/* BELOW 815px  */
/* ********************************** */
@media (max-width: 51em) {
  html {
    /* 6px/16px = 37.5% */
    font-size: 37.5%;
  }
  .project-box--title {
    margin-bottom: 2rem;
  }

  .about-me-description {
    font-size: 2.4rem;
  }

  .description {
    font-size: 2.4rem;
  }

  /* .social-icon {
    height: 5.5rem;
    width: 5.5rem;
  } */

  .title-modal-1 {
    margin-bottom: 5rem;
  }
  .title-modal-2 {
    margin-bottom: 4rem;
  }
  .title-modal-3 {
    margin-bottom: 4rem;
  }
  .title-modal-4 {
    margin-bottom: 5rem;
  }
  .title-modal-5 {
    margin-bottom: 5rem;
  }
  .title-modal-6 {
    margin-bottom: 3.8rem;
  }
  .title-modal-7 {
    margin-bottom: 5rem;
  }
  .title-modal-8 {
    margin-bottom: 3.8rem;
  }
  .title-modal-9 {
    margin-bottom: 2.5rem;
  }
  .title-modal-10 {
    margin-bottom: 2.5rem;
  }
  .title-modal-11 {
    margin-bottom: 4rem;
  }
  .title-modal-12 {
    margin-bottom: 4rem;
  }
  .title-modal-13 {
    margin-bottom: 2.5rem;
  }
  .title-modal-14 {
    margin-bottom: 2.3rem;
  }
  .title-modal-15 {
    margin-bottom: 4rem;
  }
  .title-modal-16 {
    margin-bottom: 2.5rem;
  }
  .title-modal-17 {
    margin-bottom: 4rem;
  }
  .title-modal-18 {
    margin-bottom: 4rem;
  }
  .title-modal-19 {
    margin-bottom: 4rem;
  }
  .title-modal-20 {
    margin-bottom: 4rem;
  }

  .project-btn {
    padding: 2rem 3rem !important;
  }
}

/* ********************************** */
/* 720/16 = 45 */
/* BELOW 720px  */
/* ********************************** */

@media (max-width: 45em) {
  html {
    /* 5.5px/16px = 34.37% */
    font-size: 34.37%;
  }

  .subheading {
    font-size: 2.4rem;
  }

  .heading-secondary {
    font-size: 3rem;
  }

  .heading-tertiary {
    font-size: 2rem;
  }

  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .title-modal-1 {
    margin-bottom: 11rem;
  }
  .title-modal-2 {
    margin-bottom: 7.5rem;
  }
  .title-modal-3 {
    margin-bottom: 10rem;
  }
  .title-modal-4 {
    margin-bottom: 11.5rem;
  }
  .title-modal-5 {
    margin-bottom: 11rem;
  }
  .title-modal-6 {
    margin-bottom: 9.5rem;
  }
  .title-modal-7 {
    margin-bottom: 11rem;
  }
  .title-modal-8 {
    margin-bottom: 7.5rem;
  }
  .title-modal-9 {
    margin-bottom: 6rem;
  }
  .title-modal-10 {
    margin-bottom: 6rem;
  }
  .title-modal-11 {
    margin-bottom: 7rem;
  }
  .title-modal-12 {
    margin-bottom: 7rem;
  }
  .title-modal-13 {
    margin-bottom: 7rem;
  }
  .title-modal-14 {
    margin-bottom: 7rem;
  }
  .title-modal-15 {
    margin-bottom: 7rem;
  }
  .title-modal-16 {
    margin-bottom: 5.5rem;
  }
  .title-modal-17 {
    margin-bottom: 9rem;
  }
  .title-modal-18 {
    margin-bottom: 7rem;
  }
  .title-modal-19 {
    margin-bottom: 7rem;
  }
  .title-modal-20 {
    margin-bottom: 9rem;
  }

  .btn {
    font-size: 2.2rem;
    padding: 2rem 4rem;
  }

  .section-contact {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    padding: 2rem 2rem !important;
  }

  /* .social-icon {
    height: 7rem;
    width: 7rem;
  } */
}

/* ********************************** */
/* 624/16 = 39 */
/* BELOW 620px  */
/* ********************************** */

@media (max-width: 39em) {
  html {
    /* 5px/16px */
    /* font-size: 31.25%; */
  }

  /* .container {
    padding: 0 2.4rem;
  } */

  /* .hero-logo {
    margin-bottom: 3rem;
  } */

  /* .hero-welcome-box {
    max-width: 35rem;
  } */

  /* .hero-break-line {
    width: 13rem;
  } */

  /* .hero-description {
    font-size: 1.9rem;
  } */

  /* .social-icon {
    height: 4rem;
    width: 4rem;
  } */

  .heading-tertiary {
    font-size: 2.4rem;
  }

  .grid,
  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .about-me-img {
    width: 30%;
    justify-self: center;
  }

  .grid--timeline-3-cols {
    grid-template-columns: 1fr;
  }

  .experience-timeline-bar {
    display: none;
  }

  .title-modal-1 {
    margin-bottom: 10rem;
  }
  .title-modal-2 {
    margin-bottom: 6.5rem;
  }
  .title-modal-3 {
    margin-bottom: 8rem;
  }
  .title-modal-4 {
    margin-bottom: 10rem;
  }
  .title-modal-5 {
    margin-bottom: 10rem;
  }
  .title-modal-6 {
    margin-bottom: 9rem;
  }
  .title-modal-7 {
    margin-bottom: 10rem;
  }
  .title-modal-8 {
    margin-bottom: 6.8rem;
  }
  .title-modal-9 {
    margin-bottom: 5rem;
  }
  .title-modal-10 {
    margin-bottom: 5rem;
  }
  .title-modal-11 {
    margin-bottom: 7rem;
  }
  .title-modal-12 {
    margin-bottom: 7rem;
  }
  .title-modal-13 {
    margin-bottom: 7rem;
  }
  .title-modal-14 {
    margin-bottom: 7rem;
  }
  .title-modal-20 {
    margin-bottom: 7rem;
  }

  .leaflet-content {
    font-size: 16px;
  }
}

/* ********************************** */
/* 544/16 = 34 */
/* BELOW 544px (Phones) */
/* ********************************** */

@media (max-width: 34em) {
  html {
    /* 6px/16px = 37.5% */
    font-size: 37.5%;
  }

  .hero {
    height: 95vh;
  }

  #particles-js {
    height: 95vh;
  }

  .about-me-description {
    font-size: 3rem;
  }

  /* .social-icon {
    height: 3.5rem;
    width: 2.5rem;
  } */

  .grid--4-cols {
    grid-template-columns: 1fr;
  }

  .btn {
    font-size: 2rem;
    padding: 1.5rem 3.5rem;
  }

  .title-modal-1 {
    margin-bottom: 10rem;
  }
  .title-modal-2 {
    margin-bottom: 6.5rem;
  }
  .title-modal-3 {
    margin-bottom: 7rem;
  }
  .title-modal-4 {
    margin-bottom: 10rem;
  }
  .title-modal-5 {
    margin-bottom: 10rem;
  }
  .title-modal-6 {
    margin-bottom: 6.5rem;
  }
  .title-modal-7 {
    margin-bottom: 10rem;
  }
  .title-modal-8 {
    margin-bottom: 6.8rem;
  }
  .title-modal-9 {
    margin-bottom: 5rem;
  }
  .title-modal-10 {
    margin-bottom: 5rem;
  }
  .title-modal-11 {
    margin-bottom: 7.5rem;
  }
  .title-modal-12 {
    margin-bottom: 7.5rem;
  }
  .title-modal-13 {
    margin-bottom: 7.5rem;
  }
  .title-modal-14 {
    margin-bottom: 7.5rem;
  }
  .title-modal-15 {
    margin-bottom: 7.5rem;
  }
  .title-modal-18 {
    margin-bottom: 7.5rem;
  }
  .title-modal-19 {
    margin-bottom: 7.5rem;
  }
  .title-modal-20 {
    margin-bottom: 7.5rem;
  }

  .main-nav-list {
    gap: 3.2rem;
  }

  .leaflet-content {
    font-size: 14px;
  }

  .modal {
    max-width: 37rem;
  }

  .project__modal {
    margin-top: 1.2rem;
  }

  .project__emoji--1 {
    top: 5rem;
    left: 0rem;
    font-size: 5.2rem;
  }

  .project__emoji--2,
  .project__emoji--3,
  .project__emoji--4 {
    display: none;
  }

  .section {
    padding: 6.4rem 0 !important;
  }

  .grid {
    row-gap: 4.8rem;
  }

  .slide-text {
    width: 90%;
  }

  .project-btn {
    padding: 1.5rem !important;
  }

  .slider__btn--left,
  .slider__btn--right {
    top: 90%;
  }

  .slider__btn {
    width: 4rem;
    font-size: 2.5rem;
    background: #3392c5;
    color: #fff;
  }

  .scrollTop {
    right: 4rem;
    bottom: 1rem;
  }
  .project__hero {
    height: 14rem;
  }
}

/* ********************************** */
/* 480/16 = 30 */
/* BELOW 480px  */
/* ********************************** */

@media (max-width: 30em) {
  /* .btn {
    padding: 1.2rem 2.4rem;
  } */

  .hero-break-line {
    width: 8rem;
  }

  .hero-vertical-line {
    height: 8rem;
  }

  .project-btn {
    padding: 1rem !important;
  }

  .projects-tab-container {
    padding: 2rem;
  }

  .leaflet-content {
    font-size: 1.2rem;
  }

  .hero-description {
    font-size: 1.69rem;
  }

  .center-text.margin-bottom-medium {
    margin-bottom: 1.6rem !important;
  }

  .center-text.margin-bottom-large,
  .hero-social-link.margin-bottom-medium {
    margin-bottom: 3.2rem !important;
  }

  .copyright {
    margin-top: 0;
  }

  .slide-text.description {
    font-size: 2rem;
  }
}

/* ********************************** */
/* 400/16 = 25*/
/* BELOW 400px  */
/* ********************************** */

@media (max-width: 25em) {
  /* .hero-logo {
    margin-bottom: 7rem;
  } */

  .center-text {
    font-size: 3rem;
    gap: 0.2rem;
  }

  .scrollTop {
    right: 3rem;
    bottom: 1rem;
  }

  .section-contact {
    padding: 12.8rem 0 0 0;
  }

  /* .description {
    font-size: 1.6rem;
  } */

  .hero-description {
    font-size: 1.5rem;
  }

  .hero-heading {
    font-size: 4.4rem;
  }

  .social-icon {
    width: 3.5rem;
  }

  .projects-tab-container {
    display: none;
  }

  .slide-text.description {
    font-size: 1.6rem;
  }

  .block-quote-text {
    padding: 3.2rem 3.2rem;
  }

  /* #map {
    display: none;
  } */
  .subheading {
    margin-bottom: 3.2rem;
  }

  .hero {
    height: 100vh;
  }

  #particles-js {
    height: 100vh;
  }

  .btn {
    font-size: 1.8rem;
    padding: 1.5rem 1.5rem;
  }

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

  .sidebar {
    flex-basis: 0;
  }
}

/* ********************************** */
/* 384/16 = 24*/
/* BELOW 384px  */
/* ********************************** */

@media (max-width: 24em) {
  /* .hero-logo {
    margin-bottom: 9rem;
  } */

  .hero-heading {
    font-size: 3.6rem;
  }

  .hero-break-line {
    width: 5rem;
  }

  .hero-vertical-line {
    height: 5rem;
  }

  .btn {
    font-size: 1.8rem;
    padding: 1.5rem 1.3rem;
  }

  .social-icon {
    width: 3rem;
  }
}
/* //////////////////////////////////////////////////////////////// */
.no-flexbox-gap .main-nav-list li:not(:last-child) {
  margin-right: 2.4rem;
}

.no-flexbox-gap .hero-social-link li:not(:last-child) {
  margin-right: 2.4rem;
}

.no-flexbox-gap .heading-box {
  margin-right: 1.6rem;
}

.no-flexbox-gap .center-text {
  margin-right: 1.6rem;
}