@media (min-width: 320px) and (max-width: 350px) {
  html {
      font-size: 10px
  }
}

@media (min-width: 350px) and (max-width: 380px) {
  html {
      font-size: 11px
  }
}

@media (min-width: 380px) and (max-width: 410px) {
  html {
      font-size: 12px
  }
}

@media (min-width: 410px) and (max-width: 440px) {
  html {
      font-size: 13px
  }
}

@media (min-width: 440px) and (max-width: 470px) {
  html {
      font-size: 14px
  }
}

@media (min-width: 470px) and (max-width: 500px) {
  html {
      font-size: 15px
  }
}

@media (min-width: 500px) and (max-width: 530px) {
  html {
      font-size: 16px
  }
}

@media (min-width: 530px) and (max-width: 560px) {
  html {
      font-size: 17px
  }
}

@media (min-width: 560px) and (max-width: 590px) {
  html {
      font-size: 18px
  }
}

@media (min-width: 590px) and (max-width: 620px) {
  html {
      font-size: 19px
  }
}

@media (min-width: 620px) and (max-width: 650px) {
  html {
      font-size: 20px
  }
}

@media (min-width: 650px) and (max-width: 680px) {
  html {
      font-size: 21px
  }
}

@media (min-width: 680px) and (max-width: 710px) {
  html {
      font-size: 22px
  }
}

@media (min-width: 710px) and (max-width: 750px) {
  html {
      font-size: 23px
  }
}