main #game table {
    border-collapse: collapse;
    margin: 0 auto;
}

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

td.blocked {
    background-color: var(--bs-tertiary-color);
}

td.blocked:hover {
    background-color: var(--bs-tertiary-bg);
}

td.show {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: bold;
}

td.flag {
    background-color: var(--bs-tertiary-bg);
    color: black;
}

.b1,
.b2,
.b3,
.b4,
.b5,
.b6,
.b7,
.b8 {
    background-color: white;
}

.b1 {
    color: blue;
}

.b2 {
    color: green;
}

.b3 {
    color: red;
}

.b4 {
    color: darkblue;
}

.b5 {
    color: maroon;
}

.b6 {
    color: orange;
}

.b7 {
    color: magenta;
}

.b8 {
    color: salmon;
}

@media (max-width: 400px) {
    main #game td {
        --size: 34px;
        font-size: 18px;
    }
}