body {
    /*background-color: rgb(15, 23, 42); !* Tailwindcss neutral-950 *!*/
    background-color: rgb(24, 24, 27);
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 525px;
    height: 300px;
    margin: -263px;
    float: left;
    perspective: 1000px;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);

    transition: transform 1s;
    transform-style: preserve-3d;
}

/*.card:hover .content,*/
.flipped {
/*#detect-click:checked .content {*/
    transform: rotateY( 180deg ) ;
    transition: transform 1s;
}

/*.card:hover body {*/
/*    background-color: rgb(248, 250, 252);*/
/*    !*transition: transform 1s;*!*/
/*}*/

.front,
.back {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url("images/front.png");
    background-size: cover;
    backface-visibility: hidden;
}

.back {
    /*background: #03446A;*/
    background: url("images/back.png");
    background-size: cover;
    color: white;
    transform: rotateY( 180deg );
}