*{
    margin: 0;
    padding: 0;
}
/* main css file for game board  */
body{
    background-image: url(./images/cherry\ blossom\,anime\ landscape\,scenic\,street\,sky.jpg);
    height: 100vh;
    width: 100vw;
    background-repeat: no-repeat;
    background-size: cover;
}

.sboard{
    display: flex;
    position: absolute;
    top: 4%;
    left: 30%;
}

.sboard h2{
    margin-left: 7px;
    width: 36px;
    height: 34px;
    background: white;
    border-radius: 3px;   
    text-align: center; 
    box-shadow: 3px 2px 5px 5px rgba(123,232,231,0.98);
}

.sboard h1{
    font-size: 31px;
    background: brown;
    border-radius: 6px;
    width: 140px;
    margin-left: 119px;
    padding-left: 4px;
}
.memory-game{
    width: 758px;
    height: 635px;
    /* border: 2px solid rgba(123,232,231,0.98); */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background-color: rgba(123,123,123,0.89);
    top: 90px;
    left: 385px;
    perspective: 1000px;
    box-shadow: 3px 2px 5px 6px rgba(123,232,231,0.98);
    /* margin: 10px; */
}

.card{
    width: 168px;
    height: 145px;
    /* border: 2px solid black; */
    margin: 4px 9px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
}

.card:active{
    transform: scale(0.93);
    transition: transform .3s;
}

.card img{
    position: absolute;
    width: 100%;
    height: 100%;
}

.front, .back{
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 4px;
}

.back{
    transform: rotateY(180deg);
}

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