:root {
    --pointer-x: 50%;
    --pointer-y: 50%;
    --card-scale: 1;
    --card-opacity: 1;
    --translate-x: 0px;
    --translate-y: 0px;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --background-x: var(--pointer-x);
    --background-y: var(--pointer-y);
    --pointer-from-center: 0;
    --pointer-from-top: var(--pointer-from-center);
    --pointer-from-left: var(--pointer-from-center);
}

.card {
    --grain: url("/Images/Holo/grain.webp");
    --glitter: url("/Images/Holo/glitter.png");
    --glittersize: 25%;
    --space: 5%;
    --angle: 133deg;
    --imgsize: cover;
    --red: #f80e35;
    --yellow: #eedf10;
    --green: #21e985;
    --blue: #0dbde9;
    --violet: #c929f1;
    --clip: inset( 9.85% 8% 52.85% 8% );
    --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);
    --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
    --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);
    --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
    --clip-borders: inset(2.8% 4% round 2.55% / 1.5%);
}

.card__shine,
.card__glare {
    will-change: transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;
}


.card {
    --card-size: 300px;
    transform: scale(var(--card-scale)) translate(var(--translate-x), var(--translate-y)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
    opacity: var(--card-opacity);
    background-position: var(--background-x) var(--background-y);
    width: var(--card-size);
}