:root {
  /* colors */
  --text-color: #000000;
  --background-color: #ffffff;

  /* layout */
  --content-width: 1080px;

  /* typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --line-height: 1.5;

  /* misc */
  color-scheme: dark light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --background-color: #000000;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
  line-height: var(--line-height);
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}

header,
main,
footer {
  margin: 0 auto;
  max-width: var(--content-width);
  padding: 3rem 1rem;
}

main {
  flex-grow: 1;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}