:root {
  color-scheme: light dark;

  --text: light-dark(#232626, #f4f4f4);
  --background: light-dark(#f5e7d2, #232626);
  --muted: light-dark(#666, #aaa);
  --block-bg: light-dark(#edc, #383838);
  --strong: light-dark(#383838, #fff);
  --bright: light-dark(#3a3a3a, #e4eaf2);
  /* Syntax Highlighting */
  --red: light-dark(Crimson, Tomato);
  --blue: light-dark(Blue, DodgerBlue);
  --yellow: light-dark(Peru, GoldenRod);
  --cyan: light-dark(DarkCyan, SkyBlue);
  --orange: light-dark(#b24d3c, Orange);
  --green: light-dark(Green, OliveDrab);
  --magenta: light-dark(MediumOrchid, #c678dd);
}

h1, h2, h3, h4, h5 {
  color: var(--bright);
  font-family: "Verdana", sans-serif;
}

b,
strong {
  color: var(--strong);
}

a:link {
  color: light-dark(#3973c0, #c7ddff);
  text-decoration: none;
}

a:visited {
  color: light-dark(#a161fe, #e2c5ff);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
}

blockquote {
  background-color: var(--block-bg);
  padding-left: 2em;
  padding-right: 2em;
}

html {
  color: var(--text);
  font-family: "Georgia", serif;
  font-size: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--background);
}

code {
     font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

body {
  width: 800px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.site-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-align: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.block {
  border: 1px dotted light-dark(black, white);
  padding: 5px 15px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block h1 {
  font-size: 1em;
  text-align: center;
  margin-bottom: 0;
}

.small {
  font-size: 0.8em;
}

.wave {
  background: #111;
  color: #fff;
  text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
}

#footnotes p {
 display: inline;
 margin-right: 5px;
}

#footnotes,
#footnotes code {
 font-size: 0.8rem;
}

#footnotes ol {
   list-style-position: outside;
   padding-left: 0;
}

ol hr.dashed {
  --dash: 4px;
  --gap: 8px;
  --thickness: 1px;
  --dash-color: var(--muted);

  border: none;
  margin-left: 0px;
  height: var(--thickness);
  width: 50%;

  background: repeating-linear-gradient(
    to right,
    var(--dash-color) 0,
    var(--dash-color) var(--dash),
    transparent var(--dash),
    transparent calc(var(--dash) + var(--gap))
  );
}

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

footer hr {
  width: 100%;
}

.keyword, .operator, [class^="keyword"] {
  color: var(--red);
}

.number {
  color: var(--blue);
}

.type, [class^="type"] {
  color: var(--cyan);
}

.constant_builtin_boolean {
  color: var(--magenta);
}

.string {
  color: var(--yellow);
}

.zig .function_builtin {
  color: var(--orange);
}

.zig .constant.variable.type.function {
  color: var(--green);
}

.constant, .variable, .property {
  color: var(--strong);
}

.c, .delimiter,[class*="punctuation"] {
  color: var(--muted);
}

pre {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding: 10px 5px;
}

code.ziggy .field {
  color: var(--strong);
}

code.ziggy .punctuation {
  color: var(--muted);
}

code.ziggy {
  color: var(--muted);
}

code.ziggy .keyword,
code.ziggy .type {
  color: var(--red);
}

code.ziggy .string {
  color: var(--yellow);
}

code.ziggy .numeric.constant {
  color: var(--blue);
}

code.ziggy .function {
  color: var(--orange);
}

/* Footnote popup */
.fn-popup {
  position: fixed;
  z-index: 1000;
  max-width: min(36rem, calc(100vw - 2rem));
  max-height: min(16rem, calc(100vh - 2rem));
  overflow: auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--muted);
  border-radius: 6px;
  background: var(--background);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
  line-height: 1.35;
}

.fn-popup[hidden] {
  display: none;
}

.fn-popup p {
  margin: 0 0 0.4rem;
}

.fn-popup p:last-child {
  margin-bottom: 0;
}