@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: #fff;
    --accent-bg: #f5f7ff;
    --text: #212121;
    --text-light: #585858;
    --accent: #0d47a1;
    --accent-hover: #1266e2;
    --accent-text: var(--bg);
    --code: #d81b60;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
  }
}

/* derek's color overrides */
:root {
  --accent-h: 96;
  --accent-s: 76%;
  --accent-l: 43%;
  --accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --accent: hsl(var(--accent-hsl));
  --accent-bg: hsl(var(--accent-hsl), .02);
  --accent-header: hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) * 2.05));

  /* faded bkgd based on accent-color */
  --bg: hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) * 2.2));

  --accent-text: var(--accent);
  --accent-text-darker: hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) * .7825));

  --text-light: hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * 0), calc(var(--accent-l) * 1.5));

  --border: var(--accent);
}

html {
  /* Set the font globally */
  font-family: "Work Sans", sans-serif;
  scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
  font-size: 1.0rem;
}

header {
  margin-bottom: 2rem;
  font-family: "Space Mono", monospace;
  /* background: var(--bg2); */
  /* background: var(--bg); */
  background: var(--accent-header);
  border-bottom: 0 solid var(--border);
}

footer {
  font-family: "Space Mono", monospace;
  margin-top: 1.5rem;
  padding: 1.5rem 0.5rem 2rem 0.5rem;
  border-top: 2px solid var(--border);
}

/* Format headers */
h1,
.moi {
  font-family: "Space Mono", monospace;
  font-size: 1.0rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .05rem;
  margin-top: 0.5rem;
  color: var(--accent-text-darker);
}

footer nav .moi {
  margin-right: 1.0rem;
}

h2 {
  font-family: "Lexend Zetta", "Space Mono", monospace;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.375rem;
  letter-spacing: -.125rem;
  margin-top: 1.0rem;
  margin-left: -0.1rem;
  color: var(--accent);
}

.fix-margin-btm {
  margin-bottom: 0.625rem;
}

.subheading {
  font-family: "Space Mono", monospace;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.375rem;
  letter-spacing: .025rem;
  margin: .25rem 0 .75rem 0;
  color: var(--accent-text-darker);
}

h3 {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: 1.0rem;
  margin-top: 1.0rem;
}

h4 {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: 0.85rem;
  margin: 0;
  margin-bottom: 1.0rem;
}

h5 {
  font-size: 0.96rem;
}

p {
  margin: 0;
  margin-bottom: 0.55rem;
}

ol,
ul {
  margin-top: 0;
  padding-left: 2rem;
  padding-right: 1.5rem;
}

.statement {
  font-weight: 400;
  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0.015rem;
  margin-top: 2.5rem;
  color: var(--accent-text-darker);
}

.highlight {
  background-color: hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) *2.3));
  border-radius: 3px;
}

.border-bottom-with-padding {
  margin: 0;
  margin-bottom: 1.0rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.top-margin-override {
  margin-top: 0;
}

/* Format navigation */
nav {
  font-size: 1rem;
  line-height: 1.75;
  padding: 0 0;
}

nav a,
nav a:visited {
  margin: 1rem 0.125rem 0 0.125rem;
  border: 1px solid var(--text-light);
  border-radius: 50px;
  font-size: 0.9rem;
  color: var(--text) !important;
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
  background-image: linear-gradient(hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) *2.3)) 0%, hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) *2.3)) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0%;
  background-position: 0% 100%;
  transition: background-size 75ms ease-out;
}

nav a:hover {
  color: var(--accent);
  background-color: var(--accent-bg);
  /* font-weight: 600; */
  background-size: 100% 100%;
  /* background-color: hsl(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) *2.3)); */
  filter: drop-shadow(0 0 .075rem var(--accent));
}

nav a.jump,
nav a.jump:visited {
  font-style: italic;
  border: 1px dotted var(--text-light);
}

nav a.jump:hover {
  font-style: italic;
  border: 1px solid var(--accent);
}

header nav a.current,
header nav a.current:visited {
  border: 1px dotted var(--text-light);
  color: var(--text-light) !important;
  cursor: default;
  font-style: italic;
  background-image: none;
}

header nav a.current:hover {
  text-decoration: none;
  color: var(--text-light) !important;
  border-color: var(--text-light);
  font-weight: 400;
  background-color: hsla(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) *2.3), .2);
  filter: none;
}

/* footer nav a.current:hover {
  color: var(--accent) !important;
  background-color: hsla(calc(var(--accent-h) + 0), calc(var(--accent-s) * .7), calc(var(--accent-l) *2.3), .5);
} */