/* rem and em do not depend on html font-size in media queries
1rem = 1em =16px */


/* ***************** */
/* below 1344 px(smaller desktop)
1344/16=84 */
/* ***************** */
@media(max-width: 84em){
  .hero{
    max-width: 120rem                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
  }
}
/* ***************** */
/* below 1200 px(landscape tablets)
1344/16=75 */
/* ***************** */
@media(max-width:75em){
  .html{
    /* 9px/16px */
    font-size:  56.25%;
  }
  .grid{
    column-gap: 4.8rem;
    row-gap: 9.6rem;
  }
  .heading-secondary{
    font-size:3.0rem;
    margin-bottom: 8.0rem;
  }
  .heading-tertiary{
    font-size:2.0rem ;
  }
  .navbar{
    padding: 0 9.8rem;
  }
  .logo-name{
    font-size: 2.4rem;
  }
  .hero{
    gap: 8.0rem;
    padding: 0 9.6rem;
  } 
  .container{
    padding: 0 2.4rem;
  }
}
  /* ***************** */
/* below 944 px(tablets)
944/16=75 */
/* ***************** */
@media(max-width:59em){
  .html{
    /* 8px/16px= 0.5 50% */
    font-size: 50%;
  }
  .hero{
    grid-template-columns: 1fr;
    gap: 3.2rem;
}
.section-hero{
  padding: 6.4rem 0 6.4rem 0;
}
.hero-description{
  margin-bottom: 3.2rem;
}
.grid{
  column-gap: 3.2rem;
  row-gap: 4.8rem;
}

  .project-img{
    width: 80%;
  }
 .hero-text-box {
  text-align: left;
 }
 .hero-img-box{
  text-align: center;
 }
  .heading-secondary{
    font-size: 2.4rem;
    margin-bottom: 6.4rem;
  }
  .heading-tertiary{
    font-size:1.8rem;
  }
  .grid--2cols{
    grid-template-columns:1fr;
  }
  .card-img-box{
    text-align:center;
  }
  .text-box{
    text-align: left;
    padding: 0 9.6rem 0 9.6rem;
  }
  
  .project-description{
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 4.8rem;
}
.about-me-img{
  margin-bottom: 4.8rem;
}
.about-me{
  grid-template-columns: 1fr;
  margin-top: 6.4rem;
}
.introduction{
  text-align: left;
    padding: 0 9.6rem 0 9.6rem;
    margin-bottom: 6.4rem;
}
.footer-menu-list{
  margin-top: 6.4rem; 
}
}
  /* ***************** */
/* below 700 px(smaller tablet)
704/16=44 */
/* ***************** */

@media(max-width:44em){
  .html{
    /* 7px/16px= 0.43 43% */
    font-size: 43%;
  }
 .primary-button {
   width: 13rem; 
   height: 4rem; 
   font-size: 1.4rem; 
   font-weight: 500;
   display: flex; 
   justify-content: center;
   align-items: center;
   text-align: center;
   white-space: normal;
   background-color: #fafafa;
   color: #000;
   border: 0.2rem solid #000; 
   border-radius: 1rem;
   text-decoration: none;
   box-shadow: 0 0.3rem #fc9925; 
  }
  .heading-primary{
   font-size: 2.4rem;
  }
  .heading-secondary{
    font-size: 2.0rem;
  }
  .heading-tertiary{
    font-size:1.6em;
  }
}
 /* ***************** */
/* below 544 px(phones)
544/16=34 */
/* ***************** */

@media(max-width:34em){
  .grid{
    column-gap: 3.2em;
    row-gap: 2.4rem;
  }
  .navbar{
    padding: 0 1.6rem;
    height: 6.4rem;
  }
  .logo-name{
    font-size: 2.4rem;
  }

  .hero-img{
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0rem;
  }
  .hero-img-box{
    max-width:100%;
  }
  .section-hero{
    padding: 0 2.4rem 0 2.4rem;
  }
  .hero{
    padding: 0;
    margin-bottom:0rem;
    gap: 2.4rem;
  }
  .hero-description{
    font-size: 1.8rem;
    line-height: 3.0rem;
    margin-bottom: 2.4rem;
  }
  .heading-primary{
    font-size:  3.2rem; 
    line-height: 4.8rem;
    margin-bottom: 2.4rem;
    margin-top: 4.8rem;
  }
  .heading-secondary{
    font-size: 2.0rem;
    margin-top: 4.2rem;
    margin-bottom: 4.2rem;
  }
  .heading-tertiary{
    font-size:1.8rem;
    margin-bottom: 1.6rem;
  }
  
  .primary-button {
    width: 13rem; 
    height: 4rem; 
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5rem;
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000;
    border: 0.2rem solid #000; 
    border-radius: 1rem;
    box-shadow: 0 0.3rem #fc9925; 
  }
  
  .project-img{
    width: 100%;
  }
  .project-description{
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 1.6rem;
  }
  .text-box{
    text-align: left;
    padding: 0;
    margin-bottom: 3.2rem;
  }
  .about-me{
    margin-top: 4.8rem;
  }
  .introduction{
    text-align: left;
    padding: 0 1.6rem 0 1.6em;
    margin-bottom: 4.8rem;
  }
  .about-me-img{
    margin-bottom: 3.2rem;
  }
  .socials-img{
    width: 1.6rem;
   filter: invert(17%) sepia(21%) 
   saturate(5%) hue-rotate(5deg)
   brightness(97%) contrast(90%);
  }
}
/* ***************** */
/* below 544 px(phones)
544/16=34 */
/* Side navbar */
/* ***************** */
@media(max-width:34em){
.menu{
  font-weight: 300;
  font-size: 2.4rem;
  text-align: left;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  padding-left: 2.0rem;
  color: #fafafa;}

  .side-navbar{
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #333;
    overflow-y: auto;
    transition: 0.3s;
    display: none;
    backdrop-filter: blur(5px);
      z-index: 1;
    }
}

/* ***************** */
/* below 544 px(phones)
544/16=34 */
/* Projects */
/* ***************** */

@media(max-width:34em){

  .container-project{
    padding: 0;
    margin: 0 auto;
  }
  .project-title{
    padding: 3.2rem 2.4rem 3.2rem 2.4rem;
  }


  .description-text{
    padding: 0 2.4rem 0 2.4rem;
    margin-bottom: 3.2rem;
  }

  .img-container{
    row-gap: 3.2rem;
    padding: 0 2.4rem;
  }
  .side-by-side{
    display: flex;
    flex-direction: column;
    row-gap: 3.2rem;
  }
    

}



  /* -FONT SIZE (px) 
 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */
  
 /* SPACING SYSTEM (px) 
 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160
 */