@media (prefers-color-scheme: light) {
  h1, h2, h3, h4, h5, h6, p {
    color: var(--font-color-dark);
  }

  .highlight {
    background-color: var(--color-dark);
    color: var(--font-color-light);
  }
}

@media (prefers-color-scheme: dark) {
  h1, h2, h3, h4, h5, h6, p {
    color: var(--font-color-light);
  }

  .highlight {
    background-color: #f2f2f2;
    color: var(--color-dark);
  }
}

:root {
  font-family: var(--font-sans);
}

html {
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h1 {
  font-size: var(--font-size-1);
  margin-bottom: var(--spacing-medium);
  letter-spacing: -.0125rem;
}

h2 {
  font-size: var(--font-size-2);
  margin-bottom: var(--spacing-xxlarge);
  letter-spacing: -.025rem;
}

h3 {
  font-size: var(--font-size-3)!important;
  margin-bottom: var(--spacing-base);
}

h3 a {
  font-size: var(--font-size-3)!important;
  line-height: var(--line-height-heading)!important;
  margin-bottom: var(--spacing-base);
  margin-top: var(--spacing-xsmall);
}

h4 {
  font-size: var(--font-size-4)!important;
  margin-bottom: var(--spacing-base);
}

h4 a {
  font-size: var(--font-size-4) !important;
  line-height: var(--line-height-heading) !important;
  margin-bottom: var(--spacing-base);
}

.intro h1, .intro p {
  width: 66%;
}

p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  max-width: 640px !important;
}

p.caption {
  font-size: var(--font-size-small) !important;
  margin: var(--spacing-base) var(--spacing-base) 0 0;
}

.highlight {
  border-radius: var(--radius-base);
}

@media only screen and (max-width: 960px) {
  h1 {
      font-size: calc(var(--font-size-1) * .9);
      margin-bottom: calc(var(--spacing-large) * .9);

  }

  h2 {
      font-size: calc(var(--font-size-2) * .9);
      margin-bottom: calc(var(--spacing-large) * 1.25);
  }

  }

@media only screen and (max-width: 768px) {
  h1 {
      font-size: calc(var(--font-size-1) * .75);
      margin-bottom: calc(var(--spacing-large) * .75);
      width: 100%;
  }

}

@media only screen and (max-width: 640px) {
  .intro h1, .intro p {
    width: 100%;
    max-width: 100% !important;
  }
}

@media only screen and (max-width: 480px) {
  .intro {
    height: initial;
    position: relative;
  }

  h1 {
      /* font-size: calc(var(--font-size-1) * .6); */
      margin-bottom: calc(var(--spacing-large) * .6);
  }

}

@media only screen and (max-width: 420px) {

}