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

body{
    height: 100vh;
    background:violet;
    background:-webkit-linear-gradient
    (to right,lightgreen, violet);
    background: linear-gradient(to right,lightgreen, violet);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

section{
    display: grid;
    /* 4 rows and 4 colums */
    grid-template-columns: repeat(4,8rem);
    grid-template-rows: repeat(4, 8rem); 

    grid-gap: 1rem;
    transition: transform 2s cubic-bezier(0,175, 0.885, 032, 1.275);
    box-shadow: black(0,0,0,0.2)0px, 5px, 15px;
    perspective: 800px;

    
}

.card{
    
    transform-style: preserve-3d; 
    position:relative;
    transform: rotateY(0deg);
    

}

.face, .back{
    width:100%;
    height:100%;
    position: absolute;
    /* unclickerable */
    pointer-events: none; 
    transform: scaleX(-1);

    
}


.back{
    
  background: white;  
  backface-visibility: hidden;
  
    
  

}

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

.restart-btn{
    margin: 10px;
    padding:3px;
    color:purple;
    size: 10px;
    background-color: lightgreen;
    border-width: 2px;

}
/* .disable{
    pointer-events: none;
} */