/* Course: SENG 513 */
/* Date: NOV 12, 2023 */
/* Assignment 3 */
/* Name: Yunfan Yang */
/* UCID: 30067857 */

:root {
    --card-height: 140px;
    --card-width: 100px;
}

div.card {
    background-image: url("assets/cards/backB.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--card-height);
    width: var(--card-width);
    border-radius: 4%;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0), top 0s, left 0s, background 0s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transform-style: preserve-3d;
}

div.card:hover {
    transform: scale(1.1);
}

div.heart-13 {
    background-image: url("assets/cards/13H.png");
}

div.diamond-13 {
    background-image: url("assets/cards/13D.png");
}

div.club-13 {
    background-image: url("assets/cards/13C.png");
}

div.spade-13 {
    background-image: url("assets/cards/13S.png");
}

div.heart-12 {
    background-image: url("assets/cards/12H.png");
}

div.diamond-12 {
    background-image: url("assets/cards/12D.png");
}

div.club-12 {
    background-image: url("assets/cards/12C.png");
}

div.spade-12 {
    background-image: url("assets/cards/12S.png");
}

div.heart-11 {
    background-image: url("assets/cards/11H.png");
}

div.diamond-11 {
    background-image: url("assets/cards/11D.png");
}

div.club-11 {
    background-image: url("assets/cards/11C.png");
}

div.spade-11 {
    background-image: url("assets/cards/11S.png");
}

div.heart-10 {
    background-image: url("assets/cards/10H.png");
}

div.diamond-10 {
    background-image: url("assets/cards/10D.png");
}

div.club-10 {
    background-image: url("assets/cards/10C.png");
}

div.spade-10 {
    background-image: url("assets/cards/10S.png");
}

div.heart-9 {
    background-image: url("assets/cards/9H.png");
}

div.diamond-9 {
    background-image: url("assets/cards/9D.png");
}

div.club-9 {
    background-image: url("assets/cards/9C.png");
}

div.spade-9 {
    background-image: url("assets/cards/9S.png");
}

div.heart-8 {
    background-image: url("assets/cards/8H.png");
}

div.diamond-8 {
    background-image: url("assets/cards/8D.png");
}

div.club-8 {
    background-image: url("assets/cards/8C.png");
}

div.spade-8 {
    background-image: url("assets/cards/8S.png");
}

div.heart-7 {
    background-image: url("assets/cards/7H.png");
}

div.diamond-7 {
    background-image: url("assets/cards/7D.png");
}

div.club-7 {
    background-image: url("assets/cards/7C.png");
}

div.spade-7 {
    background-image: url("assets/cards/7S.png");
}

div.heart-6 {
    background-image: url("assets/cards/6H.png");
}

div.diamond-6 {
    background-image: url("assets/cards/6D.png");
}

div.club-6 {
    background-image: url("assets/cards/6C.png");
}

div.spade-6 {
    background-image: url("assets/cards/6S.png");
}

div.heart-5 {
    background-image: url("assets/cards/5H.png");
}

div.diamond-5 {
    background-image: url("assets/cards/5D.png");
}

div.club-5 {
    background-image: url("assets/cards/5C.png");
}

div.spade-5 {
    background-image: url("assets/cards/5S.png");
}

div.heart-4 {
    background-image: url("assets/cards/4H.png");
}

div.diamond-4 {
    background-image: url("assets/cards/4D.png");
}

div.club-4 {
    background-image: url("assets/cards/4C.png");
}

div.spade-4 {
    background-image: url("assets/cards/4S.png");
}

div.heart-3 {
    background-image: url("assets/cards/3H.png");
}

div.diamond-3 {
    background-image: url("assets/cards/3D.png");
}

div.club-3 {
    background-image: url("assets/cards/3C.png");
}

div.spade-3 {
    background-image: url("assets/cards/3S.png");
}

div.heart-2 {
    background-image: url("assets/cards/2H.png");
}

div.diamond-2 {
    background-image: url("assets/cards/2D.png");
}

div.club-2 {
    background-image: url("assets/cards/2C.png");
}

div.spade-2 {
    background-image: url("assets/cards/2S.png");
}

div.heart-1 {
    background-image: url("assets/cards/1H.png");
}

div.diamond-1 {
    background-image: url("assets/cards/1D.png");
}

div.club-1 {
    background-image: url("assets/cards/1C.png");
}

div.spade-1 {
    background-image: url("assets/cards/1S.png");
}

div.card.flip {
    animation-name: card-flip;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0)
}

div.card.hide {
    background-image: url("assets/cards/backB.png");
}

@keyframes card-flip {
    0% {
        transform: rotateY(0deg);
        background-image: url("assets/cards/backB.png");
    }

    49% {
        transform: rotateY(70deg);
    }

    50% {
        transform: rotateY(90deg);
        background-image: url("assets/cards/backB.png");
    }

    51% {
        transform: rotateY(70deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}