:root {
  --brand: hsl(212, 85%, 36%);
  --primary: hsl(212, 100%, 47%);

  --lightblue: hsl(212, 73%, 90%);
  --lightblue-light: color-mix(in srgb, var(--lightblue), white 80%);
  --background-color-hover: var(--lightblue);

  --darkblue: hsl(212, 20%, 30%);

  --lightestgray: hsl(0, 0%, 96%);
  --lightgray: hsl(0, 0%, 93%);
}

:where(:root),
:root,
:host,
.wa-theme-default,
.wa-light,
.wa-dark .wa-invert {
  --wa-font-family-body: 'Open Sans', Helvetica, Arial, sans-serif;
  --wa-font-weight-body: var(--wa-font-weight-normal);
  --wa-link-decoration-hover: none;
  --wa-link-decoration-default: none;
  --wa-font-weight-bold: 750;
  --wa-font-weight-heading: 600;

  @media (max-width: 768px) {
    --wa-font-size-scale: .75;
  }


  body {
    font-size: var(--wa-font-size-l);
  }

  p {
    font-weight: var(--wa-font-weight-semibold);
  }

  h1 {
    font-size: var(--wa-font-size-2xl);
  }
  h1, h2, h3 {
    letter-spacing: -1px;
  }
}