@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: fallback;
    src:
      local("JetBrains Mono"),
      local("JetBrainsMono"),
      local("JetBrains-Mono"),
      url(https://nick.winans.io/JetBrainsMono.woff2) format("woff2");
    unicode-range: U+0000-00A0, U+00A9, U+00AE, U+00B0, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+21A9, U+2212,
      U+2215, U+2713, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Courier New Fallback";
    src: local("Courier New");
    size-adjust: 100%;
    ascent-override: 102%;
    descent-override: normal;
    line-gap-override: normal;
  }

  :root {
    --dark: oklch(30% 0.01 10);
    --light: oklch(98% 0.015 90);
    --link-dark: oklch(45% 0.15 250);
    --link-light: oklch(80% 0.1 250);
    --code-dark: oklch(23% 0.01 10);
    --code-light: oklch(100% 0.01 90);
  }

.logo::before {
  display: block;
  content: 'nick.winans.io';
  color: inherit;
  font-size: 2rem;
}

.logo a {
  display: none;
}

  body {
    font-family: "JetBrains Mono", "Courier New Fallback", monospace;
    line-height: 1.35;
    margin: 0;
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.wrap {
  border: none;
  box-shadow: none;
}

label {
  color: inherit;
}

input[type="email"], input[type="text"], input[type="password"] {
  color: inherit;
  font-family: inherit;
  background: rgba(150, 120, 120, 0.1);
  border: solid 1px rgba(150, 120, 120, 0.3);
  box-shadow: none;
}

.header {
  border-bottom: solid 1px rgba(150, 120, 120, 0.3);
}

footer.container, footer a {
  color: inherit;
  opacity: 0.7;
}

input[type="email"]::placeholder, input[type="text"]::placeholder {
  color: inherit;
  opacity: 0.7;
}

  main {
    max-width: 64ch;
    width: 100%;
  }

  html, .container, body {
    background-color: var(--light);
    color: var(--dark);
    scroll-behavior: smooth;
  }

  a {
    color: var(--link-dark);
  }

.button, button {
  background: var(--link-light);
  color: var(--dark);
  font-family: inherit;
}

  @media (prefers-color-scheme: dark) {
    html, .container, body {
      background-color: var(--dark);
      color: var(--light);
    }

    a {
      color: var(--link-light);
    }

    button, .button {
  background: var(--link-dark);
  color: var(--light);
}

    time {
      opacity: 0.8;
      font-size: 0.8rem;
    }
  }

  .heading-anchor {
    display: none;
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5em;
  }

  table {
    border-collapse: collapse;
    max-width: 100%;
  }

  th, td {
    border: 1px solid;
    padding: 1ch;
  }