* { border: 0; padding: 0; margin: 0; }
body {
    background: whitesmoke;
    font-family: sans-serif;
    padding: 5px;
}
h1 {
    text-align: center;
    padding: 5px 10px;
}
form#game {
    display: grid;
    grid-template-columns: 140px auto;
}
table {
    width: 100%;
    table-layout: fixed;
}
table tr th {
    text-transform: capitalize;
}
table tr td {
    font-size: 12pt;
    line-height: 16pt;
}
table tr td.running-total {
    text-align: right;
}
table tr td.new-score {
    font-size: 10pt;
    color: gray;
    padding-left: 10px;
}
input {
    width: calc(100% - 20px);
    margin: 2px 5px;
    padding: 2px 5px;
}
input[type="submit"] {
    width: calc(80% - 20px);
    margin: 20px 20px 5px 10px;
    padding: 5px 5px;
}
input[type="submit"]:first-of-type {
    margin-left: 10%;
}
#unicode-card {
    font-size: 150pt;
}
#unicode-card.color0,
#unicode-card.color3 {
    color: black;
}
#unicode-card.color1,
#unicode-card.color2 {
    color: crimson;
}
#card {
    font-size: 48pt;
}
.game {
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 880px) {
    form#game {
        display: grid;
        grid-template-columns: 60px auto;
    }
    #unicode-card {
        font-size: 60pt;
    }
    .scoring {
        font-size: smaller;
    }
}