/*revisar esta web https://stackoverflow.com/questions/30151213/how-to-make-a-div-element-responsive*/

body{
    background-color: purple;
    
}

#gameTable{
    display: flex;
    justify-content: center;


}

td{
    height: fit-content;
    margin: auto;
}

.box{
    font-family: Nabla;
    font-size: 600%;
    text-align: center;

    word-spacing: 25px;

    cursor: pointer;
    user-select: none;
    

}

.title{
    font-family: Nabla;
    font-size: 350%;
    display: flex;
    justify-content: center;
}

.zoom{
    animation-name: clickZoom;
    animation-duration: 200ms;
    animation-iteration-count: 1;
}

.unable{
    animation-name: unable;
    animation-duration: 150ms;
    animation-iteration-count: 1;
}

.greying{
    animation-name: greying;
    animation-duration: 500ms;
    animation-iteration-count: 1;
}

.winGreying{
    animation-name: greying;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
}

.isgrey{
    opacity: 0.5;
}

.ungrey{
    animation-name: ungrey;
    animation-duration: 500ms;
    animation-iteration-count: 1;
}

@keyframes clickZoom{
    0% {
        font-size: 600%;
    }

    50% {
        font-size: 500%;
    }

    100% {
        font-size: 600%;
    }
}

@keyframes unable{
    0% {
        translate: 0;
        transform: translateX(0%)
    }

    25% {
        translate: 10;
        transform: translateX(10%)
    }

    75% {
        translate: -10;
        transform: translateX(-10%)
    }

    100% {
        translate: 0;
        transform: translateX(0%)
    }
}

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

    100%{
        opacity: 0.5;
    }
}

@keyframes ungrey {
    0%{
        opacity: 0.5;
    }

    100%{
        opacity: 1;
    }
}