:root {
  --bg-light: #f7eece;
  --bg-dark: #36414f;

  --text-light: #010202;
  --text-dark: #e2e2e2;

  --link-light: #367588;
  --link-dark: #88d8c0
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 1em auto;
  max-width: 41em;
  padding: 0 1em;
  color: var(--text-dark);
  background-color: var(--bg-dark);
  font-family: Karma, serif;
  font-size: 20px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
}

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

footer {
  margin: auto 0 1em;
  text-align: center;
}

footer p {
  font-size: 0.75em;
}

ul {
  list-style-type: square;
}

@media (prefers-color-scheme: light) {
  body {
    color: var(--text-light);
    background-color: var(--bg-light);
  }

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