*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    background: #606c88;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3f4c6b, #606c88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

main{
    width: 100%;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tabuleiro-container{
    display: flex;
    gap: 15px;

}

.tabuleiro-collumn{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tabuleiro-collumn button{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 5px;
    border: none;
    box-shadow: 7px 7px 10px -3px #0f0f0f91;

    transition: transform 0.6s;
    transform-style: preserve-3d;

    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}


.tabuleiro-collumn button > span{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    position: absolute;
    
    
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-size: 3.5rem;

    background: #2193b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.tabuleiro-collumn button > i{
    position: absolute;
   
    font-size: 5rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
}

.game_over{
    width: 100%;
    height: 100%;
    visibility: hidden;
    text-align: center;
    
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;

    background-color: rgba(0, 0, 0, 0.911);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

@keyframes hideMSG {
    0%{
        visibility: visible;

        opacity: 1;
        
    }

    50%{
        visibility: visible;
        opacity: 0.5;
    }

    100%{
        visibility: hidden;
        opacity: 0;
    }
    
}

@keyframes showMSG {
    0%{
        visibility: hidden;
        opacity: 0;
    }

    50%{
        visibility: visible;
        opacity: 0.5;
    }

    100%{
        visibility: visible;
        opacity: 1;
    }
    
}


.game_over h2{
    color: white;
    padding: 10px;
    display: inline-block;
}
.game_over button{
    padding: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #176a86;
    color: black;

    transition: .3s ease;
}

.game_over button:hover{
    background-color: #25b7e7;
}

footer{
    padding: 2px 0;
    text-align: center;

}

footer a{
    text-decoration: none;
    color: #6dd5ed;
}


@media only screen and (max-width: 500px){
    .tabuleiro-collumn button{
        width: 80px;
        height: 80px;
    }

    .tabuleiro-collumn button > i{
        font-size: 3.6rem;
    }

    .tabuleiro-collumn button > span{
        font-size: 3rem;
    }

    footer p, a{
        font-size: 1.3rem;
    }

    .game_over h2{
        font-size: 1.5rem;
    }
}