:root {
  --color-ash: rgba(143, 159, 155, 1);
  --color-blackalder: rgba(64, 128, 172, 1);
  --color-crabapple: rgba(154, 101, 102, 1);
  --color-goatwillow: rgba(227, 178, 101, 1);
  --color-moorbirch: rgba(109, 178, 85, 1);
  --color-sessileoak: rgba(65, 102, 99, 1);
  --color-background: rgba(230, 255, 179, 1);
  --color-remove: red;
  --color-button: #274e37;
}

body {
    font-family: Helvetica, Arial, sans-serif;
}
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);
}
.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;
}
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-ash {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-ash) 100%);
}
.color-blackalder {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-blackalder) 100%);
}
.color-crabapple {
    background: var(--color-background);
    background: linear-gradient(90deg,var(--color-background) 20%, var(--color-crabapple) 100%);
}
.color-goatwillow {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-goatwillow) 100%);
}
.color-moorbirch {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-moorbirch) 100%);
}
.color-sessileoak {
    background: var(--color-background);
    background: linear-gradient(90deg, var(--color-background) 20%, var(--color-sessileoak) 100%);
}
.ash {
    background-color: var(--color-ash);
}
.blackalder {
    background-color: var(--color-blackalder);
}
.crabapple {
    background-color: var(--color-crabapple);
}
.goatwillow {
    background-color: var(--color-goatwillow);
}
.moorbirch {
    background-color: var(--color-moorbirch);
}
.sessileoak {
    background-color: var(--color-sessileoak);
}