/*
db    db  .d8b.  d8888b. d888888b  .d8b.  d8888b. db      d88888b .d8888. 
88    88 d8' `8b 88  `8D   `88'   d8' `8b 88  `8D 88      88'     88'  YP 
Y8    8P 88ooo88 88oobY'    88    88ooo88 88oooY' 88      88ooooo `8bo.   
`8b  d8' 88~~~88 88`8b      88    88~~~88 88~~~b. 88      88~~~~~   `Y8b. 
 `8bd8'  88   88 88 `88.   .88.   88   88 88   8D 88booo. 88.     db   8D 
   YP    YP   YP 88   YD Y888888P YP   YP Y8888P' Y88888P Y88888P `8888Y' 
*/

:root {
  /* Background Colors */
  --primary-bg-color: #F9F9F9; /* main background */
  --secondary-bg-color: #EAEBED; /* Background for cards, info boxes, etc. */
  --tertiary-bg-color: #D7D8DA; /* Background for header/footer overlays */

  /* Text Colors */
  --primary-text-color: #222021; /* main text */
  --secondary-text-color: #494647; /* secondary text, captions, etc. */

  /* Accent Colors Todo */
  --primary-accent-color: #568EA3;
  --secondary-accent-color: #DE541E;
  --tertiary-accent-color: #FAF33E;

  /* Fonts */
  --text-font: "Inter", system-ui, sans-serif;
  --monospace-font: "JetBrains Mono", Consolas, monospace;
}


/*
.d8888. d888888b d8b   db  d888b  db      d88888b        db    db .d8888. d88888b      d888888b  .d8b.   d888b  .d8888. 
88'  YP   `88'   888o  88 88' Y8b 88      88'            88    88 88'  YP 88'          `~~88~~' d8' `8b 88' Y8b 88'  YP 
`8bo.      88    88V8o 88 88      88      88ooooo        88    88 `8bo.   88ooooo         88    88ooo88 88      `8bo.   
  `Y8b.    88    88 V8o88 88  ooo 88      88~~~~~ C8888D 88    88   `Y8b. 88~~~~~         88    88~~~88 88  ooo   `Y8b. 
db   8D   .88.   88  V888 88. ~8~ 88booo. 88.            88b  d88 db   8D 88.             88    88   88 88. ~8~ db   8D 
`8888Y' Y888888P VP   V8P  Y888P  Y88888P Y88888P        ~Y8888P' `8888Y' Y88888P         YP    YP   YP  Y888P  `8888Y' 
*/


html {
  font-size: 16px; /* Base font size, defines 1rem */

  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* height of header */

  @media (max-width: 768px) {
    scroll-padding-top: 3rem; /* less on mobile */
  }
}


body {
  margin: 0; /* Remove default margin */

  font-family: var(--text-font); /* Primary font */

  color: var(--primary-text-color);
  background-color: var(--primary-bg-color);
}


header {
  position: sticky;
  top: 0;
  z-index: 10;

  isolation: isolate; /* Create a new stacking context for backdrop-filter */
  background: color-mix(in srgb, var(--tertiary-bg-color), 0%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--primary-background-color);

  &::before { /* Gradient overlay */
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--tertiary-bg-color) 100%, transparent),
      color-mix(in srgb, var(--tertiary-bg-color) 90%, transparent),
      color-mix(in srgb, var(--tertiary-bg-color) 65%, transparent),
      color-mix(in srgb, var(--tertiary-bg-color) 30%, transparent)
    );

    pointer-events: none;
  }
}


footer {
  padding: 2rem 0;
  justify-items: center;

  font-size: 0.9rem;
  color: var(--secondary-text-color);

  hr {
    margin-bottom: 1.5rem;
  }
}

ul {
  list-style: none;
}

li {
  display: grid;
  grid-template-columns: 1em 1fr; /* bullet column + text column */
  column-gap: .5em;               /* controls bullet→text spacing */
  align-items: start;
}

li::before {
  content: "•";
}