:root {
  color-scheme: light dark; /* both supported */

  --dark-bg-color: #121212;
  --dark-fg-color: aliceblue;
  --light-bg-color: #aliceblue;
  --light-fg-color: #121212;

  --dark-code-bg: #2f2f2f;
  --light-code-bg: #e0eefb;

  --dark-example-bg: #312f43;
  --light-example-bg: #d6f9ed;
}

body {
  background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
  color: light-dark(var(--light-fg-color), var(--dark-fg-color));

  margin: 16px;
}

section {
  max-width: 80ch;
}

.command {
  font-size: 1rem;
  padding: 8px 0;
}

.command span {
  background-color: light-dark(var(--light-code-bg), var(--dark-code-bg));
  border-radius: 8px;
  font-family: monospace;
  padding: 8px;
}

.inline-code {
  background-color: light-dark(var(--light-code-bg), var(--dark-code-bg));
  border-radius: 4px;
  font-family: monospace;
  padding: 2px 4px;
}

.docs {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 16px;
  padding: 8px 0;
}

.docs p:first-child {
  margin-top: 0;
}

.subcommand {
  border-left: 1px solid light-dark(var(--light-fg-color), var(--dark-fg-color));
  margin: 16px 0;
  padding-left: 16px;
}

.example {
  background-color: light-dark(var(--light-example-bg), var(--dark-example-bg));
  font-family: monospace;
  font-size: 1rem;
  padding: 8px;
  margin-bottom: 4px;
}