:root {
  --color-bg: #000;
  --color-fg: #111;
  --color-fg-alt: var(--color-fg);

  --font-heading: 1.4rem;
  --font-body: 1.3rem;
  --font-aux: 1rem;

  --space-lines: calc(var(--font-body) * 1.5);

  --line-height-body: calc(var(--space-lines) / var(--font-body));
  --line-height-aux: calc(var(--space-lines) / var(--font-aux));
  --line-height-heading: calc(var(--space-lines) / var(--font-heading));

  --space-xs: calc(var(--space-normal) * 0.333);
  --space-s: calc(var(--space-normal) * 0.666);
  --space-normal: calc(var(--space-lines) * 1);
  --space-l: calc(var(--space-normal) * 1.333);
  --space-xl: calc(var(--space-normal) * 2);
  --space-xxl: calc(var(--space-normal) * 3);
  --space-xxxl: calc(var(--space-normal) * 5);
}

* {
  border: none;
  margin: 0;
  padding: 0;
}
html {
  background-color: var(--color-bg);
  font-size: 100%;
  scrollbar-color: var(--color-fg) var(--color-bg);
  scrollbar-width: thin;
}
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background-color: var(--color-bg);
}
html::-webkit-scrollbar-thumb {
  background-color: var(--color-fg);
}
body {
  color: var(--color-fg);
  text-rendering: optimizeLegibility;
  line-height: var(--space-lines);
  display: flex;
  flex-direction: column;
}

/* header */
header {
  display: flex;
  margin: var(--space-xl) 0 var(--space-xl) 0;
}
header nav {
  font-variant: small-caps;
  margin: 0 auto;
}

/* links */
a {
  color: var(--color-fg);
  text-decoration-color: var(--color-fg-alt);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
header nav a {
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.05em;
}
a:hover {
  color: var(--color-fg-alt);
}

/* containers */
main {
  width: 100%;
}
article {
  max-width: 36rem;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-xl);
}

/* footer */
footer * {
  font-size: var(--font-aux) !important;
  line-height: var(--line-height-aux);
}
footer > hr {
  font-size: var(--font-heading) !important;
  width: 9rem;
  margin-top: var(--space-xl);
}
footer hr::after {
  color: var(--color-fg);
  content: "· · ·";
}
footer span {
  margin: 0 var(--space-xs);
  font-size: 1.35em !important;
}
footer p {
  margin: var(--space-l) 0 var(--space-s) 0;
}

/*
remove outline for summary element (mainly for mobile) but
keep for tab-initiated focus, javascript on page will remove when tabbing
thanks https://jmperezperez.com/outline-focus-ring-a11y/
*/
.no-focus-outline summary:focus {
  outline: none;
}

/* small screens */
/* H=N does 550x550 (desktop) and 375x375 (mobile) */
@media only screen and (max-width: 500px) {
  html {
    font-size: 90%;
  }
  header nav {
    margin: 0 var(--space-normal) 0 var(--space-normal);
  }
  main {
    display: block !important;
  }
  article {
    margin: 0 0 var(--space-l) 0;
    padding: 0 var(--space-normal);
  }
}

/* simple print reset, mainly for colors */
@media print {
  html {
    font-size: 11pt;
    background-color: #fff;
  }
  body {
    color: #000;
  }
  canvas {
    display: none;
  }
}