* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: inherit;
  line-height: 1;
}

nav, div, fieldset {
  display: flex;
  flex-flow: column nowrap;
  padding: 0.5rem;
  gap: 0.5rem;
}

nav {
  flex-flow: row nowrap;
}

fieldset {
  display: grid;
  grid-template-columns: auto 1fr;
  flex-grow: 999999;

  overflow-x: auto;
}

fieldset > label:after {
  content: ":"; 
  pointer-events: none;
}

input[type=submit] {
  grid-column: 1 / 3;
  padding: 0.25rem;
  cursor: pointer;
}

legend {
  font-weight: bold;
}

/* Colors */

:root {
  --cl-fg: #222;
  --cl-bg-page: #eee;
  --cl-bg-block: #ddd;
  --cl-bg-input: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cl-fg: #ddd;
    --cl-bg-page: #333;
    --cl-bg-block: #222;
    --cl-bg-input: #444;
  }
}

:root {
  font-family: sans-serif;
  background: var(--cl-bg-page);
  color: var(--cl-fg);
}

nav, fieldset, table {
  background: var(--cl-bg-block);
}

input {
  border: 1px solid var(--cl-fg);
  background: var(--cl-bg-input);
}

input[type=submit]:hover, 
tr:nth-child(even) {
  background: var(--cl-bg-page);
}