:root {
  color-scheme: light dark;
  /* accesibility foreground shades (use against --bg) */
  --fg: light-dark(hsl(0 0 13.33),hsl(0 0 80));
  --fgshade0: light-dark(hsl(0 0 15), hsl(0 0 75.5875));
  --fgshade1: light-dark(hsl(0 0 20), hsl(0 0 71.175));
  --fgshade2: light-dark(hsl(0 0 30), hsl(0 0 66.7625));
  --fgshade3: light-dark(hsl(0 0 42), hsl(0 0 62.35));

  /* accesibility background shades (use against --fg) */
  --bg: light-dark(hsl(0 0 100),hsl(0 0 0));
  --bgshade0: light-dark(hsl(0 0 90), hsl(0 0 06));
  --bgshade1: light-dark(hsl(0 0 85), hsl(0 0 12));
  --bgshade2: light-dark(hsl(0 0 80), hsl(0 0 18));
  --bgshade3: light-dark(hsl(0 0 75), hsl(0 0 24));

  --red:      light-dark(hsl(00  90 45), hsl(00  90  40));
  --orange:   light-dark(hsl(30  90 45), hsl(30  90  40));
  --green:    light-dark(hsl(90  90 30), hsl(90  85  40));
  --yellow:   light-dark(hsl(60  90 35), hsl(60  90  45));
  --blue:     light-dark(hsl(240 50 40), hsl(240 60 60));
  --magenta:  light-dark(hsl(300 80 45), hsl(300 80  40));
  --purple:   light-dark(hsl(270 50 40), hsl(270 90 50));
  --cyan:     light-dark(hsl(180 90 30), hsl(180 80  40));
  --brown:    light-dark(hsl(25  90 25), hsl(25  90  40));

  --red-hl:     hsl(from var(--red)     h s l / 0.3);
  --orange-hl:  hsl(from var(--orange)  h s l / 0.3);
  --green-hl:   hsl(from var(--green)   h s l / 0.3);
  --yellow-hl:  hsl(from var(--yellow)  h s l / 0.3);
  --blue-hl:    hsl(from var(--blue)    h s l / 0.3);
  --magenta-hl: hsl(from var(--magenta) h s l / 0.3);
  --purple-hl:  hsl(from var(--purple)  h s l / 0.3);
  --cyan-hl:    hsl(from var(--cyan)    h s l / 0.3);
  --brown-hl:   hsl(from var(--brown)   h s l / 0.3);

  --border-dim: light-dark(hsl(00 00 85), hsl(00 00 28));
  --link: var(--fg);
  --link-visited: var(--link);

  /* typography */
  --font-size: 1rem;
  --font-size-s: calc(0.9 * var(--font-size));
  --font-size-xs: calc(0.8 * var(--font-size));
  --font-size-l: calc(1.2 * var(--font-size));
  --font-size-xl: calc(1.5 * var(--font-size));
  --line-height: 1.5;
  --regular-font:
    OpenDyslexic,
    "Lexica Ultralegible",
    "Atkinson Hyperlegible",
    "Readex Pro",
    Lexend,
    sans-serif;
  --mono-font: "JetBrainsMono Nerd Font",
    "Fira Code Nerd Font",
    monospace;
}


body {
  scrollbar-gutter: stable;
  font: var(--font-size) / var(--line-height) var(--regular-font);
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  scrollbar-color: var(--border-dim) transparent;
}

header,footer { padding: 1.2rem; }

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main {
  width: clamp(1px, 95% , 60ch);
  margin: 1rem auto;
}

blockquote {
  border-left: 4px solid var(--fgshade2);
  padding-left: 0.5rem;
}

h1 {
  font-weight: 900;
  margin-bottom: 0;
  text-align: center;
}

pre, code {
  font: var(--font-size-s) var(--mono-font);
}

pre {
  padding: 0.5rem;
  overflow: auto;
  overflow-wrap: normal;
  border: 2px solid var(--border-dim);
}

a {
  color: var(--link);

  &:visited { color: var(--link-visited); }
  &:active { color: var(--red); }

  /* Indicate external links with arrow and avoid whitespace(U+00A0) break. */
  &[target="_blank"]:not(:has(img))::after { content: "\00A0↗"; } /* 4 zine */

  /* Force regular link colour for typical navigation items */
  &:is(.no-visited:visited, .no-visited :visited ) { color: var(--link) }

  /* hide underline for given links */
  &.no-text-decor, .no-text-decor & { text-decoration-color: transparent; }

  /* indicate with underline if it is current page or ancestor */
  &.active, &.ancestor { text-decoration-color: initial; }
  &.ancestor { text-decoration-style: dotted;}
}

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

details { margin-block: 1rem; }

/* indicate detail's inner content with a border on the left */
[open]::details-content {
  border-left: 1px dotted var(--fg);
  margin-left: 0.2rem;
  padding-left: 0.8rem;
}

/* make all bullet points disc shaped because squares are fucking ugly */
/* ul { list-style-type: disc; } */

ul, ol { padding-inline-start: 1.5rem; }

/* remove bullet points from task lists and compensate with padding */
ul:has(input[type="checkbox"]) {
  list-style-type: none;
  padding-inline-start: 1.2rem;
}

pre, :not(pre) > code, .pre_banner { border: 2px solid var(--border-dim); }

img {
  filter: grayscale(100%);
  transition: 1s;
}
img:hover, img:focus { filter: none; }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 2px solid var(--border-dim);
  padding: 4px;
}

:not(ul li) > ol li::marker { content: counters(list-item,'.') ')'; }
:not(ul li) > ol li { padding-left: 0.5em; }

/* Prefix callout's summary with icon depending on the class */
.danger  summary::before { content: "🕱 "; }
.warning summary::before { content: "⚠ "; }
.note    summary::before { content: "🖹 "; }
.tip     summary::before { content: "🛈 "; }
.pin     summary::before { content: "🖈 "; }
.dont    summary::before { content: "🛇 "; }

/* Change cursor style for images with links, summaries and abbreviations */
a img:not(:is([rel="external"], .btns_8831)) { cursor: zoom-in; }
summary:hover                                { cursor: pointer; }
abbr                                         { cursor: help; }

mark { background: var(--yellow-hl); }
u    { text-decoration: var(--red) wavy underline; }
var  { color: var(--cyan); }
kbd  { border: 2px solid var(--border-dim); }

.bottom_nav {
  padding-block: 0.7rem;
  border-top: 2px solid var(--border-dim);
}

.footnote-ref::before { content: "["; }
.footnote-ref::after { content: "]"; }

/* I should be using TailwindCSS at this point but this is fun */
.float-left { float: left; }
.float-right { float: right; }

.flex { display: flex; }
.flex-space-between { justify-content: space-between; }
.flex-space-around { justify-content: space-around; }
.flex-center { justify-content: center;}
.flex-column { flex-direction: column; }
.flex-reverse { flex-direction: row-reverse; }
.flex-wrap { flex-wrap: wrap; }

.gap-s  { gap: 0.7rem }
.gap    { gap: 1rem }
.gap-l  { gap: 2rem; }
.gap-xl { gap: 3.5rem; }

.fg       { color: var(--fg); }
.fgshade0 { color: var(--fgshade0); }
.fgshade1 { color: var(--fgshade1); }
.fgshade2 { color: var(--fgshade2); }
.fgshade3 { color: var(--fgshade3); }
.bgshade0 { background: var(--bgshade0); }
.bgshade1 { background: var(--bgshade1); }
.bgshade2 { background: var(--bgshade2); }
.bgshade3 { background: var(--bgshade3); }

.wt-900 { font-weight: 900; }
.wt-800 { font-weight: 700; }
.wt-700 { font-weight: 700; }
.wt-600 { font-weight: 600; }
.wt-500 { font-weight: 500; }
.wt-300 { font-weight: 300; }
.wt-200 { font-weight: 200; }
.wt-100 { font-weight: 100; }

.font-mono { font-family: var(--mono-font); }
.italic { font-style: italic; }

.ft-size-xs { font-size: var(--font-size-xs); }
.ft-size-s  { font-size: var(--font-size-s); }
.ft-size-l  { font-size: var(--font-size-l); }
.ft-size-xl { font-size: var(--font-size-xl); }

.text-center { text-align: center; }
.inline-block { display: inline-block; }
.p-75 { max-width: 75%; }

.no-bullet-align {
  list-style-type: none;
  margin-left: -0.9rem;
}

#logo:hover { transform: rotate(360deg); }

#logo {
  margin: 1rem auto;
  display: block;
}

@media print {
  .no-print { display: none; }

  table, pre {
    break-inside: avoid;
    white-space: pre-wrap;
    border: 1px solid black;
  }

  details::details-content { display: contents; }
}