body {
  font-family:
    "Noto Sans", Calibri, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: #d4d8cd;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-display: block;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", sans-serif;
}
main {
  background-color: rgb(253, 255, 254);
  max-width: 100%;
}

span {
  font-weight: 600;
}
p,
ul,
ol,
li,
details {
  font-size: 1em;
  line-height: 2.5em;
}

section {
  padding-bottom: 3em;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  width: 90%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

ul,
ol {
  margin: inherit;
  padding: inherit;
}

li {
  margin-inline-start: 2em;
  padding-inline-start: 2em;
}

aside {
  font-size: 0.9em;
  font-family: "Courier New", Courier, monospace;
}

@media only screen and (min-width: 400px) {
  section {
    padding: 0.5em 2em;
    padding-bottom: 3em;
    width: 80ch;
  }
}

#subheading {
  color: #595959;
}

.card {
  border-radius: 1em;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #282a28;
  }
  main {
    background-color: rgb(55, 44, 44);
    color: white;
  }
  a {
    color: #72c6d5;
  }
  :visited {
    color: #c4b6dd;
  }
  #subheading {
    color: #dddddd;
  }
}