/**

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

*/

body{
    height:100vh;
    background-color: aqua;
    display:flex;
}

.reset-btn{
    cursor:pointer;
}
/**
.btn {
    background-color:transparent;
    
    color:#0f0d02;
    font-family:"open sans";
    font-weight:500;
    line-height:1;
    margin-top:1.2em;
    color:rgb(75, 12, 64);
    font-size:30px;    
    
}

.reset-btn{
    
    
    background:rgb(211, 147, 147);
}

*/
.content2{
    max-width:50px;
    margin:0 auto;
}


.memory-game {
    width:1040px;
    height:740px;
    margin:auto;
    border:1px solid lightcoral;
    display:flex;
     flex-wrap:wrap;
    perspective:1000px;

}
.memory-card {
    width:calc(20% - 7px);
    height:calc(33.33% - 10px);
    margin:3px;
    position:relative;
    transform:scale(1);
    transform-style:preserve-3d;
    transition:transform .5s;
    }
    .memory-card:active{

        transform:scale(.97);
        transition:transform .2s;
    }

    .memory-card.flip{
        transform:rotateY(180deg);
    }
.front-face,
.back-face {
    width:100%;
    height:100%;
    padding:20px;
    position:absolute;
    border-radius:5px;
    background:blue;
    backface-visibility:hidden;
}

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