:root {
  --color-blue: #0053a6;
  --color-light-blue: #0078ef;
  --color-red: #cc3300;
  --color-green: #00a645;
  --color-pale-blue: #f3f9ff;

  --color-dark-gray: #222;
  --color-gray: #707070;
  --color-lightish-gray: #aaa;
  --color-light-gray: #e0e0e0;
  --color-very-light-gray: #f8f8f8;

  --color-text-default: var(--color-dark-gray);
  --color-text-default-dark: var(--color-lightish-gray);
  --color-opinion-bg: var(--color-pale-blue);

  --font-system:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-heading: Libre Franklin, sans-serif;
  --font-serif: Merriweather, Georgia, serif;

  --font-size-large: 34px;
  --font-size-medium: 18px;
  --font-size-small: 16px;
  --font-size-really-small: 12px;

  --base-unit: 8px;
}

body {
  font-family: var(--font-system);
  padding: 0 0 40px;
  background: #fff;
  color: var(--color-text-default);
  font-feature-settings: "kern", "liga", "pnum", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  @media (prefers-color-scheme: dark) {
    background: #000;
    color: #fff;
  }
}

main {
  margin: 0 auto;
  padding: var(--base-unit) 0;
}

main.narrow {
  max-width: 688px;
}

.logo {
  font-family: Georgia, serif;
  font-weight: bold;
  color: var(--color-blue);
  font-size: 52px;
  line-height: 1.1;
  text-align: center;
  margin: 0;
  padding: 10px 20px 0;

  a {
    text-decoration: none;
    color: inherit;
  }
}

.page-title {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-default);
  margin: 0;
  padding: 0 var(--base-unit);
  text-wrap: balance;

  @media (prefers-color-scheme: dark) {
    color: var(--color-text-default-dark);
  }
}

.section-header {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--color-text-default);
  padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) 0;
  margin: 0;

  @media (prefers-color-scheme: dark) {
    color: var(--color-text-default-dark);
  }
}

.tagline {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  color: var(--color-gray);
  margin: 0;
  padding: 5px 20px 10px;
  text-align: center;
}

.nav-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 5px 20px;
  background: var(--color-light-gray);

  @media (prefers-color-scheme: dark) {
    background: var(--color-dark-gray);
  }

  li {
    list-style: none;
    margin: 0;

    + li::before {
      display: inline-block;
      content: " | ";
      color: var(--color-gray);
      padding: 0 5px 0 0;
    }

    a {
      text-decoration: none;
      border-bottom: 1px solid var(--color-blue);

      @media (prefers-color-scheme: dark) {
        color: var(--color-light-blue);
      }
    }
  }
}

a {
  color: var(--color-blue);
  text-decoration: underline;

  @media (prefers-color-scheme: dark) {
    color: var(--color-light-blue);
  }
}