html {
  --primary: #f3f3f3;
  --secondary: #222222;
  --tertiary: #666;
  --outline: #ffffff;
  --highlight: goldenrod;
}

@media (prefers-color-scheme: dark) {
  html {
    --primary: #222222;
    --secondary: #f3f3f3;
    --tertiary: #CCC;
    --outline: #121212;
  }
}

html, body {
  margin: 0;
  padding: 0;
  font-family: Futura, 'Franklin Gothic', Helvetica, Arial, sans-serif;
}

db-bases,
db-batter,
db-controls,
db-field,
db-game,
db-outs,
db-score,
db-scoreboard {
  display: block;
}

.box {
  box-sizing: border-box;
  background: var(--primary);
  color: var(--secondary);
  margin: 5px auto 0;
  padding: 10px;

  &:first-child {
    margin-top: 0;
  }
}

.button {
  cursor: pointer;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 10px 10px;
  border: 0;
  background: var(--secondary);
  color: var(--primary);
  font-weight: bold;
  text-transform: uppercase;
  transition: background 1s, color 1s;
}

.button:hover {
  background: var(--primary);
  color: var(--secondary);
}