main #game table {
    margin: 1em auto;
    border-spacing: 0.3em;
    border-collapse: separate;
}

main #game td {
    border: 2px solid var(--bs-dark-bg-subtle);
    text-transform: uppercase;
    --size: 60px;
    width: var(--size);
    height: var(--size);
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}

#game td:not(:empty) {
    border-color: var(--bs-secondary-color);
}

#keyboard {
    text-align: center;
}

#keyboard div {
    margin-bottom: 0.5em;
}

#keyboard div button {
    margin: 2px;
    font-size: 20px;
    width: 32px;
    padding: 5px;
}

#keyboard div button[data-value="Enter"],
#keyboard div button[data-value="Backspace"] {
    width: 112px;
}

#game td[data-animation="pop"] {
    animation-name: PopIn;
    animation-duration: 100ms;
}

#game td[data-animation="flip-in"] {
    animation-name: FlipIn;
    animation-duration: 200ms;
    animation-timing-function: ease-in;
}

#game td[data-animation="flip-out"] {
    animation-name: FlipOut;
    animation-duration: 200ms;
    animation-timing-function: ease-in;
}

#game td[data-animation="shake"] {
    animation-name: Shake;
    animation-duration: 600ms;
}

#game td[data-animation="bounce"] {
    animation-name: Bounce;
    animation-duration: 1000ms;
}

@keyframes Shake {

    10%,
    90% {
        transform: translateX(-1px);
    }

    20%,
    80% {
        transform: translateX(2px);
    }

    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }

    40%,
    60% {
        transform: translateX(4px);
    }
}

@keyframes Bounce {

    0%,
    20% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(5px);
    }

    60% {
        transform: translateY(-15px);
    }

    80% {
        transform: translateY(2px);
    }

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

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

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

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

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

@keyframes PopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}

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

    #keyboard div button {
        margin: 0;
        padding: 0;
        font-size: 1rem;
        width: 34px;
        height: 34px;
    }
}