@media only screen and (max-width: 320px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 352px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 352px) and (max-width: 384px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 384px) and (max-width: 416px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 416px) and (max-width: 448px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 448px) and (max-width: 480px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 512px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 512px) and (max-width: 544px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 544px) and (max-width: 576px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 608px) {
  html {
    font-size: 9px;
  }
}

@media only screen and (min-width: 608px) and (max-width: 640px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
  html {
    font-size: 12px;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1367px) and (max-width: 1600px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1601px) {
  html {
    font-size: 18px;
  }
}