@import url('https://fonts.cdnfonts.com/css/sf-mono');
@font-face {
  font-family: 'Exposure';
  src: url('assets/fonts/Exposure - Exposure VAR-205TF.ttf') format('truetype');
  font-weight: 100 900;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: #888; color: #fff; }
body {
  font: .8em/2.2 'SF Mono', monospace;
  padding: 15vh max(8vw, calc(50vw - 450px));
  background: #fff;
  color: #000;
  min-height: 100vh;
}
h1 {
  font: 1.75em 'Exposure', sans-serif;
  font-variation-settings: 'EXPO' -20;
  letter-spacing: -.05em;
  margin-bottom: .5em;
}
a { color: inherit; text-decoration: underline; text-decoration-style: solid; }
@media (hover:hover) { a:hover { font-weight: bold; } }
.block { margin-bottom: 1em; }
.tree span.l {
  display: block;
  padding-left: 3ch;
  text-indent: -3ch;
}
.tree a { text-decoration: none; }
@media (prefers-color-scheme: dark) {
  body { background: #000; color: #fff; }
}
body.dark { background: #000; color: #fff; }
body.light { background: #fff; color: #000; }

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media (hover:hover) { #theme-toggle:hover #theme-icon { background: #888; } }
#theme-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  border-radius: 50%;
  background: #000;
}
@media (prefers-color-scheme: dark) {
  #theme-icon { background: #fff; }
}
body.dark #theme-icon { background: #fff; }
body.light #theme-icon { background: #000; }