:root {
  --theme-light-bg: #eeeeee;
  --theme-light-fg: grey;
  --theme-light-text: #111111;
  --theme-light-link: darkslateblue;
  --theme-light-h1: #111111;
  --theme-light-h2: darkgoldenrod;
  --theme-light-h3: darkcyan;
  --theme-light-switch-shadow: #373d4e;
  --theme-light-toggle-text: 'light';

  --theme-dark-bg: #111111;
  --theme-dark-fg: grey;
  --theme-dark-text: #eeeeee;
  --theme-dark-link: slateblue;
  --theme-dark-h1: #eeeeee;
  --theme-dark-h2: goldenrod;
  --theme-dark-h3: cyan;
  --theme-dark-switch-shadow: #fce477;
  --theme-dark-toggle-text: 'dark';
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-bg: var(--theme-dark-bg);
    --theme-fg: var(--theme-dark-fg);
    --theme-text: var(--theme-dark-text);
    --theme-link: var(--theme-dark-link);
    --theme-h1: var(--theme-dark-h1);
    --theme-h2: var(--theme-dark-h2);
    --theme-h3: var(--theme-dark-h3);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --theme-bg: var(--theme-light-bg);
    --theme-fg: var(--theme-light-fg);
    --theme-text: var(--theme-light-text);
    --theme-link: var(--theme-light-link);
    --theme-h1: var(--theme-light-h1);
    --theme-h2: var(--theme-light-h2);
    --theme-h3: var(--theme-light-h3);
  }
}

#themed {
  background: var(--theme-bg);
  color: var(--theme-text);
  min-height: 100%;
}

nav {
  background: var(--theme-bg);
}

a {
  color: var(--theme-link);
}

h1 {
  color: var(--theme-h1);
}

h2 {
  color: var(--theme-h2);
}

h3, h4, h5, h6 {
  color: var(--theme-h3);
}


.code-title {
  border-bottom: 1px solid var(--theme-text);
}