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

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 1800px) {
  .burger {
    width: 26px;
  }

  .logo {
    font-size: 1.8rem;
  }

  .untree_co-section .heading {
    font-size: 28px;
  }

  #home-section {
    padding: 4rem 0;
  }

  .col-md-7 {
    margin-top: -12px;
  }

  .untree_co-section .subheading {
    font-size: 12px;
  }

  #portfolio-section {
    padding: 3rem 0;
  }

  #posts {
    max-width: 72vw;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-container-main,
  .footer-container {
    margin-top: 6rem;
    font-size: 12px;
  }

  .menu-bar-container {
    width: 26rem;
  }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
}

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

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
}

/**************************/
/* BELOW 540px (Phones) */
/**************************/

@media (max-width: 540px) {
  #home-section {
    padding: 7rem 0;
  }

  .site-mobile-menu {
    width: 45vw;
  }

  .footer-container-main {
    margin-right: 2vw;
  }
}

/* 
- Font sizes (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
*/