@layer global {
  :root {
    /* --font-inter and --font-ibm-plex-mono are set by Astro's font system */
    /* Plex Mono doesn't render ascii art correctly for some reason */
    --font-ascii-diagram:
      PT Mono, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  }
}
@layer global {
  :root {
    /* Typography and colors */
    font-family: var(--font-inter);
    background: var(--bg);
    color: var(--text);
    transition:
      color var(--durations-color-scheme),
      background var(--durations-color-scheme);

    /* Scrolling behavior */
    scroll-padding-block-start: var(--spacing-3);
    scroll-behavior: smooth;
    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }

    /* Text selection */
    ::selection {
      background: var(--bg-selection);
      color: var(--text-selection);
    }

    body {
      min-height: 100vh;
      margin-trim: block;

      @supports not (margin-trim: block) {
        /**
         * Prevent margin collapse between the body and its first/last children,
         * which would could result in the body being larger than 100vh.
         */
        padding-block: 0.05px;
      }
    }

    /* Links */
    a,
    a:visited {
      color: var(--text);
      transition: color var(--durations-color-scheme);
      -webkit-text-decoration: var(--link-text-decoration, underline);
              text-decoration: var(--link-text-decoration, underline);
    }

    a:hover {
      color: var(--accent-primary); /* TODO Revisit */
      transition: none; /* When a person hovers a link it should change color instantly */
    }

    /* Headings */
    h1 {
      margin-top: 3rem;
      font-size: 2.5rem;
      @media only screen and (min-width: 640px) {
        font-size: 4rem;
      }
      font-weight: 800;
      line-height: var(--line-height-tighter);
    }
    /* Section headings and Table of Contents heading */
    h2 {
      margin-top: 2rem;
      font-size: 1.5rem;
      @media only screen and (min-width: 640px) {
        font-size: 3rem;
      }
      font-weight: 700;
      line-height: var(--line-height-tight);
    }
    h3 {
      font-size: 1.25rem;
      @media only screen and (min-width: 640px) {
        font-size: 1.75rem;
      }
    }
    h4 {
      font-size: 1.25rem; /* don't go lower than 1.25rem or 20px, since body text is 20px */
      @media only screen and (min-width: 640px) {
        font-size: 1.5rem;
      }
    }
    h5,
    h6 {
      font-size: 1.25rem; /* don't go lower than 1.25rem or 20px, since body text is 20px */
      @media only screen and (min-width: 640px) {
        font-size: 1rem;
      }
    }
    h3,
    h4,
    h5,
    h6 {
      font-weight: 600;
      line-height: var(--line-height-tight);
    }

    :is(h2, h3, h4, h5, h6) {
      margin-block: var(--spacing-6) var(--spacing-4);
    }

    :is(h1, h2, h3, h4, h5, h6) {
      text-wrap: pretty; /* not supported everywhere yet, but there isn't a good fallback (balance isn't a good value for global css) */
    }

    /* Heading links */
    :is(h1, h2, h3, h4, h5, h6) > a {
      text-decoration: inherit;

      &:hover {
        text-decoration: underline;
      }
    }

    /* Paragraphs */
    p:not(:first-child) {
      margin-block-start: var(--spacing-5);
    }

    p:last-child {
      margin-block-end: var(--spacing-2);
    }

    &[data-theme="dark"] :is(img, svg)[data-invertible] {
      filter: invert(100%);
      transition: filter var(--durations-color-scheme);
    }

    em {
      font-style: italic;
    }

    /* set default styles for buttons or mobile safari will make them blue */
    button {
      background: var(--bg-card);
      color: var(--text-card);
      transition:
        color var(--durations-color-scheme),
        background var(--durations-color-scheme);
    }

    kbd {
      background-color: #eee;
      border-radius: 3px;
      border: 1px solid #b4b4b4;
      box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
      color: #333;
      display: inline-block;
      font-weight: 700;
      line-height: 1;
      padding: 2px 4px;
      white-space: nowrap;
      font-size: 1rem;
    }
  }
}
@layer reset {
  * {
    margin: 0;
    padding: 0;
    font: inherit;
  }

  *,
  :after,
  :before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--global-color-border, currentColor);
  }

  html {
    line-height: 1.5;
    --font-fallback:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";

    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    tab-size: 4;
    font-family: var(--global-font-body, var(--font-fallback));
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  body {
    height: 100%;
    line-height: inherit;
  }

  img {
    border-style: none;
  }

  audio,
  canvas,
  embed,
  iframe,
  img,
  object,
  svg,
  video {
    display: block;
    vertical-align: middle;
  }

  img,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    overflow-wrap: break-word;
  }

  ol,
  ul {
    list-style-type: none;
  }

  [type="button"],
  [type="reset"],
  [type="submit"],
  button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
  }

  button,
  select {
    text-transform: none;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: var(--global-color-placeholder, #9ca3af);
  }

  textarea {
    resize: vertical;
  }

  summary {
    display: list-item;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  dialog {
    padding: 0;
  }

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

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  pre,
  samp {
    font-size: 1em;
    --font-mono-fallback:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New";
    font-family: var(--global-font-mono, var(--font-fallback));
  }

  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  :-moz-focusring {
    outline: auto;
  }
}
@layer colors {
  :root {
    --color-seafoam: #00ffcc;
    --color-lavender: #e2d9fc;
    --color-light: white;
    --color-dark: #111111;
    --color-black: black;
    --color-light-gray: #fafafa;
    --color-fuchsiaish: #ff006a;
    --color-rhodamine: #e10098;
    --color-sunset-blvd: #fcded9;
    --color-dracula-background: #282a36;
    --color-electric-blue: #2de1fc;
    --color-off-white: #eaeaea;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;
  }
}
@layer colors {
  :root {
    --color-seafoam: #00ffcc;
    --color-lavender: #e2d9fc;
    --color-light: white;
    --color-dark: #111111;
    --color-black: black;
    --color-light-gray: #fafafa;
    --color-fuchsiaish: #ff006a;
    --color-rhodamine: #e10098;
    --color-sunset-blvd: #fcded9;
    --color-dracula-background: #282a36;
    --color-electric-blue: #2de1fc;
    --color-off-white: #eaeaea;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;
  }
}

@layer tokens {
  :root {
    --text: light-dark(var(--color-dark), var(--color-off-white));
    --text-card: light-dark(var(--color-dark), var(--color-off-white));
    --text-faded: light-dark(var(--color-gray-400), var(--color-gray-600));
    --text-tag: light-dark(var(--color-dark), var(--color-off-white));
    --text-footer: light-dark(var(--color-black), var(--color-off-white));
    --text-highlight: light-dark(var(--color-dark), var(--color-dark));
    --bg: light-dark(var(--color-light), var(--color-dark));
    --bg-card: light-dark(
      var(--color-gray-100),
      var(--color-dracula-background)
    );
    --bg-tag: light-dark(
      var(--color-gray-100),
      var(--color-dracula-background)
    );
    --bg-footer: light-dark(
      var(--color-sunset-blvd),
      var(--color-dracula-background)
    );
    --bg-highlight: light-dark(#fff8dc, #fceaa8);
    --border-table: solid
      light-dark(var(--color-gray-300), var(--color-gray-700)) 1px;
    --text-selection: light-dark(var(--color-black), var(--color-black));
    --bg-selection: light-dark(
      var(--color-electric-blue),
      var(--color-seafoam)
    );
    --accent-primary: light-dark(var(--color-fuchsiaish), var(--color-seafoam));
  }

  :root {
    --line-height-none: 0;
    --line-height-tighter: 1;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 2;
  }

  :root {
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
  }

  :root {
    --durations-fastest: 50ms;
    --durations-faster: 100ms;
    --durations-fast: 150ms;
    --durations-normal: 200ms;
    --durations-slow: 300ms;
    --durations-slower: 400ms;
    --durations-slowest: 500ms;

    /* no transitions initially */
    --durations-color-scheme: 0;

    &[data-theme] {
      /* enable transitions once we've added the appropriate class */
      --durations-color-scheme: var(--durations-fast);
    }
  }

  :root {
    --breakpoints-tiny: 320px;
    --breakpoints-sm: 640px;
    --breakpoints-md: 768px;
    --breakpoints-lg: 1024px;
    --breakpoints-xl: 1280px;
  }

  :root {
    --spacing-0: 0;
    --spacing-half: 0.125rem;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
  }
}
@layer code {
  code {
    /* expressive-code applies a font size for it's code blocks (see
    `expressiveCode` in astro config). For other code, e.g. inline in a heading,
    inherit instead. */
    font-size: inherit;
  }
}

@layer overrides {
  .expressive-code {
    margin: 1em 0;
  }

  /**
    * Let's us draw ASCII diagrams (e.g. for binary)
    */
  [data-language="ascii"] code {
    font-family: var(--font-ascii-diagram);
    line-height: var(--line-height-tighter);
  }
}
@layer components{button[data-astro-cid-g6q3pnbr]{position:fixed;right:10px;bottom:10px;cursor:pointer;border-radius:var(--border-radius-sm);padding:5px;background:var(--bg-card);@media (hover: hover){&:hover{background:var(--bg-selection);color:var(--text-selection);transition:background var(--durations-color-scheme)}}}html[data-theme=light] .dark[data-astro-cid-g6q3pnbr]{display:none}html[data-theme=dark] .light[data-astro-cid-g6q3pnbr]{display:none}}:root {
    --global-font-body: var(--font-inter);
    --global-font-mono:
      var(--font-ibm-plex-mono), SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New";
  }