/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-cyrillic-ext-wght-normal.B2xhLi22.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-cyrillic-wght-normal.CMZtQduZ.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-greek-ext-wght-normal.CGAr0uHJ.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-greek-wght-normal.CaVNZxsx.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-vietnamese-wght-normal.CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-latin-ext-wght-normal.DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-latin-wght-normal.Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/ibm-plex-mono-latin-400-normal.Dm_PoFIZ.woff2) format('woff2'), url(/_astro/ibm-plex-mono-latin-400-normal.O6-GRVqx.woff) format('woff');
}@layer global {
  :root {
    --font-inter: "Inter Variable", "sans-serif";
    --font-ibm-plex-mono: "IBM Plex Mono", "ui-monospace";
    /* 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.5rem;
      }
    }
    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.2rem;
      }
    }
    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";
  }