body {
  line-height: 1.5;
  font-size: 0.9em;
}

@media (min-width: 20em) and (max-width: 40em) {
  body {
    line-height: calc( 1.5 + 0.15 * ( ( 100vw - 20em) / 20 ));
  }
}

@media (min-width: 40em) {
  body {
    line-height: 1.65;
  }
}

@media (min-width: 20em) and (max-width: 60em) {
  body {
    font-size: calc( 0.9em + 0.0375 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  body {
    font-size: 0.9375em;
  }
}

h1 {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  h1 {
    font-size: calc( 1em + 1.48832 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  h1 {
    font-size: 2.48832em;
  }
}

h2 {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  h2 {
    font-size: calc( 1em + 1.0736 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  h2 {
    font-size: 2.0736em;
  }
}

h3 {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  h3 {
    font-size: calc( 1em + 0.728 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  h3 {
    font-size: 1.728em;
  }
}

h4 {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  h4 {
    font-size: calc( 1em + 0.44 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  h4 {
    font-size: 1.44em;
  }
}

h5 {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  h5 {
    font-size: calc( 1em + 0.2 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  h5 {
    font-size: 1.2em;
  }
}

h6 {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  h6 {
    font-size: calc( 1em + 0 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  h6 {
    font-size: 1em;
  }
}

.display {
  font-size: 1em;
}

@media (min-width: 20em) and (max-width: 60em) {
  .display {
    font-size: calc( 1em + 4.15978 * ( ( 100vw - 20em) / 40 ));
  }
}

@media (min-width: 60em) {
  .display {
    font-size: 5.15978em;
  }
}
