@import url("https://use.typekit.net/zxo6has.css");
@layer reset {
  a,
  a:active,
  a:visited {
    color: currentColor;
  }
  button {
    cursor: pointer;
  }
  abbr {
    text-decoration: underline dotted;
  }
  b,
  strong {
    font-weight: bold;
  }
}
@layer layout {
  .container {
    max-width: calc(1080px + 2em);
    margin: auto;
    padding: 0 1em;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  summary {
    margin: 0 0 var(--spacing);
  }
}
@layer brand {
  :root {
    --font-primary: ff-tisa-sans-web-pro, sans-serif;
    --font-code: ubuntu-mono, monospace;
    --font-script: gloria-hallelujah, serif;
    --color-black: var(--color-gray-900);
    --color-white: var(--color-gray-0);
    --color-highlight: var(--color-green-base);
    --color-gray-0: #f7f7f9;
    --color-gray-0-op-1: rgba(247, 247, 249, 0.2);
    --color-gray-0-op-5: rgba(247, 247, 249, 0.5);
    --color-gray-0-op-8: rgba(247, 247, 249, 0.8);
    --color-gray-50: #e1e1e6;
    --color-gray-50-op-1: rgba(225, 225, 230, 0.2);
    --color-gray-50-op-5: rgba(225, 225, 230, 0.5);
    --color-gray-50-op-8: rgba(225, 225, 230, 0.8);
    --color-gray-200: #e6e6e6;
    --color-gray-200-op-1: rgba(230, 230, 230, 0.2);
    --color-gray-200-op-5: rgba(230, 230, 230, 0.5);
    --color-gray-200-op-8: rgba(230, 230, 230, 0.8);
    --color-gray-300: #b9babb;
    --color-gray-300-op-1: rgba(185, 186, 187, 0.2);
    --color-gray-300-op-5: rgba(185, 186, 187, 0.5);
    --color-gray-300-op-8: rgba(185, 186, 187, 0.8);
    --color-gray-850: #0b1525;
    --color-gray-850-op-1: rgba(11, 21, 37, 0.2);
    --color-gray-850-op-5: rgba(11, 21, 37, 0.5);
    --color-gray-850-op-8: rgba(11, 21, 37, 0.8);
    --color-gray-900: #04080f;
    --color-gray-900-op-1: rgba(4, 8, 15, 0.2);
    --color-gray-900-op-5: rgba(4, 8, 15, 0.5);
    --color-gray-900-op-8: rgba(4, 8, 15, 0.8);
    --color-green-base: #224102;
    --color-green-base-op-1: rgba(34, 65, 2, 0.2);
    --color-green-base-op-5: rgba(34, 65, 2, 0.5);
    --color-green-base-op-8: rgba(34, 65, 2, 0.8);
    --color-orange-200: #ffd49b;
    --color-orange-200-op-1: rgba(255, 212, 155, 0.2);
    --color-orange-200-op-5: rgba(255, 212, 155, 0.5);
    --color-orange-200-op-8: rgba(255, 212, 155, 0.8);
    --color-orange-400: #ffb14a;
    --color-orange-400-op-1: rgba(255, 177, 74, 0.2);
    --color-orange-400-op-5: rgba(255, 177, 74, 0.5);
    --color-orange-400-op-8: rgba(255, 177, 74, 0.8);
    --color-orange-500: #ffa630;
    --color-orange-500-op-1: rgba(255, 166, 48, 0.2);
    --color-orange-500-op-5: rgba(255, 166, 48, 0.5);
    --color-orange-500-op-8: rgba(255, 166, 48, 0.8);
    --color-orange-600: #d68822;
    --color-orange-600-op-1: rgba(214, 136, 34, 0.2);
    --color-orange-600-op-5: rgba(214, 136, 34, 0.5);
    --color-orange-600-op-8: rgba(214, 136, 34, 0.8);
    --color-orange-base: var(--color-orange-500);
    --color-orange-base-op-1: rgba(var(--color-orange-500), 0.2);
    --color-orange-base-op-5: rgba(var(--color-orange-500), 0.5);
    --color-orange-base-op-8: rgba(var(--color-orange-500), 0.8);
    --color-blue-base: #222e50;
    --color-blue-base-op-1: rgba(34, 46, 80, 0.2);
    --color-blue-base-op-5: rgba(34, 46, 80, 0.5);
    --color-blue-base-op-8: rgba(34, 46, 80, 0.8);
    --color-purple-base: #9f2042;
    --color-purple-base-op-1: rgba(159, 32, 66, 0.2);
    --color-purple-base-op-5: rgba(159, 32, 66, 0.5);
    --color-purple-base-op-8: rgba(159, 32, 66, 0.8);
    --color-foreground: var(--color-black);
    --color-background: var(--color-white);
    --color-input: var(--color-gray-50);
    --color-heading: var(--color-green-base);
    --color-subheading: var(--color-blue-base);
    --color-link: var(--color-blue-base);
    --color-link-hover: var(--color-green-base);
    --color-link-decoration: var(--color-orange-base);
    --color-code: var(--color-purple-base);
  }
  @media only screen and (prefers-color-scheme: dark) {
    :root {
      --color-foreground: var(--color-white);
      --color-background: var(--color-black);
      --color-input: var(--color-gray-850);
      --color-heading: var(--color-orange-base);
      --color-subheading: var(--color-white);
      --color-highlight: var(--color-orange-base);
      --color-link: var(--color-white);
      --color-link-hover: var(--color-white);
      --color-code: var(--color-orange-base);
    }
  }
  html,
  body {
    font-family: var(--font-primary);
    scrollbar-color: var(--color-green-base) var(--color-white);
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-weight: 200;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
  }
  a,
  a:active,
  a:visited {
    text-decoration-color: var(--color-link-decoration);
    transition: 500ms;
  }
  a:hover,
  a:active:hover,
  a:visited:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 0.125em;
  }
  svg {
    fill: var(--color-foreground);
  }
  h1 {
    color: var(--color-heading);
  }
  h2,
  h3 {
    color: var(--color-subheading);
  }
  input,
  textarea {
    color: inherit;
    border: none;
    outline: none;
    background: var(--color-input);
    font-size: 1em;
    padding: 0.5em;
  }
  pre,
  code {
    font-family: var(--font-code);
  }
  p code {
    color: var(--color-code);
  }
  mark {
    background: transparent;
    color: var(--color-highlight);
  }
  input,
  button {
    font-family: var(--font-primary);
  }
  textarea {
    font-family: var(--font-code);
  }
}