:root {
  --ink: #171717;
  --paper: #faf8f3;
  --panel: #ffffff;
  --line: #dedbd3;
  --accent: #16645a;
  --warm: #a83f2a;
  --radius: 8px;
}
body { margin: 0; }
body { font-family: ui-serif, Georgia, Cambria, serif; }
body { color: var(--ink); }
body { background: var(--paper); }
body { line-height: 1.7; }
main { max-width: 820px; }
main { margin: 0 auto; }
main { padding: 3rem 2rem 5rem; }
h1 { font-size: 3rem; }
h1 { line-height: 1; }
h2 { margin-top: 2rem; }
h2 { border-top: 1px solid var(--line); }
h2 { padding-top: 1.2rem; }
button { border: 1px solid var(--ink); }
button { background: var(--ink); }
button { color: white; }
button { padding: .72rem 1rem; }
button { margin: .3rem .5rem .3rem 0; }
button { border-radius: var(--radius); }
button { font-family: inherit; }
button { cursor: pointer; }
button:hover { background: var(--accent); }
button:hover { border-color: var(--accent); }
a { color: var(--accent); }
ul { border: 1px solid var(--line); }
ul { background: var(--panel); }
ul { padding: 1rem 1rem 1rem 2rem; }
ul { border-radius: var(--radius); }
.tally-card { border: 1px solid var(--line); }
.tally-card { background: var(--panel); }
.tally-card { padding: .25rem 1.2rem 1.2rem; }
.tally-card { margin: 1rem 0; }
.tally-card { border-radius: var(--radius); }
.tally-card h3 { color: var(--warm); }