:root {
    --main-bg-color: #fafafa;
    --card-width: calc(var(--card-height) / 8.9 * 5.7);
    --card-height: 60vh;
}

@media(min-width: 400px) {
    :root {
        --main-bg-color: #fafafa;
        --card-width: calc(var(--card-height) / 8.9 * 5.7);
        --card-height: 50vh;
    }

    body {
        height: 100vh;
    }
}

* {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;

    font-family: Inter, Helvetica, sans-serif;
    background-color: var(--main-bg-color);
    overflow: hidden;
}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    perspective: 1000px;

}

.landing-container {
    max-width: 800px;
    padding: 1rem;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.landing-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.decks {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 60px;
    align-items: center;
    justify-content: center;

}

.deck-container {
    position: relative;
    z-index: 0;
    width: var(--card-width);
    height: var(--card-height);
    /*perspective: 10000000px;*/
}

.deck-container.hovered {
    z-index: 20;
    /*transform: translateZ(400px);*/
}

.deck {
    position: relative;
    width: calc(var(--card-width));
    height: calc(var(--card-height));
    transform-style: preserve-3d;
}

.landing-container .projet .deck .card {
    --rotateX: 40deg;
    --rotateY: 0deg;
    --rotateZ: 4deg;
}

.landing-container .deprime .deck .card {
    --rotateX: 40deg;
    --rotateY: 0deg;
    --rotateZ: -7deg;
}

.deck {
    z-index: 0;
}

.deck.hovered {
    z-index: 20;
}

.projet .deck.hovered .card {
    --rotateX: -10deg;
    --rotateY: -10deg;
    --rotateZ: -5deg;
    --scaling: 0.8;
}

.deprime .deck.hovered .card {
    --rotateX: -10deg;
    --rotateY: 10deg;
    --rotateZ: 5deg;
    --scaling: 0.8;
}


.deck.hovered .card {
    --rotateZ: calc((12 - var(--index)) * 2deg) !important;
    /*--transZ: calc(var(--index) * 1cm) !important;*/
    transform-origin: 50% 100% 0;
}

.card {
    position: absolute;
    transform-style: preserve-3d;
    /*backface-visibility: hidden;*/
    --rotateX: 0deg;
    --rotateY: 0deg;
    --rotateZ: 0deg;
    --scaling: 0.6;
    --transX: 0px;
    --index: 0;
    z-index: calc(100 + var(--index));
    --transY: 0;
    --transZ: 0px;
    --transition-speed: 0.2s;
    --preTransZ: 0px;
    --wait-duration: 0s;
    transform: translate3d(var(--transX, 0), var(--transY, 0), var(--preTransZ, 0))
        rotateX(var(--rotateX, 0))
        rotateY(var(--rotateY, 0))
        rotateZ(var(--rotateZ, 0))
        translateZ(var(--transZ, 0))
        scale(var(--scaling, 1.0));
    transition: all var(--transition-speed, 0.2s) ease-in-out var(--wait-duration, 0s);
    width: var(--card-width);
    height: var(--card-height);
    /*filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}



.deck.hovered .card {
    /*filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05)*/
}

.card .back {
    background: linear-gradient(135deg, #ffcc00, #ff8800);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card .front {
    position: absolute;
    top: 0;
    left: 0;
    rotate: 0 1 0 180deg;
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #91833e, #227c34);
    border: 1px solid #ca6a00;
    border-radius: 10px;
}

.projet .deck .card .back {

    background: linear-gradient(135deg, #ffcc00, #ff8800);
    border: 1px solid #ca6a00;
    border-radius: 10px;


}

.deprime .deck .card .back {
    background: linear-gradient(135deg, #4b87ba, #6893d1);
    border: 1px solid #40739e;
    border-radius: 10px;
}



#ghost-deck .deck-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: top var(--transition-speed, 0.3s) ease-out, left var(--transition-speed, 0.3s);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#ghost-deck .card.exploding {
    /*filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

/*#ghost-deck .deck-container::before {*/
/*    content: "·";*/
/*    background-color: #91833e;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    z-index: 1000000;*/
/*    display: block !important;*/
/*}*/


#modal {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    transition: top 0.3s ease-out 0.1s;

}

#modal-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal.deprime {
    background-color: #353b67;
    top: 0;
}

#modal.projet {
    background-color: #ffb05c;
    top: 0;
}

#modal-container .deck-container {

}

#modal .deck .card {
    --rotateZ: 0deg;
    --scaling: 0.8;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

#modal .actionbar {
    position: fixed;
    bottom: 2rem;
}