*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@font-face{
    font-family: 'terror';
    src: url(fontes/ScaryBlood.ttf);
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image:  linear-gradient(-90deg, red,black, black, red);
}

.jogoDaMemoria{
    height: 640px;
    width: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap; /*esse comando é usado para quando os itens não couberem na pagina cairem pra baixo*/
    cursor: pointer;
    perspective: 1000px; /*efeito 3d*/
}

.carta{
    height: calc(33.333% - 10px);
    width: calc(25% - 10px);
    margin: 5px;
    position: relative;
    box-shadow: 1px 1px 1px rgba(1,1,1,.3);
    cursor: pointer;
    transform: scale(1);
    transform-style: preserve-3d;/*não deixa o elemento achtado no plano*/
    transition: transform .9s;
}

.carta:active{
    transform: scale(0.97); /*para dar efeito de botão nas cartas*/
    transition: transform 0.3s;/*para dar efeito de botão nas cartas*/
}

.frenteCarta,
.costasCarta{
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    border-radius: 5px;
    background-color: red;
    backface-visibility: hidden;/*uma propriedade que tira o verso do elemento*/
}

.frenteCarta{
    transform: rotateY(180deg);
    background-image: radial-gradient(red, black);
}

/*Animação para virar a carta*/

.carta.virar{
    transform: rotateY(180deg);
}

a{
    display: flex;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    font-family: 'terror';
    color: red;
    margin-top: 20px;
}

/*Responsivo*/

@media(max-width:800px){
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image:  linear-gradient(-90deg, red,black, black, red);
    }
    
    .jogoDaMemoria{
        height: 400px;
        width: 400px;
        margin: auto;
        display: flex;
        flex-wrap: wrap; /*esse comando é usado para quando os itens não couberem na pagina cairem pra baixo*/
        cursor: pointer;
        perspective: 1000px; /*efeito 3d*/
    }
    
    .carta{
        height: calc(33.333% - 10px);
        width: calc(25% - 10px);
        margin: 5px;
        position: relative;
        box-shadow: 1px 1px 1px rgba(1,1,1,.3);
        cursor: pointer;
        transform: scale(1);
        transform-style: preserve-3d;/*não deixa o elemento achtado no plano*/
        transition: transform .9s;
    }
    
    .carta:active{
        transform: scale(0.97); /*para dar efeito de botão nas cartas*/
        transition: transform 0.3s;/*para dar efeito de botão nas cartas*/
    }
    
    .frenteCarta,
    .costasCarta{
        width: 100%;
        height: 100%;
        padding: 20px;
        position: absolute;
        border-radius: 5px;
        background-color: red;
        backface-visibility: hidden;/*uma propriedade que tira o verso do elemento*/
    }

    .frenteCarta{
        transform: rotateY(180deg);
        background-image: radial-gradient(red, black);
    }
    
    /*Animação para virar a carta*/
    
    .carta.virar{
        transform: rotateY(180deg);
    }
    
    a{
        font-size: 15px;
    }
    
}