:root {
    --back-forecolor: #9b00ff;
    --back-backcolor: #ffffff;
    --front-backcolor: #ffffff;
    --card-width: 1.5em;
    --card-margin-top-bottom: 0em;
    --card-margin-left-right: 9%;
    --suit-margin-top-bottom: 15%;
}

* {
    --pip-size: calc(var(--card-width) / 4.5);
    --card-font-size: calc(var(--card-width) / 5);
    --ace-pip-size: calc(var(--pip-size) * 1.6);
    --card-height: calc(var(--card-width) * 1.4);
    --card-border-radius: calc(var(--card-width) / 25);
    --back-border-width: calc(var(--card-width) / 18);
    --suit-pip-font-size: calc(var(--card-font-size) / 1.5);
    --back-size-width: calc(var(--card-width) * 1);
    --back-size-height: calc(var(--back-size-width) * 1.71);
}

@font-face {
    font-family: 'card-characters';
    src: url(../fonts/card-characters.TTF);
}

.card-container {
    width: var(--card-width);
    height: var(--card-height);
    perspective: 600px;
}

.playing-card {
    border: solid 1px black;
    border-radius: var(--card-border-radius);
    font-family: card-characters;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}

    .playing-card .front {
        width: 100%;
        height: 100%;
        border-radius: var(--card-border-radius);
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--front-backcolor);
    }

    .playing-card .back {
        width: 100%;
        height: 100%;
        border-radius: var(--card-border-radius);
        background-color: #ffffff;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
        border: solid;
        border-width: var(--back-border-width);
        border-color: var(--front-backcolor);
        background-color: #3256a8;
        background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 3em), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 3em), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
        background-size: 3.5em 6em;
        transform: rotateY(-180deg);
    }

    .playing-card[data-faceup="true"] .front {
        z-index: 4;
    }

    .playing-card[data-faceup="false"] .front {
        z-index: 2;
    }

    .playing-card[data-faceup="true"] .back {
        z-index: 2;
    }

    .playing-card[data-faceup="false"] .back {
        z-index: 4;
    }

.greyed {
    filter: brightness(0.75) !important;
}

.playing-card .pip-container {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.playing-card .value::before, .playing-card .value::after, .playing-card .suit::before, .playing-card .suit::after {
    position: absolute;
    width: auto;
}

.playing-card .value::before, .playing-card .value::after {
    font-size: var(--card-font-size);
}

.playing-card .suit::before, .playing-card .suit::after {
    font-size: var(--suit-pip-font-size);
}

.playing-card .pip-container .face {
    width: 100%;
    height: 100%;
}

.playing-card .pip-container .face::before {
    content: "";
    width: 100%;
    height: 100%;
    display: none;
}

.playing-card .value::before {
    top: var(--card-margin-top-bottom);
    left: var(--card-margin-left-right);
    transform: translateX(-50%);
    text-align: center;
}

.playing-card .value::after {
    bottom: var(--card-margin-top-bottom);
    right: var(--card-margin-left-right);
    transform: rotate(-180deg) translateX(-50%);
    text-align: center;
}

.playing-card .suit::before {
    top: var(--suit-margin-top-bottom);
    left: var(--card-margin-left-right);
    transform: translateX(-50%);
}

.playing-card .suit::after {
    bottom: var(--suit-margin-top-bottom);
    right: var(--card-margin-left-right);
    transform: rotate(-180deg) translateX(-50%);
}

.playing-card .pip::before {
    position: absolute;
    font-size: var(--pip-size);
    display: none;
    margin: 0;
    padding: 0;
}

    .playing-card[data-suit="clubs"] .pip::before, .playing-card[data-suit="clubs"] .suit::before, .playing-card[data-suit="clubs"] .suit::after {
        content: "]";
    }

    .playing-card[data-suit="diamonds"] .pip::before, .playing-card[data-suit="diamonds"] .suit::before, .playing-card[data-suit="diamonds"] .suit::after {
        content: "[";
    }

    .playing-card[data-suit="hearts"] .pip::before, .playing-card[data-suit="hearts"] .suit::before, .playing-card[data-suit="hearts"] .suit::after {
        content: "{";
    }

    .playing-card[data-suit="spades"] .pip::before, .playing-card[data-suit="spades"] .suit::before, .playing-card[data-suit="spades"] .suit::after {
        content: "}";
    }

/*************************
       suit colors
**************************/
[data-suit="hearts"], [data-suit="diamonds"] {
    color: red;
}

[data-suit="spades"], [data-suit="clubs"] {
    color: black;
}


/*************************
         values
**************************/
[data-value="2"] .value::before, [data-value="2"] .value::after {
    content: "2";
}

[data-value="3"] .value::before, [data-value="3"] .value::after {
    content: "3";
}

[data-value="4"] .value::before, [data-value="4"] .value::after {
    content: "4";
}

[data-value="5"] .value::before, [data-value="5"] .value::after {
    content: "5";
}

[data-value="6"] .value::before, [data-value="6"] .value::after {
    content: "6";
}

[data-value="7"] .value::before, [data-value="7"] .value::after {
    content: "7";
}

[data-value="8"] .value::before, [data-value="8"] .value::after {
    content: "8";
}

[data-value="9"] .value::before, [data-value="9"] .value::after {
    content: "9";
}

[data-value="T"] .value::before, [data-value="T"] .value::after {
    content: "=";
}

[data-value="J"] .value::before, [data-value="J"] .value::after {
    content: "J";
}

[data-value="Q"] .value::before, [data-value="Q"] .value::after {
    content: "Q";
}

[data-value="K"] .value::before, [data-value="K"] .value::after {
    content: "K";
}

[data-value="A"] .value::before, [data-value="A"] .value::after {
    content: "A";
}

[data-value="?"] .value::before, [data-value="?"] .value::after {
    content: "?";
}

/*************************
          pips
**************************/

/*2*/
[data-value="2"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 50%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="2"] .pip-container .pip:nth-child(2)::before {
    bottom: 0%;
    right: 50%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

/*3*/
[data-value="3"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 50%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="3"] .pip-container .pip:nth-child(2)::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: initial;
}

[data-value="3"] .pip-container .pip:nth-child(3)::before {
    bottom: 0;
    right: 50%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

/*4*/
[data-value="4"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="4"] .pip-container .pip:nth-child(2)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="4"] .pip-container .pip:nth-child(3)::before {
    bottom: 0%;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="4"] .pip-container .pip:nth-child(4)::before {
    bottom: 0%;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

/*5*/
[data-value="5"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="5"] .pip-container .pip:nth-child(2)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="5"] .pip-container .pip:nth-child(3)::before {
    bottom: 0%;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="5"] .pip-container .pip:nth-child(4)::before {
    bottom: 0%;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="5"] .pip-container .pip:nth-child(5)::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: initial;
}

/*6*/
[data-value="6"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="6"] .pip-container .pip:nth-child(2)::before {
    top: 50%;
    left: 0%;
    transform: translate(50%, -50%);
    display: initial;
}

[data-value="6"] .pip-container .pip:nth-child(3)::before {
    bottom: 0;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="6"] .pip-container .pip:nth-child(4)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="6"] .pip-container .pip:nth-child(5)::before {
    top: 50%;
    right: 0%;
    transform: translate(-50%, -50%);
    display: initial;
}

[data-value="6"] .pip-container .pip:nth-child(6)::before {
    bottom: 0;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

/*7*/
[data-value="7"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="7"] .pip-container .pip:nth-child(2)::before {
    top: 50%;
    left: 0%;
    transform: translate(50%, -50%);
    display: initial;
}

[data-value="7"] .pip-container .pip:nth-child(3)::before {
    bottom: 0;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="7"] .pip-container .pip:nth-child(4)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="7"] .pip-container .pip:nth-child(5)::before {
    top: 50%;
    right: 0%;
    transform: translate(-50%, -50%);
    display: initial;
}

[data-value="7"] .pip-container .pip:nth-child(6)::before {
    bottom: 0;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="7"] .pip-container .pip:nth-child(7)::before {
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: initial;
}

/*8*/
[data-value="8"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(2)::before {
    top: 50%;
    left: 0%;
    transform: translate(50%, -100%);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(3)::before {
    bottom: 50%;
    left: 0%;
    transform: translate(50%, 100%) rotate(-180deg);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(4)::before {
    bottom: 0%;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(5)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(6)::before {
    top: 50%;
    right: 0%;
    transform: translate(-50%, -100%);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(7)::before {
    bottom: 50%;
    right: 0%;
    transform: translate(-50%, 100%) rotate(-180deg);
    display: initial;
}

[data-value="8"] .pip-container .pip:nth-child(8)::before {
    bottom: 0%;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

/*9*/
[data-value="9"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(2)::before {
    top: 50%;
    left: 0%;
    transform: translate(50%, -100%);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(3)::before {
    bottom: 50%;
    left: 0%;
    transform: translate(50%, 100%) rotate(-180deg);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(4)::before {
    bottom: 0%;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(5)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(6)::before {
    top: 50%;
    right: 0%;
    transform: translate(-50%, -100%);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(7)::before {
    bottom: 50%;
    right: 0%;
    transform: translate(-50%, 100%) rotate(-180deg);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(8)::before {
    bottom: 0%;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="9"] .pip-container .pip:nth-child(9)::before {
    top: 22.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: initial;
}

/*10*/
[data-value="T"] .pip-container .pip:nth-child(1)::before {
    top: 0%;
    left: 0%;
    transform: translate(50%, -25%);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(2)::before {
    top: 50%;
    left: 0%;
    transform: translate(50%, -100%);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(3)::before {
    bottom: 50%;
    left: 0%;
    transform: translate(50%, 100%) rotate(-180deg);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(4)::before {
    bottom: 0%;
    left: 0%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(5)::before {
    top: 0%;
    right: 0%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(6)::before {
    top: 50%;
    right: 0%;
    transform: translate(-50%, -100%);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(7)::before {
    bottom: 50%;
    right: 0%;
    transform: translate(-50%, 100%) rotate(-180deg);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(8)::before {
    bottom: 0%;
    right: 0%;
    transform: translate(-50%, 25%) rotate(-180deg);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(9)::before {
    top: 22.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: initial;
}

[data-value="T"] .pip-container .pip:nth-child(10)::before {
    bottom: 22.5%;
    left: 50%;
    transform: translate(-50%, 50%) rotate(-180deg);
    display: initial;
}

/*Face Cards*/
[data-value="J"] .pip-container .pip:nth-child(1)::before,
[data-value="Q"] .pip-container .pip:nth-child(1)::before,
[data-value="K"] .pip-container .pip:nth-child(1)::before
{
    top: 5%;
    left: 20%;
    transform: translate(-50%, -25%);
    display: initial;
}

[data-value="J"] .pip-container .pip:nth-child(2)::before,
[data-value="Q"] .pip-container .pip:nth-child(2)::before,
[data-value="K"] .pip-container .pip:nth-child(2)::before 
{
    bottom: 5%;
    right: 20%;
    transform: translate(50%, 25%) rotate(-180deg);
    display: initial;
}

/*A*/
[data-value="A"] .pip-container .pip:nth-child(1)::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: initial;
    font-size: var(--ace-pip-size);
}

/*************************
     face card images
**************************/

/*Jacks*/
[data-value="J"][data-suit="clubs"] .face::before {
    background: url("../images/cards/jack_of_clubs.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="J"][data-suit="diamonds"] .face::before {
    background: url("../images/cards/jack_of_diamonds.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="J"][data-suit="hearts"] .face::before {
    background: url("../images/cards/jack_of_hearts.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="J"][data-suit="spades"] .face::before {
    background: url("../images/cards/jack_of_spades.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

/*Queens*/
[data-value="Q"][data-suit="clubs"] .face::before {
    background: url("../images/cards/queen_of_clubs.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="Q"][data-suit="diamonds"] .face::before {
    background: url("../images/cards/queen_of_diamonds.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="Q"][data-suit="hearts"] .face::before {
    background: url("../images/cards/queen_of_hearts.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="Q"][data-suit="spades"] .face::before {
    background: url("../images/cards/queen_of_spades.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

/*Kings*/
[data-value="K"][data-suit="clubs"] .face::before {
    background: url("../images/cards/king_of_clubs.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="K"][data-suit="diamonds"] .face::before {
    background: url("../images/cards/king_of_diamonds.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="K"][data-suit="hearts"] .face::before {
    background: url("../images/cards/king_of_hearts.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

[data-value="K"][data-suit="spades"] .face::before {
    background: url("../images/cards/king_of_spades.svg") no-repeat center;
    background-size: contain;
    display: inline-block;
}

/*Hide content of face down cards*/
.playing-card[data-faceup="false"] .pip, .playing-card[data-faceup="false"] .value, .playing-card[data-faceup="false"] .suit, .playing-card[data-faceup="false"] .face {
    display: none;
}

/*************************
   animations and hovers
**************************/
/*@media (hover: hover) and (pointer: fine){
    .playing-card:not(hover, [data-faceup="false"]){
        transform: translateY(0%);
        transition: 0.5s;
    }

    .playing-card:hover:not([data-faceup="false"]) {
        transform: translateY(-15%);
        transition: 0.5s;
        transition-delay: 0.1s;
    }

    .playing-card:hover:not([data-faceup="false"]) {
        cursor: pointer;
    }

    .playing-card[data-faceup="false"]:hover {
        cursor: not-allowed;
    }
}*/

.flip-card-faceup {
    animation-delay: 0s;
    animation-name: flipCardFaceup;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    backface-visibility: hidden;
}

.flip-card-faceup .back {
    transform: rotateY(0deg);
}

@keyframes flipCardFaceup {
    0% {
        transform: rotateY(-180deg);
    }

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