* { image-rendering: pixelated; }


.tablecards {
        position: absolute; top: 40%;
        width: 10%; height: auto;
        transition: transform, left, top, 1s;
        --flatten: perspective(15cm) rotateX(65deg);
        --floatset: 0px;
}
.tablecards:hover {
        transform: translateX(var(--floatset)) translateY(-20%) !important; }

#deckprogress {
        left: 10%;
        transform: var(--flatten) rotate(-40deg);
        --floatset: 50%;
}

#temper {
        left: 80%;
        transform: var(--flatten) rotate(40deg);
        --floatset: -50%;
}