.count-colors-container {
    display: flex;
    align-self: flex-start;
    margin-top: 40PX;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 85%;
    width: 90%;
}

.color-grid-cell {
    display: inline-block;
    width: 45px;
    /* or any size */
    height: 45px;
    /* or any size */
    border: 1px solid #ccc;
    font-size: clamp(1em, 1.6em, 22px);
    padding: 3px;
    /* or any style */
    text-align: center;
    line-height: 30px;
    /* match height for vertical center */
}
.color-options-container {
    margin-top: 20px;
}

.color-option {
    width: 70px;
    height: 70px;
    border: 20px solid black;

    cursor: pointer;
    transition: transform 0.2s ease;
}

.color-option-wrong {
    border-color: red;
}

.shake {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}