html {
  font-size: 0.9rem; // 1rem is default. Set to 0.9 just to scale the whole design down a little
  // default font
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
  // web font
  // font-family: var(--font-family);
}

body {
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.6;
}

p {
  margin: 0 0 1.5em;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin-top: 0;
  font-weight: bold;
  color: inherit;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

h1,
.text--4xl {
  line-height: 1.3;
  font-size: calc(1rem * var(--text-min-4xl));

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-4xl)) + (var(--text-max-4xl) - var(--text-min-4xl)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-4xl));
  }
}

h2,
.text--3xl {
  line-height: 1.3;
  font-size: calc(1rem * var(--text-min-3xl));

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-3xl)) + (var(--text-max-3xl) - var(--text-min-3xl)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-3xl));
  }
}

h3,
.text--2xl {
  line-height: 1.3;
  font-size: calc(1rem * var(--text-min-2xl));

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-2xl)) + (var(--text-max-2xl) - var(--text-min-2xl)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-2xl));
  }
}

h4,
.text--xl {
  line-height: 1.2;
  font-size: calc(1rem * var(--text-min-xl));

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-xl)) + (var(--text-max-xl) - var(--text-min-xl)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-xl));
  }
}

h5,
.text--l {
  font-size: calc(1rem * var(--text-min-l));

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-l)) + (var(--text-max-l) - var(--text-min-l)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-l));
  }
}

h6,
.text--base {
  font-size: 1rem;
  margin-top: 2.5em;
}

small,
.text--small {
  font-size: calc(1rem * var(--text-min-small));

  @media screen and (min-width: 40rem) {
    font-size: calc(calc(1rem * var(--text-min-small)) + (var(--text-max-small) - var(--text-min-small)) * (100vw - 40rem) / (80 - 40));
  }

  @media screen and (min-width: 80rem) {
    font-size: calc(1rem * var(--text-max-small));
  }
}