:root {
  --font-size: 15px;
  --mono-font-size: 12px;
  --content-gap: 15px;
  --radius: 5px;

  background-color: var(--palette-0);
  color: var(--palette-2);

  font-size: var(--font-size);
  font-family: Inter, sans-serif;
  /* fix for Chrome */
  font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

:root:has(#mode-1:checked) {
  --palette-0: #fffeea;
  --palette-1: #464646;
  --palette-2: #464646;
  --palette-3: #ffe001;
  --palette-5: #ff7a01;
  --palette-4: #e60002;

  --gradient-1: linear-gradient(0deg, var(--palette-5), var(--palette-5));

  --code-bg: #eee8d5;
  --code-fg: #839496;
  --code-comment: #93a1a1;
  --code-cyan: #2aa198;
  --code-green: #859900;
  --code-orange: #cb4b16;
  --code-pink: #d33682;
  --code-purple: #6c71c4;
  --code-red: #dc322f;
  --code-yellow: #b58900;
}

:root:has(#mode-2:checked) {
  --palette-0: #001000;
  --palette-1: #002200;
  --palette-2: #00cc00;
  --palette-3: #004400;
  --palette-4: #88ff88;
  --palette-5: #bbffbb;

  --gradient-1: linear-gradient(0deg, var(--palette-2), var(--palette-2));

  --code-bg: #002000;
  --code-fg: #00cc00;
  --code-comment: #006600;
  --code-cyan: #88ff88;
  --code-green: #50fa7b;
  --code-orange: #bbffbb;
  --code-pink: #e0ffe0;
  --code-purple: #88ff88;
  --code-red: #006600;
  --code-yellow: #88ff88;
}

:root:has(#mode-3:checked) {
  --palette-0: #a8225d;
  --palette-1: #7d254b;
  --palette-2: #ffffff;
  --palette-3: #e12272;
  --palette-4: #ffc1db;
  --palette-5: #ff70ac;

  --gradient-1: linear-gradient(0deg, var(--palette-3), var(--palette-3));

  --code-bg: #580000;
  --code-fg: #f8f8f8;
  --code-comment: #e7c0c0;
  --code-cyan: #f12727;
  --code-green: #ffb454;
  --code-orange: #ffb86c;
  --code-pink: #ff2680;
  --code-purple: #994646;
  --code-red: #ff5555;
  --code-yellow: #f1fa8c;
}

:root:has(#mode-4:checked) {
  --palette-0: #0a4386;
  --palette-1: #113e75;
  --palette-2: #9bfdfe;
  --palette-3: #2a6dc0;
  --palette-4: #bbdaff;
  --palette-5: #bbdaff;

  --gradient-1: linear-gradient(137deg, #c3fcfd, #c3fcfd);

  --code-bg: #002451;
  --code-fg: #f8f8f8;
  --code-comment: #7285b7;
  --code-cyan: #ff9da4;
  --code-green: #99ffff;
  --code-orange: #bbdaff;
  --code-pink: #ffffff;
  --code-purple: #ffc58f;
  --code-red: #ff5555;
  --code-yellow: #f1fa8c;
}

:root:has(#mode-5:checked) {
  --palette-0: #111111;
  --palette-1: #310430;
  --palette-2: #ff00b1;
  --palette-3: #711556;
  --palette-4: #ff5fcf;

  --gradient-1: linear-gradient(137deg, hsl(14deg 100% 58%), rgb(255 0 177) 70%);

  --code-bg: #1E1E1E;
  --code-fg: #D4D4D4;
  --code-comment: #ba9ab9;
  --code-cyan: #9466AA;
  --code-green: #d4d4d4;
  --code-orange: #cec4a8;
  --code-pink: #d1b7f1;
  --code-purple: #B08B35;
  --code-red: #ff5555;
  --code-yellow: #e99a9a;
}

#grid-wrapper {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "hdr hdr hdr hdr"
    "nav nav nav nav"
    "mds mds mds mds"
    "wrn wrn wrn wrn"
    "bdy bdy bdy bdy"
    "ftr ftr ftr ftr";

  column-gap: var(--content-gap);
  row-gap: calc(var(--content-gap) * 1.5);
}

@media (width >=500px) {
  #grid-wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hdr hdr hdr hdr"
      "nav nav mds mds"
      "wrn wrn wrn wrn"
      "bdy bdy bdy bdy"
      "ftr ftr ftr ftr";
  }
}

@media (width >=900px) {
  #grid-wrapper {
    grid-template-columns: 1fr repeat(6, minmax(auto, 8em)) 1fr;
    grid-template-areas:
      ". hdr hdr hdr hdr mds mds ."
      ". wrn wrn wrn wrn wrn wrn ."
      ". nav bdy bdy bdy bdy rig ."
      ". ftr ftr ftr ftr ftr ftr .";
  }
}

@media (width >=1280px) {
  :root {
    --font-size: 20px;
    --mono-font-size: 15px;
  }

  #grid-wrapper {
    grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
    grid-template-areas:
      ". hdr hdr hdr hdr mds mds ."
      ". wrn wrn wrn wrn wrn wrn ."
      ". nav bdy bdy bdy bdy rig ."
      ". ftr ftr ftr ftr ftr ftr .";
  }
}

h1.section {
  display: block;
  position: absolute;
  font-size: 1rem;
  font-weight: 400;
  top: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: 0;
  padding: 0 1rem;
  background: var(--palette-0);
}

nav,
fieldset#mode-select {
  margin-top: 1rem;
  border: 2px solid var(--palette-2);
  border-radius: 0.5rem;
}

a,
a:active,
a:hover,
a:visited {
  color: var(--palette-4);
}

nav {
  grid-area: nav;
  position: relative;
  height: fit-content;
  line-height: 1.5;
}

nav ul {
  list-style: none;
  font-weight: 600;
  padding-left: 0.5rem;
  text-transform: uppercase;
}

nav ul li::before {
  content: ">";
  margin-right: 0.25em;
  color: var(--palette-2);
}

nav ul li a.current {
  color: var(--palette-5);
}

nav ul li:has(a.current)::before {
  color: var(--palette-5);
}

main {
  grid-area: bdy;
  margin: 0 1rem;
  line-height: 1.4;

  /* for side-note alignment */
  anchor-name: --main;
}

header {
  grid-area: hdr;
  align-self: end;
}

#grid-wrapper::before {
  content: "";
  display: block;
  grid-area: wrn;
  height: 2em;
  margin: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--palette-2) 10px, var(--palette-2) 20px);
}

header h1 {
  background: var(--gradient-1);
  background-clip: text;
  color: transparent;

  font-size: 5rem;
  font-weight: 900;
  margin: 0;
  padding: 0;
}

fieldset#mode-select {
  grid-area: mds;

  display: flex;
  align-items: center;

  position: relative;
  padding: 0.25rem 0.75rem 0;
  margin: 1rem 0.5rem 0.5rem;
}


fieldset#mode-select legend {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-wrap: nowrap;
  padding: 0 1rem;
  background: var(--palette-0);
}

fieldset#mode-select label {
  flex-grow: 1;
  position: relative;
  margin: 1rem 4px;
  padding: 1rem 1rem 0.5rem;
  border-radius: 8px;
  background: var(--palette-3);
  text-align: center;
  font-weight: 800;
}

fieldset#mode-select input[type="radio"] {
  appearance: none;
  display: none;
  padding: 0;
  margin: 0;
}

fieldset#mode-select label::after {
  content: "";
  position: absolute;

  width: 60%;
  height: 0;

  top: 4px;
  left: 50%;
  transform: translateY(2px) translateX(-50%);

  border: 4px solid var(--palette-1);
  border-radius: 4px;
}

fieldset#mode-select label:has(input:checked)::after {
  background: var(--palette-5);
  border-color: var(--palette-5);
  box-shadow: 0px 0px 3px var(--palette-5);
}

:root:has(#mode-1:checked) fieldset#mode-select label:has(input:checked)::after {
  box-shadow: none;
}

/* The first header in an article gets special header treatment */
article>h1:first-child {
  font-size: 3em;
  margin-top: 0;
}

article footer a.nav-older {
  float: left;
}

article footer a.nav-newer {
  float: right;
}

/* footnotes / sidenotes */

section[role="doc-endnotes"] {
  border-top: 2px solid;
}

/* we try to lift the footnotes to sidenotes when anchors are supported */
@supports(anchor-name: --sidenote) {

  /* there's no sidebar for the smaller layouts */
  @media (width >=900px) {
    section[role="doc-endnotes"] {
      border-top: none;
    }

    section[role="doc-endnotes"] li {
      position: absolute;

      anchor-name: --sidenote;

      top: max(calc(anchor(var(--anchor) top) - 1lh), anchor(--sidenote bottom, 0%));
      bottom: auto;
      left: calc(anchor(--main right) + 2em);
      right: auto;

      font-size: var(--mono-font-size);
      max-width: 10rem;
    }

    a[role="doc-noteref"] {
      anchor-name: var(--anchor-name);
    }

    /* sidenotes having backlinks looks silly */
    a[role="doc-backlink"] {
      display: none;
    }
  }
}

/* posts archive formatting */

section.year {
  display: block;
  margin: 1rem 0;
}

section.year h2 {
  color: var(--palette-5);
  margin: 0;
}

section.year article {
  position: relative;
  padding-left: 4rem;
}


section.year article h1 {
  font-size: 1.5em;
  margin: 0 0 0 0.5em;
}

section.year article time {
  color: var(--palette-2);
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

section.year span.year {
  display: none;
}

section.year span.month {
  font-weight: 600;
}

/* images */

article img {
  max-width: 100%;
}

/* tables */

table {
  border-collapse: collapse;
  width: min(65rem, 100%);
  table-layout: fixed;
}

th,
caption {
  text-align: start;
}

caption {
  margin-block: 0.75rem;
}

thead th:not(:first-child),
td {
  text-align: end;
}

th,
td {
  border: 1px solid var(--palette-2);
  padding: 0.25rem 0.75rem;
  vertical-align: baseline;
}

th:first-child {
  position: sticky;
  inset-inline-start: 0;
  border-inline-end: none;
}

tbody th {
  background: var(--palette-3);
  vertical-align: bottom;
}

th:first-of-type {
  width: 10rem;
}

/* syntax highlighting and code blocks */

code {
  border-radius: 8px;
  padding: 0 0.25em;
}

code,
pre {
  font-family: monospace;
  background-color: var(--code-bg);
  color: var(--code-fg);
}

pre {
  overflow: auto;

  font-size: var(--mono-font-size);
  padding: 1rem;

  border: 2px solid var(--palette-2);
  border-radius: 0.5rem;
}

pre code {
  display: block;
}

span[data-hl="comment"],
span[data-hl="comment.documentation"] {
  color: var(--code-comment);
}

span[data-hl="comment.documentation"] {
  font-style: italic;
}

span[data-hl="keyword"],
span[data-hl="punctuation"],
span[data-hl="punctuation.bracket"],
span[data-hl="punctuation.delimiter"],
span[data-hl="punctuation.special"] {
  color: var(--code-pink);
}

span[data-hl="keyword"] {
  font-weight: bold;
}

span[data-hl="constant"],
span[data-hl="constant.builtin"],
span[data-hl="variable.builtin"] {
  color: var(--code-purple);
}

span[data-hl="constructor"],
span[data-hl="function"],
span[data-hl="function.builtin"],
span[data-hl="function.method"],
span[data-hl="operator"],
span[data-hl="property"],
span[data-hl="property.builtin"] {
  color: var(--code-green);
}

span[data-hl="function.macro"],
span[data-hl="variable.parameter"] {
  color: var(--code-orange);
}

span[data-hl="function.macro"] {
  font-weight: bold;
}

span[data-hl="string"] {
  color: var(--code-yellow);
}

span[data-hl="type"] {
  color: var(--code-cyan);
}

span[data-hl="type.builtin"] {
  font-style: italic;
  color: var(--code-cyan);
}