html, body {
  font-family: sans;
}

body::after {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  content: "light mode";
  color: #eee;
}

header {
  max-width: 1280px;
}

main {
  display: flex;
  flex-flow: row wrap;
  gap: 0 3em;
  max-width: 1280px;
}

div#needs {
  max-width: 500px;
}

div#preparation {
  max-width: 720px;
}

table {
  width: 100%;
  min-width: 1280px;
  margin-bottom: 1em;
}

th, td {
  padding: 0.5em;
}

table, th, td {
  border: 1px solid;
  background: whitesmoke;
  text-align: left;
}

th {
  background: lightcyan;
  width: 20%;
}

td.filler {
  background: white;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: whitesmoke;
  }

  body::after {
    content: "dark mode";
    color: #333;
  }

  a {
    color: cyan;
  }

  h1, h2 {
    color: coral;
  }

  table, th, td {
    background: #333;
    color: white;
  }

  th {
    background: #055;
  }

  td.filler {
    background: #111;
  }
}