html {
  font-size: 8px;
}
body {
  font-size: 1.6rem;
}
@media (orientation: portrait) and (min-width: 297px) {
  html {
    font-size: 8.25px;
  }
}
@media (orientation: portrait) and (min-width: 306px) {
  html {
    font-size: 8.5px;
  }
}
@media (orientation: portrait) and (min-width: 315px) {
  html {
    font-size: 8.75px;
  }
}
@media (orientation: portrait) and (min-width: 324px) {
  html {
    font-size: 9px;
  }
}
@media (orientation: portrait) and (min-width: 333px) {
  html {
    font-size: 9.25px;
  }
}
@media (orientation: portrait) and (min-width: 342px) {
  html {
    font-size: 9.5px;
  }
}
@media (orientation: portrait) and (min-width: 351px) {
  html {
    font-size: 9.75px;
  }
}
@media (orientation: portrait) and (min-width: 360px) {
  html {
    font-size: 10px;
  }
}
@media (orientation: portrait) and (min-width: 378px) {
  html {
    font-size: 10.5px;
  }
}
@media (orientation: portrait) and (min-width: 396px) {
  html {
    font-size: 11px;
  }
}
@media (orientation: portrait) and (min-width: 414px) {
  html {
    font-size: 11.5px;
  }
}
@media (orientation: portrait) and (min-width: 432px) {
  html {
    font-size: 12px;
  }
}
@media (orientation: portrait) and (min-width: 468px) {
  html {
    font-size: 13px;
  }
  body {
    font-size: 1.2rem;
  }
}
@media (orientation: portrait) and (min-width: 504px) {
  html {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (min-width: 540px) {
  html {
    font-size: 15px;
  }
}
@media (orientation: portrait) and (min-width: 576px) {
  html {
    font-size: 16px;
  }
}
@media (orientation: portrait) and (min-width: 612px) {
  html {
    font-size: 17px;
  }
}
@media (orientation: portrait) and (min-width: 648px) {
  html {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (min-width: 684px) {
  html {
    font-size: 19px;
  }
}
@media (orientation: portrait) and (min-width: 720px) {
  html {
    font-size: 20px;
  }
}
@media (orientation: portrait) and (min-width: 756px) {
  html {
    font-size: 21px;
  }
}
@media (orientation: portrait) and (min-width: 768px) {
  html {
    font-size: 21.33333px;
  }
}
@media (orientation: portrait) and (min-width: 792px) {
  html {
    font-size: 22px;
  }
}
@media (orientation: landscape) and (min-height: 297px) {
  html {
    font-size: 8.25px;
  }
}
@media (orientation: landscape) and (min-height: 306px) {
  html {
    font-size: 8.5px;
  }
}
@media (orientation: landscape) and (min-height: 315px) {
  html {
    font-size: 8.75px;
  }
}
@media (orientation: landscape) and (min-height: 324px) {
  html {
    font-size: 9px;
  }
}
@media (orientation: landscape) and (min-height: 333px) {
  html {
    font-size: 9.25px;
  }
}
@media (orientation: landscape) and (min-height: 342px) {
  html {
    font-size: 9.5px;
  }
}
@media (orientation: landscape) and (min-height: 351px) {
  html {
    font-size: 9.75px;
  }
}
@media (orientation: landscape) and (min-height: 360px) {
  html {
    font-size: 10px;
  }
}
@media (orientation: landscape) and (min-height: 378px) {
  html {
    font-size: 10.5px;
  }
}
@media (orientation: landscape) and (min-height: 396px) {
  html {
    font-size: 11px;
  }
}
@media (orientation: landscape) and (min-height: 414px) {
  html {
    font-size: 11.5px;
  }
}
@media (orientation: landscape) and (min-height: 432px) {
  html {
    font-size: 12px;
  }
}
@media (orientation: landscape) and (min-height: 468px) {
  html {
    font-size: 13px;
  }
  body {
    font-size: 1.2rem;
  }
}
@media (orientation: landscape) and (min-height: 504px) {
  html {
    font-size: 14px;
  }
}
@media (orientation: landscape) and (min-height: 540px) {
  html {
    font-size: 15px;
  }
}
@media (orientation: landscape) and (min-height: 576px) {
  html {
    font-size: 16px;
  }
}
@media (orientation: landscape) and (min-height: 612px) {
  html {
    font-size: 17px;
  }
}
@media (orientation: landscape) and (min-height: 648px) {
  html {
    font-size: 18px;
  }
}
@media (orientation: landscape) and (min-height: 684px) {
  html {
    font-size: 19px;
  }
}
@media (orientation: landscape) and (min-height: 720px) {
  html {
    font-size: 20px;
  }
}
@media (orientation: landscape) and (min-height: 756px) {
  html {
    font-size: 21px;
  }
}
@media (orientation: landscape) and (min-height: 768px) {
  html {
    font-size: 21.33333px;
  }
}
@media (orientation: landscape) and (min-height: 792px) {
  html {
    font-size: 22px;
  }
}