:root {
  color-scheme: light dark;
  --font-size: 15px;
  --content-margin: 3rem;
  --body-width: 600px;
}

body {
  margin: 0;
  font-family: monospace;
  font-size: var(--font-size);
}

body > * {
  max-width: min(var(--body-width), 100% - 2 * var(--content-margin));
  margin-inline: auto;
}

article {
  margin: calc(2 * var(--content-margin)) 0;
}

p {
  margin: var(--content-margin) 0;
}

img {
  max-width: 100dvi;
  height: auto;
  margin-left: min(0rem, max(0rem, 100dvi - var(--body-width)) - var(--content-margin));
}

h1 {
  font-size: calc(var(--font-size) * 1.5);
}

pre {
  margin-left: min(0rem, max(0rem, 100dvi - var(--body-width)) - var(--content-margin));
  overflow: auto;
  width: calc(100dvi + min(0rem, (var(--body-width) - 100dvi) / 2));
  font-size: calc(var(--font-size) * 0.8);
}

footer {
  font-size: calc(var(--font-size) * 0.8);
}

@media (prefers-color-scheme: light) {
  /* default style i guess? */
}

@media (prefers-color-scheme: dark) {
  body {
    color: #eeeeec;
    background-color: #2e3436;
  }
  a {
    color: #a3d8ff;
  }
  a:visited {
    color: #bbf;
  }
  a:active {
    color: red;
  }
}