/* plain dev page: only the answer is big and the elements are coloured */
:root {
  --bg: #fff;
  --fg: #000;
  --muted: #555;
  --fire: #c00;
  --water: #0055cc;
  --thunder: #a07000;
  --ice: #008a99;
  --dragon: #7a1fa2;
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--fg);
  font: 16px "Times New Roman", Times, serif;
  padding-block: 8px;
  padding-inline: 16px;
}

input, button { font-size: 1.25rem; }

#out td { font-size: 1.75rem; padding-block: 4px; }
#out th {
  text-align: left;
  vertical-align: baseline;
  padding-right: 1em;
  color: var(--muted);
  font-weight: normal;
  white-space: nowrap;
}

small { color: var(--muted); }

.Fire { color: var(--fire); }
.Water { color: var(--water); }
.Thunder { color: var(--thunder); }
.Ice { color: var(--ice); }
.Dragon { color: var(--dragon); }