.jogo-da-memoria {
    width: 1080px;
    position: absolute;
    top: 750px;
    text-align: center;
    opacity: 0;
}
.jogo-da-memoria.fadeIn {
    animation: fadeIn 1.5s forwards;
}
.cards {
    width: 310px;
    height: 310px;
    display: inline-block;
    position: relative;
    cursor: pointer;    
}

.cards > img {
    display: none;
    position: absolute;
}

.cards > img.show {
    display: block;
}

img.resultado {
    z-index: 1;
}

img.visivel {
    z-index: 2;
}

img.escondido {
    z-index: 3;
}

img.escondido.fadeOut,
img.visivel.fadeOut {
    display: block;
    animation: fadeOut .5s forwards;
}


#titulo-1 {
    width: 800px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 440px;
    align-items: center;
}

#titulo-1 p {
    margin: 0;
    font-size: 37px;
    text-align: center;
    font-family: "Rubik Regular";
}

#titulo-1 p strong {
    font-family: "Rubik Bold";
}

#btn-jogar,
#btn-vamosla {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 570px;
    cursor: pointer;
}
#btn-jogar {
    width: 420px;
}
#btn-vamosla {
    width: 584px;
}
#btn-vamosla.hide,
#btn-jogar.hide {
    display: none;
}

#titulo-2 {
    width: 600px;
    height: 240px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 395px;
    align-items: center;
    display: none;
    justify-content: center;
}

#titulo-1,
#titulo-2,
#titulo-2 {
    display: none;
}

#titulo-1.show,
#titulo-2.show,
#titulo-3.show {
    display: flex;
}

#titulo-2 > p {
    font-size: 100px;
    text-align: center;
    margin: 0;
    font-family: "Rubik Bold";
}

#titulo-2 p.piscar {
    animation: piscar .5s linear 10;
}

#titulo-3 {
    width: 800px;
    height: 190px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 390px;
    align-items: center;
    display: none;
    justify-content: center;
}

#titulo-3 > p {
    font-size: 66px;
    font-family: "Rubik Bold";
}

.textoTopo {
    width: 1080px;
    font-size: 60px;
    color: #000;
    text-align: center;
    font-family: "Rubik Regular";
    display: none;
    opacity: 0;
    margin: 0;
}

#fase1.show {
    display: block;
    animation: fadeIn 1s forwards;
}

#fase2Win.show,
#fase2Lose.show {
    display: block;
    animation: zoomIn .5s forwards;
}

#fase2Win > strong,
#fase2Lose > strong {
    font-size: 130px;
}

.textoTopo strong {
    font-family: "Rubik Bold";
}

.container-texto-topo {
    width: 1080px;
    height: 320px;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    top: 0;
    
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
} 

@keyframes fadeOut {
    100% {
        opacity: 0;
    }
}

@keyframes piscar {
    0%{
        color: #000;
    }
    50% {
        color:#CB001A
    }
    100%{
        color: #000;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}