:root {
  --color-basswood: rgb(255, 238, 0);
  --color-blackgum: rgb(105, 42, 169);
  --color-buckeye: rgb(255, 117, 31);
  --color-fraserfir: rgb(0, 96, 165);
  --color-hemlock: rgb(117, 181, 186);
  --color-hickory: rgb(123, 91, 58);
  --color-silvermaple: rgb(192, 0, 0);
  --color-yellowbirch: rgb(108, 251, 95);
  --color-background: rgba(230, 255, 179, 1);
  --color-remove: red;
  --color-button: #274e37;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    padding-bottom: 40px;
}
h1 {
    text-align: right;
}
footer {
    border-top: thin solid black;
    margin-top: 3em;
    font-size: 12px;
}
.indent {
    width: 10%;
}
button {
    width: 75%;
    text-align: left;
    margin-bottom: 5px;
    padding: 5px;
    font-size: 14px;
    touch-action: manipulation;
    border: thin solid var(--color-button);
    border-radius: 0.25rem;
    background-color: var(--color-background);
    color: var(--color-button);
}
button:disabled, button[disabled] {
    filter: saturate(0);
}
.indented button {
    width: 65%;
}
button.remove {
    width: 10%;
    color: var(--color-remove);
    text-align: center;
    border: 1px solid var(--color-remove);
    border-radius: 0.25rem;
    background-color: white;
}
button.switch {
    background-color: lavender;
    width: auto;
}
#buttons {
    margin: 1em 0;
}
span.number, span.checkbox, span.score, span.count {
    width: 25px;
    padding-top: 3px;
    touch-action: manipulation;
}
span.score, span.count {
    text-align: right;
}
.row {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}
.row-heading {
    justify-content: space-between;
    font-family: Helvetica, Arial, sans-serif;
}
.row-heading h2, .row-heading h3 {
    flex-grow: 5;
}
.row-heading .score {
    font-size: 20px;
    margin: 13px 0;
    font-weight: bold;
}
.row-score {
    justify-content: space-between;
    padding: 0.5em 0;
    border-bottom: thin dotted #333;
}
.row-score:last-child {
    border-bottom: none;
}
.count::before {
    content: "\D7";
}
.row-total {
    justify-content: space-between;
    padding: 0.5em 0;
    font-size: 24px;
    margin-top: 15px;
    font-weight: bold;
    border-top: 2px solid #000;
}
.color-basswood {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-basswood) 100%);
}
.color-blackgum {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-blackgum) 100%);
}
.color-buckeye {
    background: var(--color-background);
    background: linear-gradient(90deg,var(--color-background) 20%, var(--color-buckeye) 100%);
}
.color-fraserfir {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-fraserfir) 100%);
}
.color-hemlock {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-hemlock) 100%);
}
.color-hickory {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-hickory) 100%);
}
.color-silvermaple {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-silvermaple) 100%);
}
.color-yellowbirch {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-yellowbirch) 100%);
}
.basswood {
    background-color: var(--color-basswood);
}
.blackgum {
    background-color: var(--color-blackgum);
}
.buckeye {
    background-color: var(--color-buckeye);
}
.fraserfir {
    background-color: var(--color-fraserfir);
}
.hemlock {
    background-color: var(--color-hemlock);
}
.hickory {
    background-color: var(--color-hickory);
}
.silvermaple {
    background-color: var(--color-silvermaple);
}
.yellowbirch {
    background-color: var(--color-yellowbirch);
}
#bottom-pane {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: 40px;
  padding: 0 16px;

  background: #333;
  color: white;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 1000;
}