*{              /*Zerando margin e padding*/
    margin: 0; 
    padding: 0;
}

body{
    background-color: #0011ff;  /*Cor de Fundo*/
    text-align: center;
    
}

#container{ /*Div Id Container*/
    width: 556px; /*Largura do container*/
    height: 390px; /*altura do container*/
    border: 1px solid #111; /*borda do container*/
    position: relative; /**/
    margin: 70px auto;  /*Distânciamento do topo da página 10 px e distânciamento de largura automatico*/
    border-radius: 10px; /*Arrendontamento das bordas*/
    background-color: #00aeffa6; /*Cor de fundo do container*/
        
}
.card{ /*Configuração comum para todos os cards*/
    width: 100px; /*Largura dos cards*/
    height: 180px;   /*Altura dos cards */
    position: absolute; /*importante para depois fazer a manipulaçãos dos cards usando JavaScript*/
    border-radius: 5px; /*arredondamento das bordas dos cards*/
    border: solid; /*Sugimento das bordas*/
    perspective: 600px;
}


.face{
    width: 100%; /*Largura de preenchimento */
    height: 100%; /*Altura de preenchimento*/
    position: absolute; /*Para uma melhor manipulação em JavaCript*/
    border-radius: 5px; /*Borda do preenchimento*/
    transition: all 1s;
    backface-visibility: hidden;

}
.back{ /*Imagem de Fundos das cartas*/
    background: url("../img/verso.png");
}

.back.flipped{      /*Rotação do verso da carta em 180ª*/
    transform: rotateY(180deg);
}

.front{
    transform: rotateY(-180deg);
}

.front.flipped{
    transform: rotateY(0deg);
}

.face.flipped.match{ /*card match will stay this color*/
    box-shadow: 0 0 10px #0f0;
}

#modalGameOver{
    margin-top: -600px;
    padding-bottom: 100px;
    position: relative;
    z-index: -2;
}

#imgGameOver{
    margin-top: 100px;
    width: 300px;
    

}

#imgMatchSign{
    position: relative;
    top: 220px;
    transition-property: top, opacity;
    transition-duration: 3s;
    opacity: 1;
    z-index: -2;
}

.card{
    transition: all 0.3s; /*efect card after hover*/

}

.card:hover{
    box-shadow: 1px 1px 10px #FFFFFF;
    transition: 0.3s;
    transform: scale(1.2);
    width: 140px;
    height: 230px;
    z-index: 10;
}

.main-ata{
    padding-top: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.main-ata .frase{
    color: aliceblue;
    font-size: 25px;
}

.main-footer{
    padding-top: 30px;
    display: flex;
    justify-content: left;
    align-items: left;
    padding-bottom: 20px;
    padding-left: 20px;

}

.main-footer .logoGitHub{
    margin-bottom: 15px;
    padding-right: 10px;
}

.main-footer .titleGitHub{
    color: aliceblue;
    font-size: 15px;
}


.main-footer .logoli{
    margin-bottom: 15px;
    padding-right: 10px;
    padding-left: 10px;
}

.main-footer .titleli{
    color: aliceblue;
    font-size: 15px;
}