* {
    --left-to-right: calc(var(--card-width) * 3.7);
    --right-to-left: calc(var(--left-to-right) * -1);

    --center-to-right: calc(var(--card-width) * 2.9);
    --center-to-left: calc(var(--center-to-right) * -1);

    --right-to-right: calc(var(--card-width) * 2.1);
    --left-to-left: calc(var(--right-to-right) * -1);

    --top-to-bottom: calc(var(--card-width) * 4.2);
    --bottom-to-top: calc(var(--top-to-bottom) * -0.68);

    --center-to-bottom: calc(var(--card-width) * 2.5);
    --center-to-top: calc(var(--center-to-bottom) * -0.8);

    --top-to-center: calc(var(--card-width) * 1.8);
    --bottom-to-center: calc(var(--top-to-center) * -0.9);

    --bottom-to-bottom: calc(var(--card-width) * 0.7);
    --top-to-top: calc(var(--bottom-to-bottom) * -1);

    --left-to-center: calc(var(--card-width) * 0.8);
    --right-to-center: calc(var(--left-to-center) * -1);

    --card-play-distance: calc(var(--card-width) * 1);
    --card-play-right: calc(var(--card-play-distance) * -1);
    --card-play-down: calc(var(--card-play-distance) * -1);
    --card-play-left: var(--card-play-distance);
    --card-play-up: var(--card-play-distance);
}

.fade-in-item {
    visibility: visible;
    animation: fadeIn linear 0.75s;
}

.deal-to-north {
    animation-name: slideUp;
    animation-duration: 1.5s;
}

.deal-to-east {
    animation-name: slideRight;
    animation-duration: 1.5s;
}

.deal-to-west {
    animation-name: slideLeft;
    animation-duration: 1.5s;
}

.deal-to-south {
    animation-name: slideDown;
    animation-duration: 1.5s;
}

.flip-card-start {
    animation-name: flipStart;
    animation-duration: 1s;
}

.flip-card-end {
    animation-name: flipEnd;
    animation-duration: 1s;
}

.north-play-card {
    animation-delay: 0s;
    animation-name: northSlideDown;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    visibility: visible;
}

.east-play-card {
    animation-delay: 0s;
    animation-name: eastSlideLeft;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    visibility: visible;
}

.south-play-card {
    animation-delay: 0s;
    animation-name: southSlideUp;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    visibility: visible;
}

.west-play-card {
    animation-delay: 0s;
    animation-name: westSlideRight;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    visibility: visible;
}

.slide-south-south {
    z-index: 5 !important;
    animation-delay: 0s;
    animation-name: slideSouthToSouth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-west-south {
    animation-delay: 0s;
    animation-name: slideWestToSouth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-north-south {
    animation-delay: 0s;
    animation-name: slideNorthToSouth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-east-south {
    animation-delay: 0s;
    animation-name: slideEastToSouth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-west-west {
    z-index: 5 !important;
    animation-delay: 0s;
    animation-name: slideWestToWest;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-north-west {
    animation-delay: 0s;
    animation-name: slideNorthToWest;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-east-west {
    animation-delay: 0s;
    animation-name: slideEastToWest;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-south-west {
    animation-delay: 0s;
    animation-name: slideSouthToWest;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-west-east {
    animation-delay: 0s;
    animation-name: slideWestToEast;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-north-east {
    animation-delay: 0s;
    animation-name: slideNorthToEast;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-east-east {
    z-index: 5 !important;
    animation-delay: 0s;
    animation-name: slideEastToEast;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-south-east {
    animation-delay: 0s;
    animation-name: slideSouthToEast;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-south-north {
    animation-delay: 0s;
    animation-name: slideSouthToNorth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-west-north {
    animation-delay: 0s;
    animation-name: slideWestToNorth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-north-north {
    z-index: 5 !important;
    animation-delay: 0s;
    animation-name: slideNorthToNorth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.slide-east-north {
    animation-delay: 0s;
    animation-name: slideEastToNorth;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

@keyframes fade-in-and-down {
    0% {
        opacity: 0;
        transform: translate(-50%, -75%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.fade-in-and-down {
    animation: fade-in-and-down 1s ease-out forwards;
}

@keyframes gradientSlide {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

@keyframes focusAfterBorder {
    0% {
        width: 120%;
        height: 150%;
        opacity: 1;
    }

    25% {
        opacity: 0.1;
    }

    50% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    75% {
        opacity: 0.1;
    }

    100% {
        width: 120%;
        height: 150%;
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translate(0, 1000%) rotateZ(-360deg);
    }
    100% {
        transform: translate(0, 0) rotateZ(360deg);
    }
}

@keyframes slideRight {
    0% {
        transform: translate(-700%, 700%) rotateZ(-450deg);
    }

    100% {
        transform: translate(0, 0) rotateZ(270deg);
    }
}

@keyframes slideLeft {
    0% {
        transform: translate(700%, 700%) rotateZ(-270deg);
    }

    100% {
        transform: translate(0, 0) rotateZ(450deg);
    }
}

@keyframes slideDown {
    0% {
        transform: translate(0, 200%) rotateZ(-360deg);
    }

    100% {
        transform: translate(0, 0) rotateZ(360deg);
    }
}

@keyframes northSlideDown {
    from {
        margin-top: var(--card-play-down);
    }

    to {
        margin-top: 0;
    }
}

@keyframes southSlideUp {
    from {
        margin-top: var(--card-play-up);
    }

    to {
        margin-top: 0;
    }
}

@keyframes eastSlideLeft {
    from {
        margin-left: var(--card-play-left);
    }

    to {
        margin-left: 0;
    }
}

@keyframes westSlideRight {
    from {
        margin-left: var(--card-play-right);
    }

    to {
        margin-left: 0;
    }
}


@keyframes slideWestToSouth {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--left-to-center);
        margin-top: var(--center-to-bottom);
        visibility: hidden;
    }
}

@keyframes slideNorthToSouth {
    from {
        margin-top: 0;
    }

    to {
        margin-top: var(--top-to-bottom);
        visibility: hidden;
    }
}

@keyframes slideEastToSouth {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--right-to-center);
        margin-top: var(--center-to-bottom);
        visibility: hidden;
    }
}

@keyframes slideSouthToSouth {
    from {
        margin-top: 0;
    }

    to {
        margin-top: var(--bottom-to-bottom);
        visibility: hidden;
    }
}

@keyframes slideWestToWest {
    from {
        margin-left: 0;
    }

    to {
        margin-left: var(--left-to-left);
        visibility: hidden;
    }
}

@keyframes slideNorthToWest {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--center-to-left);
        margin-top: var(--top-to-center);
        visibility: hidden;
    }
}

@keyframes slideEastToWest {
    from {
        margin-left: 0;
    }

    to {
        margin-left: var(--right-to-left);
        visibility: hidden;
    }
}

@keyframes slideSouthToWest {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--center-to-left);
        margin-top: var(--bottom-to-center);
        visibility: hidden;
    }
}
@keyframes slideWestToEast {
    from {
        margin-left: 0;
    }

    to {
        margin-left: var(--left-to-right);
        visibility: hidden;
    }
}

@keyframes slideNorthToEast {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--center-to-right);
        margin-top: var(--top-to-center);
        visibility: hidden;
    }
}

@keyframes slideEastToEast {
    from {
        margin-left: 0;
    }

    to {
        margin-left: var(--right-to-right);
        visibility: hidden;
    }
}

@keyframes slideSouthToEast {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--center-to-right);
        margin-top: var(--bottom-to-center);
        visibility: hidden;
    }
}

@keyframes slideWestToNorth {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--left-to-center);
        margin-top: var(--center-to-top);
        visibility: hidden;
    }
}

@keyframes slideNorthToNorth {
    from {
        margin-top: 0;
    }

    to {
        margin-top: var(--top-to-top);
        visibility: hidden;
    }
}

@keyframes slideEastToNorth {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--right-to-center);
        margin-top: var(--center-to-top);
        visibility: hidden;
    }
}

@keyframes slideSouthToNorth {
    from {
        margin-top: 0;
    }

    to {
        margin-top: var(--bottom-to-top);
        visibility: hidden;
    }
}