:root {
  color-scheme: light dark;
  --color-brblack: #002b36;
  --color-brgreen: #586e75;
  --color-brcyan: #93a1a1;
  --color-orange: #cb4b16;
  --color-violet: #6c71c4;
  --color-cyan: #2aa198;
  --color-cream: #fffdf2;
}

body {
  -webkit-font-smoothings: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: #fffdf2;
  background: var(--color-cream);
  color: var(--color-brblack);
}

.sans-serif {
  font-family: 'Boon', sans-serif;
}

a {
  color: #cb4b16;
  color: var(--color-orange);
  text-decoration-color: var(--color-violet);
}

.gray {
  color: var(--color-brgreen);
}

.site-emblem {
  vertical-align: text-top;
  display: inline-block;
}

.logo-circle, .logo-symbol-inner {
  fill: #002b36;
  fill: var(--color-orange);
}

.logo-symbol-outer {
  fill: #fffdf2;
  fill: var(--color-cream);
}

hr {
  color: var(--color-brgreen);
  border-top: 1px dotted;
}

.mh-500 {
  max-height: 500px;
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--color-brblack);
    color: var(--color-brcyan);
  }
  a {
    color: var(--color-cyan);
    text-decoration-color: var(--color-violet);
  }
  .black {
    color: var(--color-brcyan);
  }
  .b--a {
    border-color: var(--color-violet);
  }
  .logo-circle, .logo-symbol-inner {
    fill: var(--color-cyan);
  }
  .logo-symbol-outer {
    fill: var(--color-brblack);
  }
}