@media (prefers-color-scheme: light) {
  :root {
    --selection: rgba(92, 54, 131, 0.7);
    --bg: #ffffff;
    --font-color: #18181b;
    --code-font-color: #333333;
    --code-bg-color: #eeeeee;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --selection: rgba(124, 75, 173, 0.5);
    --bg: #171e26;
    --font-color: #a1a1aa;
    --code-font-color: #eeeeee;
    --code-bg-color: #333333;
  }
}

:root {
  --font-size: 17px;
}

html {
  font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: var(--font-size);
  scroll-behavior: smooth;
  background-color: var(--bg);
}

::selection {
  color: rgb(255, 255, 255);
  background: var(--selection);
}

/* Anchors */
h1:hover > a::before,
h2:hover > a::before,
h3:hover > a::before,
h4:hover > a::before,
h5:hover > a::before,
h6:hover > a::before {
  visibility: visible;
  text-decoration: none;
}

h1 > a::before,
h2 > a::before,
h3 > a::before,
h4 > a::before,
h5 > a::before,
h6 > a::before {
  content: "#";
  visibility: hidden;
  padding-right: 0.1em;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  text-decoration: none;
}

* {
  color: var(--font-color);
}

p {
  color: var(--font-color);
  font-size: var(--font-size);
}

body {
  margin: 0 auto;
  max-width: 720px;
}

footer {
  text-align: center;
}

.hljs {
  margin-inline: 0.4em;
}

/* for block of numbers */
.hljs-ln-numbers {
  text-align: right;
}

.hljs-ln
  > tbody
  > tr:last-child:has(td:last-child > span:-moz-only-whitespace) {
  visibility: collapse;
}

/* Temporary fix for layout.css.has-selector.enabled available only on
 * Firefox under certain circumstances */
.hljs-ln > tbody > tr:last-child {
  visibility: collapse;
}

kbd,
code {
  background-color: var(--code-bg-color);
  border-radius: 3px;
  color: var(--code-font-color);
  box-shadow: 0 1px 1px #000000;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  vertical-align: 1.5px;
}

.footnotes a {
  font-family: "Segoe UI";
  text-decoration: underline dotted;
}

.footnote-ref > a {
  text-decoration: underline dotted;
}

hr {
  border: 0;
  height: 1px;
  background: #8080802f;
}