/* Dark theme (default) - aesthetic.computer inspired */
:root {
  --bg: rgb(0, 0, 0);
  --fg: rgb(166, 201, 208);
  --wrapper-bg: rgba(0, 0, 0, 0.8);
  --link: rgb(100, 180, 255);
  --link-visited: rgb(140, 120, 180);
  --link-hover: rgb(255, 200, 100);
  --link-active: rgb(255, 150, 200);
  --mark-color: rgb(166, 201, 208);
  --mark-bg: black;
  --hr-bg: rgb(20, 30, 40);
  --hr-border: rgb(100, 150, 180);
}

/* Light theme */
@media (prefers-color-scheme: light) {
  :root {
    --bg: rgb(250, 248, 245);
    --fg: rgb(30, 30, 30);
    --wrapper-bg: rgba(250, 248, 245, 0.9);
    --link: rgb(0, 80, 180);
    --link-visited: rgb(80, 40, 120);
    --link-hover: rgb(200, 80, 0);
    --link-active: rgb(180, 0, 0);
    --mark-color: rgb(0, 100, 120);
    --mark-bg: rgb(220, 240, 245);
    --hr-bg: rgb(220, 215, 210);
    --hr-border: rgb(180, 175, 170);
  }
}

#aesthetic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 0;
}

html {
  height: 100%;
}

body {
  font-size: 100%;
  margin: 0;
  font-family: monospace;
  background-color: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: none;
}

#wrapper {
  background: var(--wrapper-bg);
  padding: 0.5em 0.5em 0.05em 0.5em;
}

a,
a:visited:hover {
  color: var(--link);
}

a:active,
a:visited:active {
  color: var(--link-active);
}

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

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

h1,
h2 {
  font-size: 1em;
}

mark {
  color: var(--mark-color);
  background: var(--mark-bg);
}

hr {
  margin-top: 0.5em;
  width: calc(100% + 1em);
  margin-left: -0.5em;
  height: 6px;
  border-left: none;
  border-right: none;
  border-width: 2px;
  background-color: var(--hr-bg);
  border-color: var(--hr-border);
}

ol {
  padding-left: 1.8em;
  list-style-type: lower-alpha;
}