body {
    --board-size: 55px;
    --colors-size: 55px;
}

#board {
    border-spacing: 5px;
}

#board,
#colors {
    border-collapse: separate;
    margin: 1em auto;
}

#board td {
    width: var(--board-size);
    height: var(--board-size);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-secondary-color);
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    transition: background-color 1s, border-color 1s;
}

#board tbody td:nth-last-child(2) {
    background-color: var(--bs-success-bg-subtle);
    border: 1px solid var(--board-size);
    border-radius: var(--board-size);
    color: var(--bs-body-bg);
}

#board tbody td:nth-last-child(2):not(:empty) {
    background-color: var(--bs-success);
}

#board tbody td:last-child {
    background-color: var(--bs-warning-bg-subtle);
    border: 1px solid var(--board-size);
    border-radius: var(--board-size);
    color: var(--bs-body-bg);
}

#board tbody td:last-child:not(:empty) {
    background-color: var(--bs-warning);
}

#colors td {
    width: var(--colors-size);
    height: var(--colors-size);
    border-radius: var(--colors-size);
}

#game button,
#game select {
    font-size: 18px;
}

#game select {
    width: 50px;
}

@media (max-width: 400px) {
    body {
        --board-size: 45px;
        --colors-size: 45px;
    }
}