body {
line-height: 1.5;
font-size: 0.833em;
}
@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.833em + 0.1045 * ( ( 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;
}
}