/*centers our test div which get's flipped */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

/* our *coin* i.e. flashcard */
.flashcard {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    cursor: pointer;
}

/* gotta describe the front and back of the coin. 
i need to point this hierarchical definition From Type to Type to Type */
.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility:hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
   
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 1.6s;
    font-size: 20px;
}

.front {
    transform: rotateY(0deg);
     background-color: red;
}

.back {
    transform: rotateY(180deg);
     background-color: green;
}