:root {
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --spacing: 0.222222rem;

  --text-xs: 0.75rem;
  --text-sm: 0.8rem;
  --text-base: 0.85rem;
  --text-lg: 1rem;
  --text-xl: 1.1rem;
  --text-2xl: 1.2rem;
  --text-3xl: 1.3rem;
  --text-4xl: 1.4rem;
  --text-5xl: 1.5rem;
  --text-6xl: 1.6rem;
  --text-7xl: 1.7rem;
}

@media (min-width: 1024px) {
  :root {
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);

    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);

    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);

    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);

    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);

    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);

    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);

    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);

    --text-5xl: 3rem;
    --text-5xl--line-height: 1;

    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
  }
}

@font-face {
  font-family: "Zodiak-Variable";
  src:
    url("./fonts/Zodiak-Variable.woff2") format("woff2"),
    url("./fonts/Zodiak-Variable.woff") format("woff"),
    url("./fonts/Zodiak-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Zodiak-VariableItalic";
  src:
    url("./fonts/Zodiak-VariableItalic.woff2") format("woff2"),
    url("./fonts/Zodiak-VariableItalic.woff") format("woff"),
    url("./fonts/Zodiak-VariableItalic.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

* {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-family: "Zodiak-Variable", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  line-height: var(--lh-base);
}

@media screen and (width > 1024px) {
  html {
    font-size: 14px;
  }
}

.italic {
  font-family: "Zodiak-VariableItalic", serif;
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.text-md {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
}

.text-7xl {
  font-size: var(--text-7xl);
  line-height: var(--text-7xl--line-height);
}

@keyframes reveal {
  0% {
    stroke-dashoffset: 999;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes addFill {
  0% {
    fill: transparent;
  }

  100% {
    fill: var(--primary);
  }
}