:root {
  --page-background: #444;
  --background-light: #ffe;
  --foreground-light: #ff7;
  --foreground-dark: #111;
}
* { 
  margin: 0;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 100%;
  color: var(--foreground-light);
  background: var(--page-background);
}
body > * {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}
main * + * {
  margin-top: 1.5em;
}
form > div {
  display: flex;
  gap: 1em;
  align-items: baseline;
}
form > div * + * {
  margin-top: 0;
}
form > div > label {
  width: 10em;
}
form > div input {
  flex-grow: 1;
}
input {
  font-family: inherit;
  border: 1px solid var(--foreground-dark);
  border-radius: 0.5em;
  padding: 0.5em;
  display: block;
  color: unset;
  background: unset;
}
*:focus-visible {
  outline-width: 3px;
  outline-offset: 2px;
  outline-style: solid;
}
input[type=submit], button {
  border: none;
  color: var(--foreground-light);
  background: var(--foreground-dark);
  padding: 0.5em 1em;
  border-radius: 1em;
}
form, div.app, section {
  color: var(--foreground-dark);
  background: var(--background-light);
  border: none;
  border-radius: 1em;
  padding: 1em;
}
nav {
  display: flex;
  gap: 1em;
}
header a {
  color: inherit;
}