:root {
  --background: #fffbff;
  --text-color: #201a1b;
  --color-primary: var(--text-color);
  --color-text-links: #1565c0;
  --color-text-visited-secondry: #6a1b9a;
  --font-size-base: clamp(16px, 1rem + 0.6vw, 22px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #201a1b;
    --text-color: #ece0e0;
    --color-primary: rgb(255 255 255 / 0.9);
    --color-text-links: #90caf9;
    --color-text-visited: rgb(255 255 255 / 90%);
  }
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  background-color: var(--background);
  color: var(--color-primary);
  overflow-y: scroll;
  hyphens: auto;
  line-height: 1.5em;
  font-size: var(--font-size-base);
}

a {
  color: var(--color-text-links);
  text-decoration: none;
}

main {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 1em;
}

a:visited {
  color: var(--color-text-visited-secondry);
}