.flip-card {
    background-color: transparent;
    width: 190px;
    height: 254px;
    perspective: 1000px;
    font-family: sans-serif;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

.flip-card:hover {
    cursor: pointer;
}

.flip-it {
    transform: rotateY(180deg);
    cursor: not-allowed;
}

.matched {
    border: 3px solid seagreen;
    border-radius: 1rem;
    background-color: seagreen;
    .flip-card-back {
        border: none;
    }
}

.flip-card-front, .flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid deepskyblue;
    border-radius: 1rem;
}

.flip-card-front {
    background: url("/images/card.jpg");
}

.flip-card-back {
    color: white;
    font-size: 60px;
    transform: rotateY(180deg);
}