* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  --color-light: hsl(0 0% 100%);
  --color-dark: hsl(0, 0%, 0%);
  --color-text-highlight: oklch(97.02% 0 0);
  --color-neutral: oklch(38.74% 0.15 266.36);
  --color-accent-primary: oklch(69.58% 0.16 55.54);
  --color-accent-secondary: oklch(32.11% 0 0);

  @supports (color: oklch(56.24% 0.173 40.93)) {
    --color-light: hsl(0 0% 100%);
    --color-dark: hsl(0, 0%, 0%);
    --color-text-highlight: oklch(78.09% 0.143 51.46);
    --color-neutral: oklch(38.74% 0.15 266.36);
    --color-accent-primary: oklch(69.58% 0.16 55.54);
    --color-accent-secondary: oklch(32.11% 0 0);
  }

  color: var(--color-light);

  /* font */
  font-family: "SpaceMono", monospace;
  font-size: var(--font-size-primary);
  font-weight: var(--font-weight-regular);

  /* font-size */
  --font-size-primary: 1rem;
  /* 64px */
  --font-size-title-page: clamp(3rem, calc(8.5vw + 1rem), 4rem);
  /* 36px */
  --font-size-title-article: clamp(1.35rem, calc(3vw + 1rem), 2rem);
  /* 28px */
  --font-size-title-paragraph: clamp(1.35rem, calc(3vw + 1rem), 1.75rem);

  /* font-weight */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* article styling */
  --boder: 2px solid var(--color-accent-primary);
  --radius: 15px;
  --child-radius: calc(var(--radius) / 2);
}

/* ====================================================== COLORS ====================================================== */
.primary,
.neutral,
.accent-primary,
.accent-secondary {
  --dark-2: color-mix(in hsl, var(--color) 90%, black 10%);
  --dark-1: color-mix(in hsl, var(--color) 95%, black 5%);
  --light-1: color-mix(in hsl, var(--color) 90%, white 10%);
  --light-2: color-mix(in hsl, var(--color) 80%, white 20%);

  @supports (color: oklch(56.24% 0.173 40.93)) {
    --dark-2: oklch(from var(--color) calc(l - 0.1) calc(c - 0.02) h);
    --dark-1: oklch(from var(--color) calc(l - 0.04) calc(c - 0.01) h);
    --light-1: oklch(from var(--color) calc(l + 0.02) calc(c + 0.01) h);
    --light-2: oklch(from var(--color) calc(l + 0.04) calc(c + 0.02) h);
  }
}

.primary {
  --color: var(--oklch-primary, var(--color-primary));
}

.dark {
  --color: var(--oklch-dark, var(--color-dark));
}

.neutral {
  --color: var(--oklch-neutral, var(--color-neutral));
}

.accent-primary {
  --color: var(--oklch-accent-primary, var(--color-accent-primary));
}

.accent-secondary {
  --color: var(--oklch-accent-secondary, var(--color-accent-secondary));
}

/* ====================================================== FONTS ====================================================== */
@font-face {
  font-family: "SpaceMono";
  src: url("fonts/SpaceMono-Regular.ttf") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SpaceMono";
  src: url("fonts/SpaceMono-Italic.ttf") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SpaceMono";
  src: url("fonts/SpaceMono-Bold.ttf") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SpaceMono";
  src: url("fonts/SpaceMono-BoldItalic.ttf") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

h1 {
  font-size: var(--font-size-title-page);
  font-weight: var(--font-weight-regular);
  font-style: italic;
  line-height: 3.5rem;
}

h2,
h3,
h4 {
  line-height: 2rem;
}

h2 {
  font-size: var(--font-size-title-article);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--font-size-title-paragraph);
  font-weight: var(--font-weight-bold);
}

/* h4 {
    font-size: var(--font-size-title-paragraph);
    font-weight: var(--font-weight-bold);
    font-style: italic;
} */

/* ====================================================== NAV ====================================================== */
ul {
  list-style: none;
}

a {
  color: var(--color-text-highlight);
}

body {
  font-family: sans-serif;
  background-color: var(--light-2);
}

header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  align-items: center;
  padding: 0 2em;
  background-color: var(--dark-2);
  z-index: 11;
  box-shadow: 1px 1px 15px 3px var(--dark-2);

  & > a {
    grid-column: 1;
    align-self: end;
    width: min-content;
    padding: 1em;
    margin: 0 0 0 1em;

    @media (min-width: 540px) {
      grid-row: 1;
    }

    &:hover {
      background-color: azure;
    }
  }

  .hamburger {
    grid-column: -1;
    align-self: end;
    margin: 0 0 0 0;
    cursor: pointer;

    @media (min-width: 540px) {
      grid-row: 1;
    }
  }

  .hamburger:hover {
    svg {
      --bun: #b87f2a;
      --sesame: #fff8dc;
      --patty: #8b3a2f;
      --cheese: #ffea00;
      --stroke: black;
    }
  }

  svg {
    --sesame: white;
    --stroke: currentColor;
  }

  input {
    clip-path: inset(50%);
  }

  &:has(input[type="checkbox"]:checked) svg {
    --bun: #b87f2a;
    --sesame: #fff8dc;
    --patty: #8b3a2f;
    --cheese: #ffea00;
    --stroke: black;
  }

  &:has(input[type="checkbox"]:checked) nav {
    transition: right 500ms ease-out;
    right: 0;
  }

  &:has(input[type="checkbox"]:checked) .overlay {
    opacity: 1;
    visibility: visible;
  }
}

nav {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  top: 2.6em;
  right: -100%;
  width: 100%;
  height: 100vh;
  transition: right 500ms ease-out;

  .details-container {
    width: 240px;
    background-color: var(--dark-2);
    z-index: 10;

    & > li {
      padding: 0.7em;
    }
  }
}

nav details {
  cursor: pointer;

  summary::marker {
    content: "";
  }

  summary::after {
    content: "⮟";
    display: inline-block;
    margin-left: 0.5em;
    transition: transform 0.4s ease 0.1s;
  }

  &[open] summary::after {
    transform: rotate(180deg);
  }

  ul li {
    padding: 0.25em;
  }
}

.overlay {
  position: fixed;
  inset: 3.2em 0 0 0;
  cursor: pointer;
  background-color: hsl(0, 0%, 0%, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 9;
}