index.css

:root {
  --default-bg: #fdfaf6;
  --default-text: rgb(35, 35, 35);
  --default-border: yellow;
  --default-font: 16px;
  --default-line-height: 24px;
  --default-link: #404be5;
}

.theme {
  background-color: var(--default-bg);
  color: var(--default-text);
}

@media (prefers-color-scheme: dark) {
  .theme {
    --default-bg: rgb(35, 35, 35);
    --default-text: rgb(89 255 66);
    --default-border: blue;
    --default-link: #1aff00;
  }
}

body {
  width: 100%;
  margin: 0 auto;
  text-shadow: #858ebc -2px 2px 8px;
  color: var(--default-text);
  font-size: var(--default-font);
}

#main {
  background-color: var(--default-bg);
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
  overflow-x: scroll;
}

.overlay {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  background-color: #ffffff08;
  box-shadow: 0px 9px 15px 10px #ffffff08;
  z-index: 1000;
}

.site {
  padding: 16px;
}

a {
  color: var(--default-text);
}

sub {
  margin: -1px 8px;
}