@media (max-width: 85em) {
  html {
    font-size: 68.75;
  }

  .nav-sec {
    font-size: 1rem;
    color: black;
  }
  .line {
    max-width: 11.2rem;
    margin-left: 2.4rem;
  }
}

/* 1344px below for smaller computers */
@media (max-width: 84em) {
  html {
    font-size: 62.5%;
  }
  .nav-sec {
    font-size: 1rem;
    color: black;
  }
  .line {
    max-width: 11.2rem;
    margin-left: 2.4rem;
  }
}
@media (max-width: 81em) {
  html {
    font-size: 62.5%;
  }
  .nav-sec {
    font-size: 1rem;
    color: black;
    padding: 1.6rem;
  }
  .line {
    max-width: 10.2rem;
    margin-left: 1.8rem;
  }
}

/* 1200 */
@media (max-width: 75em) {
  /* 9px/16px=56.25 */
  html {
    font-size: 56.25%;
  }
  .nav-sec {
    font-size: 1rem;
    color: black;
    padding: 1.6rem;
  }
  .line {
    max-width: 1.8rem;
    margin-left: 1.6rem;
  }
}
/* 1100 */
@media (max-width: 75em) {
  /* 8PX/16PX==0.5% */
  html {
    font-size: 50%;
  }
}

/* 1020 */
@media (max-width: 63em) {
  /* 8PX/16PX==0.5% */
  html {
    font-size: 43.75%;
  }
}

@media (max-width: 56em) {
  /* 8PX/16PX==0.5% */
  html {
    font-size: 37.5%;
  }
}
/* 8px / 16px = 0.5 =50% */

/* 
FONT SIZE SYSTEM (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 */

/* for below 750px */
@media (max-width: 46em) {
  /* 7px/16==43.75 */
  html {
    font-size: 43.75%;
  }
}
/* for below  650px*/
@media (max-width: 40em) {
  /* 6px */
  html {
    font-size: 31.25%;
  }
}
@media (max-width: 25em) {
  /* 6px */
  html {
    font-size: 156.25%;
    background-color: antiquewhite;
  }
}