:root {
  --default-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
  --background-primary: #0d0d0d;
  --background-primary-alt: #1a1a1a;
  --font-monospace: "Source Code Pro", monospace;
  --text-normal: #dcddde;
  --editor-font-size: 15px;
  text-rendering: optimizeLegibility;
  font-family: var(--default-font);
  line-height: 1.5em;
  font-size: 16px;
  background-color: var(--background-primary);
  color: var(--text-normal);
}

code {
  color: lightpink;
  font-family: var(--font-monospace);
  background-color: var(--background-primary-alt);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.85em;
}

/* split toc and text */

body {
  display: flex;
  flex-flow: row wrap;
}

footer {
  text-align: center;
  border-top: 1px solid #8c8c8c;
  padding-top: 1%;
  flex: 0 0 100%;
}

footer::after {
  content: "💙";
  color: red;
}

.toc {
  flex: 1 0 20%;
  padding-right: 1rem;
}

.text {
  flex: 1 1 70%;
  padding-right: 1.5rem;
}

/* <a> links still live in a dark background, so fix that */
a {
  color: aqua;
}

a:hover {
  color: violet;
}

/* toc links are treated differently */
.toc-link {
  color: aliceblue;
}

/* The following CSS style was generated by ChatGPT as a shitpost.
 *
 * It incredibly works.
 *
 * The prompts were:
 *  "Generate CSS that creates indentation on a tree made out of `<details>` elements."
 *
 * And then, for the `details > *` block:
 *  "Given this CSS, elements that are children of `<details>`, but are not `<details>` themselves, are not indented a level above. Can you generate CSS that does such action?"
 */

/* Set the initial margin for all details elements to zero */
details {
  margin-left: 0;
}

/* Indent all details elements inside another details element */
details details {
  margin-left: 1.5em; /* adjust this value to change the indentation */
}

/* Indent direct children of details elements */
details > * {
  margin-left: 1.5em; /* adjust this value to change the indentation */
}

/* Reset the margin for the summary element */
details summary {
  margin-left: 0;
}

/* end ChatGPT */

nav ul {
  margin: 0;
}

nav > ul {
  padding-left: 0;
}

/* Highlight hovered links, as well as `<summary>`s that are direct descendants of `<details>` elements that have a
 * hovered link as a child, as well as `<li>`s that have a hovered link as a child. This ensures that the marker
 * elements also get this hover styling. */
nav a:hover,
nav details:has(a:hover) > summary,
nav li:has(a:hover) {
  color: #99cafe;
}

/* As above.
 * Highlight current links, as well as `<summary>`s that are direct descendants of `<details>` elements that have a
 * current link as a child, as well as `<li>`s that have a current link as a child. This ensures that the marker
 * elements also get this current styling. */
nav a[aria-current="page"],
nav details:has(a[aria-current="page"]) > summary,
nav li:has(a[aria-current="page"]) {
  font-weight: bold;
  color: #66b0ff;
}

.tag-page {
  display: flex;
  flex-flow: row wrap;
}

.page-preview {
  border-style: solid;
  border-width: 4px;
  border-color: #888888;
  width: 25rem;
  flex: 0 0 30rem;
  padding: 2rem;
}

.page-preview-text {
  color: white;
}