table {
    margin: 0 auto;
    border-collapse: separate;
}

table div {
    cursor: default;
    text-align: center;
    position: relative;
    --cell-size: 60px;
    width: clamp(18px, var(--cell-size), 60px);
    height: clamp(18px, var(--cell-size), 60px);
    font-size: clamp(10px, 28px, 32px);
    vertical-align: middle;
    display: table-cell;
    background-color: var(--bs-primary);
    color: var(--bs-body-bg);
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes gameover {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 0.8;
    }

    60% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.4;
    }
}

@media (max-width: 400px) {
    table div {
        --cell-size: 40px;
        font-size: 20px;
    }
}