main #game table {
    margin: 0 auto;
    border-collapse: separate;
    cursor: default;
    table-layout: fixed;
    width: 100%;
}

main #game td {
    border: 1px solid var(--bs-body-color);
    font-size: 3.5rem;
    text-align: center;
}

.close {
    opacity: 0;
}

@keyframes FlipIn {
    0% {
        transform: rotateX(0);
    }

    100% {
        transform: rotateX(-90deg);
    }
}

@keyframes FlipOut {
    0% {
        transform: rotateX(-90deg);
    }

    100% {
        transform: rotateX(0);
    }
}

main td div {
    transition: opacity 2s ease-in;
    opacity: 1;
}

main td div[data-animation="flip-in"] {
    animation-name: FlipIn;
    animation-duration: 250ms;
    animation-timing-function: ease-in;
}

main td div[data-animation="flip-out"] {
    animation-name: FlipOut;
    animation-duration: 250ms;
    animation-timing-function: ease-in;
}

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