body{
    overflow-x:hidden;
}

.memory-card{
    width:126.2px;
    height:126.2px;
    box-sizing:border-box;
    position:relative;
    transform:scale(1);
    transform-style:preserve-3d;
    transition:transform .5s;
    transform-origin:center;
}

.memory-card img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.memory-card:active{
    transform:scale(0.97);
    transition:transform .2s;
}

.memory-card.flip{
    transform:rotateY(180deg);
}

.front-face{
    margin-left: -63.1px;
}

.front-face, .back-face{
    width:100%;
    height:100%;
    padding:20px;
    position:absolute;
    border:var(--bw) solid var(--bc);
    border-radius:10px;
    background:var(--h);
    backface-visibility:hidden;
}

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

#wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    align-items:center; 
    perspective:1000px;
}

.message{
    width:100%;
    position:absolute;
    will-change:opacity, visibility;
    z-index:99999999;
}

.message.hide{
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 300ms, opacity 300ms;
}

.message.show{
    visibility:visible;
    opacity:1;
    transition:visibility 0s linear 0s, opacity 300ms;
}

.text{
    height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    background:var(--pink);
    letter-spacing:0.2rem;
}