/* body {
    background-color: black;
}*/

canvas {
    width: 379px;
    height: 524px;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    margin: 0;
    background-color: #EFEDE7;
}

section {
    margin: auto;
}


/*la carte*/
.card {
    width: 379px;
    height: 524px;
    border-radius: 25px;
    perspective: 1000px;
    position: relative;
    filter: drop-shadow(#9e9e9e 0px 0px 14px);
}

.card:hover {
    cursor: pointer;
}

.card .front,
.card .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}


.card .front {
    /* background: url('https://cdn.glitch.global/52d20d07-28d2-4f9c-a77b-8b67304e6e31/misprintMTG.png?v=1710101935949') no-repeat center center;
    background-size: cover; */
    border-radius: 25px;
}


.card .back {
    background: url('back.png') no-repeat center center;
    background-size: cover;
    transform: rotateY(180deg);
    border-radius: 25px;
}

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

.card.flipped .back {
    transform: rotateY(360deg);
}