style.css

img.card {
    max-height: 300px;
    max-width: 100%;
}

table {
    border-spacing: 0;
}

th,
td {
    cursor: pointer;
    text-align: center;
}

#numberOfCards {
    max-width: 100px;
}

label,
input,
select {
    display: inline-block;
    vertical-align: middle;
}

i {
    color: #888;
}

.selected i {
    color: #000;
}

#thisCardIs h2 span,
#thisCardIs p:first-of-type label span,
#thisCardIs p:first-of-type,
body.two #removeCardFromHand span:nth-of-type(1),
#removeCardFromHand span:nth-of-type(2),
label.replaced,
label.only,
#reset {
    display: none;
}

body.zero #thisCardIs h2 span:nth-of-type(1),
body.one #thisCardIs h2 span:nth-of-type(2),
body.two #thisCardIs h2 span:nth-of-type(3),
body.one #thisCardIs p:first-of-type,
body.two #thisCardIs p:first-of-type,
body.one #thisCardIs p:first-of-type label span:nth-of-type(1),
body.two #thisCardIs p:first-of-type label span:nth-of-type(2),
body.two #removeCardFromHand span:nth-of-type(2),
body.one label.only,
body.two label.only,
body.one label.replaced,
body.two label.replaced {
    display: initial;
}

div.play {
    display: none;
}

label.cardColour {
    display: none;
}

span.colour {
    width: 18px;
    display: inline-block;
    text-align: center;
}

.selected {
    background-color: #ff0;
}

@media only screen and (min-width: 1016px) {
    body {
        width: 1000px;
        margin-left: calc(50% - 500px);
    }
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background: black;
        color: white;
    }

    img {
        color: #fff;
    }
}