please enhance my code  this code
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workout App</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600&display=swap');
        
        body {
            font-family: 'Cairo', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            background: #393c42;
            overflow: hidden;
        }
        .filter-container {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .filter-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }
        .filter-button:hover {
            background-color: #45a049;
        }
        .filter-button:active {
            background-color: #3e8e41;
            transform: translateY(2px);
        }
        .filter-button.active {
            background-color: #008CBA;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow-y: auto;
            overflow-x: hidden;
            height: 85%;
            width: 95%;
        }
        .flip-card-container {
            width: 310px;
            height: 500px;
            margin: 20px;
            perspective: 1000px;
            cursor: pointer;
        }
        .flip-card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }
        .flip-card-container.flip .flip-card {
            transform: rotateY(180deg);
        }
        .card-front,
        .card-back {
            width: 100%;
            height: 100%;
            border-radius: 24px;
            background: #fff;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transform-style: preserve-3d;
        }
        .card-front {
            transform: rotateY(0deg);
            z-index: 2;
        }
        .card-back {
            transform: rotateY(180deg);
            z-index: 1;
        }
        figure,
        img {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border-radius: 24px;
            object-fit: cover;
        }
        .card-front .caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        }

        .card-front,
        .card-back {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .card-front:hover,
        .card-back:hover {
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            transform: scale(1.05);
        }

        .card-front::before,
        .card-back::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%);
            transition: opacity 0.3s ease;
            opacity: 0;
        }

        .card-front:hover::before,
        .card-back:hover::before {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .filter-container {
                flex-direction: column;
                align-items: center;
            }
            .container {
                width: 100%;
                padding: 10px;
            }
            .flip-card-container {
                margin: 20px 0;
            }
        }
        @media (max-width: 480px) {
            .filter-button {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="filter-container">
        <button class="filter-button active" data-category="all">الجميع</button>
        <button class="filter-button" data-category="forgive">استغفار</button>
        <button class="filter-button" data-category="tasbeh">تسبيح</button>
        <button class="filter-button" id="admin-button">Admin Panel</button>
    </div>
    <div class="container" id="items-container">
        <!-- Items will be injected here by JavaScript -->
    </div>

    <script>
        const data = {
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ": {"reps": 0, "frontImage": "1.jpg", "backImage": "1b.jpg", "category": "tasbeh"},
            "سُبْحَانَ اللهِ العَظِيمِ وَبِحَمْدِهِ ": {"reps": 0, "frontImage": "2.jpg", "backImage": "2b.jpg", "category": "tasbeh"},
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ، سُبْحَانَ اللَّهِ الْعَظِيمِ ": {"reps": 0, "frontImage": "3.jpg", "backImage": "3b.jpg", "category": "tasbeh"},
            "لاإله إلا الله وحده لا شريك له له الملك وله الحمد وهو على كل شيء قدير": {"reps": 0, "frontImage": "4.jpg", "backImage": "4b.jpg", "category": "forgive"},
            "لا حَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "frontImage": "5.jpeg", "backImage": "5b.jpeg", "category": "forgive"},
            "الْحَمْدُ للّهِ رَبِّ الْعَالَمِينَ ": {"reps": 0, "frontImage": "6.jpg", "backImage": "6b.jpg", "category": "tasbeh"},
            "الْلَّهُم صَلِّ وَسَلِّم وَبَارِك عَلَى سَيِّدِنَا مُحَمَّد ": {"reps": 0, "frontImage": "7.jpg", "backImage": "7b.jpg", "category": "tasbeh"},
            "الله أكبر": {"reps": 0, "frontImage": "8.jpg", "backImage": "8b.jpg", "category": "tasbeh"}
        };

        function createItem(key, value) {
            const flipCardContainer = document.createElement('div');
            flipCardContainer.className = 'flip-card-container';
            flipCardContainer.setAttribute('data-category', value.category);

            const flipCard = document.createElement('div');
            flipCard.className = 'flip-card';

            const cardFront = document.createElement('div');
            cardFront.className = 'card-front';
            const frontFigure = document.createElement('figure');
            const frontImg = document.createElement('img');
            frontImg.src = value.frontImage;
            frontImg.alt = key;
            const caption = document.createElement('div');
            caption.className = 'caption';
            caption.textContent = key;
            frontFigure.appendChild(frontImg);
            cardFront.appendChild(frontFigure);
            cardFront.appendChild(caption);

            const cardBack = document.createElement('div');
            cardBack.className = 'card-back';
            const backFigure = document.createElement('figure');
            const backImg = document.createElement('img');
            backImg.src = value.backImage;
            backImg.alt = key;
            backFigure.appendChild(backImg);
            cardBack.appendChild(backFigure);

            flipCard.appendChild(cardFront);
            flipCard.appendChild(cardBack);
            flipCardContainer.appendChild(flipCard);

            flipCardContainer.onclick = () => {
                document.querySelectorAll('.flip-card-container.flip').forEach(card => card.classList.remove('flip'));
                flipCardContainer.classList.toggle('flip');
            };

            return flipCardContainer;
        }

        function loadItems() {
            const itemsContainer = document.getElementById('items-container');
            itemsContainer.innerHTML = '';

            const storedData = JSON.parse(localStorage.getItem('workoutAppData')) || data;
            Object.keys(storedData).forEach(key => {
                const value = storedData[key];
                const item = createItem(key, value);
                itemsContainer.appendChild(item);
            });
        }

        document.querySelectorAll('.filter-button').forEach(button => {
            button.onclick = () => {
                document.querySelectorAll('.filter-button').forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                const category = button.getAttribute('data-category');
                filterItems(category);
            };
        });

        function filterItems(category) {
            const items = document.querySelectorAll('.flip-card-container');
            items.forEach(item => {
                if (category === 'all' || item.getAttribute('data-category') === category) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        document.getElementById('admin-button').onclick = () => {
            window.location.href = 'admin.html';
        };

        window.onload = loadItems;
    </script>
</body>
</html>
with this code 

:root {
    --mx: 50%;
    --my: 50%;
    --s: 1;
    --o: 0;
    --tx: 0px;
    --ty: 0px;
    --rx: 0deg;
    --ry: 0deg;
    --pos: 50% 50%;
    --posx: 50%;
    --posy: 50%;
    --hyp: 0;
}

.card {
    --radius: 4.55% / 3.5%;
    z-index: calc(var(--s) * 100);
    transform: translate3d(0, 0, 0.1px);
    will-change: transform, visibility;
    transform-style: preserve-3d;
}

.card.interacting {
    z-index: calc(var(--s) * 120);
}

.card.active .card__translater,
.card.active .card__rotator {
    touch-action: none;
}

.card__translater,
.card__rotator {
    display: grid;
    perspective: 600px;
    transform-origin: center;
    will-change: transform;
}

.card__translater {
    width: auto;
    position: relative;
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
}

.card__rotator {
    --glow: #69d1e9;
    transform: rotateY(var(--rx)) rotateX(var(--ry));
    transform-style: preserve-3d;
    box-shadow: 0px 10px 20px -5px black;
    border-radius: var(--radius);
    outline: none;
    transition: box-shadow 0.4s ease, outline 0.2s ease;
}

.card.active .card__rotator {
    box-shadow: 0 0 10px 0px var(--glow), 0 0 10px 0px var(--glow),
        0 0 30px 0px var(--glow);
}

.card__rotator:focus {
    box-shadow: 0 0 10px 0px var(--glow), 0 0 10px 0px var(--glow),
        0 0 30px 0px var(--glow);
}

.card.active .card__rotator:focus {
    box-shadow: 0px 10px 30px 3px black;
}

.card__rotator :global(*) {
    width: 100%;
    display: grid;
    grid-area: 1/1;
    border-radius: var(--radius);
    image-rendering: optimizeQuality;
    transform-style: preserve-3d;
}

.card__back {
    transform: rotateY(180deg);
    backface-visibility: visible;
}

.card__front,
.card__front * {
    backface-visibility: hidden;
}

.card__front {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

.loading .card__front {
    opacity: 0;
}

.loading .card__back {
    transform: rotateY(0deg);
}

.card__shine {
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");

    --space: 5%;
    --angle: 133deg;
    --imgsize: 500px;

    --red: #f80e7b;
    --yel: #eedf10;
    --gre: #21e985;
    --blu: #0dbde9;
    --vio: #c929f1;
}

/*

  HOLO

*/

.card[data-rarity="rare holo"] .card__shine {
    --space: 2px;
    --h: 21;
    --s: 70%;
    --l: 50%;
    --bars: 24px;
    --bar-color: rgba(255, 255, 255, 0.6);
    --bar-bg: rgb(10, 10, 10);

    clip-path: inset(10% 8.5% 52.5% 8.5%);

    background-image: repeating-linear-gradient(
            90deg,
            hsl(calc(var(--h) * 0), var(--s), var(--l)) calc(var(--space) * 0),
            hsl(calc(var(--h) * 0), var(--s), var(--l)) calc(var(--space) * 1),
            black calc(var(--space) * 1.001),
            black calc(var(--space) * 1.999),
            hsl(calc(var(--h) * 1), var(--s), var(--l)) calc(var(--space) * 2),
            hsl(calc(var(--h) * 1), var(--s), var(--l)) calc(var(--space) * 3),
            black calc(var(--space) * 3.001),
            black calc(var(--space) * 3.999),
            hsl(calc(var(--h) * 2), var(--s), var(--l)) calc(var(--space) * 4),
            hsl(calc(var(--h) * 2), var(--s), var(--l)) calc(var(--space) * 5),
            black calc(var(--space) * 5.001),
            black calc(var(--space) * 5.999),
            hsl(calc(var(--h) * 3), var(--s), var(--l)) calc(var(--space) * 6),
            hsl(calc(var(--h) * 3), var(--s), var(--l)) calc(var(--space) * 7),
            black calc(var(--space) * 7.001),
            black calc(var(--space) * 7.999),
            hsl(calc(var(--h) * 4), var(--s), var(--l)) calc(var(--space) * 8),
            hsl(calc(var(--h) * 4), var(--s), var(--l)) calc(var(--space) * 9),
            black calc(var(--space) * 9.001),
            black calc(var(--space) * 9.999),
            hsl(calc(var(--h) * 5), var(--s), var(--l)) calc(var(--space) * 10),
            hsl(calc(var(--h) * 5), var(--s), var(--l)) calc(var(--space) * 11),
            black calc(var(--space) * 11.001),
            black calc(var(--space) * 11.999),
            hsl(calc(var(--h) * 6), var(--s), var(--l)) calc(var(--space) * 12),
            hsl(calc(var(--h) * 6), var(--s), var(--l)) calc(var(--space) * 13),
            black calc(var(--space) * 13.001),
            black calc(var(--space) * 13.999),
            hsl(calc(var(--h) * 7), var(--s), var(--l)) calc(var(--space) * 14),
            hsl(calc(var(--h) * 7), var(--s), var(--l)) calc(var(--space) * 15),
            black calc(var(--space) * 15.001),
            black calc(var(--space) * 15.999),
            hsl(calc(var(--h) * 8), var(--s), var(--l)) calc(var(--space) * 16),
            hsl(calc(var(--h) * 8), var(--s), var(--l)) calc(var(--space) * 17),
            black calc(var(--space) * 17.001),
            black calc(var(--space) * 17.999),
            hsl(calc(var(--h) * 9), var(--s), var(--l)) calc(var(--space) * 18),
            hsl(calc(var(--h) * 9), var(--s), var(--l)) calc(var(--space) * 19),
            black calc(var(--space) * 19.001),
            black calc(var(--space) * 19.999),
            hsl(calc(var(--h) * 10), var(--s), var(--l)) calc(var(--space) * 20),
            hsl(calc(var(--h) * 10), var(--s), var(--l)) calc(var(--space) * 21),
            black calc(var(--space) * 21.001),
            black calc(var(--space) * 21.999),
            hsl(calc(var(--h) * 11), var(--s), var(--l)) calc(var(--space) * 22),
            hsl(calc(var(--h) * 11), var(--s), var(--l)) calc(var(--space) * 23),
            black calc(var(--space) * 23.001),
            black calc(var(--space) * 23.999),
            hsl(calc(var(--h) * 12), var(--s), var(--l)) calc(var(--space) * 24),
            hsl(calc(var(--h) * 12), var(--s), var(--l)) calc(var(--space) * 25),
            black calc(var(--space) * 25.001),
            black calc(var(--space) * 25.999),
            hsl(calc(var(--h) * 13), var(--s), var(--l)) calc(var(--space) * 26),
            hsl(calc(var(--h) * 13), var(--s), var(--l)) calc(var(--space) * 27),
            black calc(var(--space) * 27.001),
            black calc(var(--space) * 27.999),
            hsl(calc(var(--h) * 14), var(--s), var(--l)) calc(var(--space) * 28),
            hsl(calc(var(--h) * 14), var(--s), var(--l)) calc(var(--space) * 29),
            black calc(var(--space) * 29.001),
            black calc(var(--space) * 29.999),
            hsl(calc(var(--h) * 15), var(--s), var(--l)) calc(var(--space) * 30),
            hsl(calc(var(--h) * 15), var(--s), var(--l)) calc(var(--space) * 31),
            black calc(var(--space) * 31.001),
            black calc(var(--space) * 31.999)
        ),
        repeating-linear-gradient(
            90deg,
            var(--vio),
            var(--blu),
            var(--gre),
            var(--yel),
            var(--red),
            var(--vio)
        ),
        repeating-linear-gradient(
            90deg,
            var(--bar-bg) calc(var(--bars) * 2),
            var(--bar-color) calc(var(--bars) * 3),
            var(--bar-bg) calc(var(--bars) * 3.5),
            var(--bar-color) calc(var(--bars) * 4),
            var(--bar-bg) calc(var(--bars) * 5),
            var(--bar-bg) calc(var(--bars) * 12)
        ),
        repeating-linear-gradient(
            90deg,
            var(--bar-bg) calc(var(--bars) * 2),
            var(--bar-color) calc(var(--bars) * 3),
            var(--bar-bg) calc(var(--bars) * 3.5),
            var(--bar-color) calc(var(--bars) * 4),
            var(--bar-bg) calc(var(--bars) * 5),
            var(--bar-bg) calc(var(--bars) * 9)
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(230, 230, 230, 0.85) 0%,
            rgba(200, 200, 200, 0.1) 25%,
            rgb(0, 0, 0) 90%
        );

    background-blend-mode: soft-light, soft-light, screen, overlay;
    background-position: center, calc(((50% - var(--posx)) * 25) + 50%) center,
        calc(var(--posx) * -1.2) var(--posy), var(--pos), center;
    background-size: 100% 100%, 200% 200%, 237% 237%, 195% 195%, 120% 120%;

    filter: brightness(calc((var(--hyp) + 0.7) * 0.7)) contrast(3.2)
        saturate(0.66);
}

/*

  GALAXY HOLO

*/

.card[data-rarity="rare holo galaxy"] .card__glare {
    background-image: radial-gradient(
        farthest-corner circle at var(--mx) var(--my),
        rgba(222, 245, 250, 0.7) 10%,
        rgba(255, 255, 255, 0.5) 20%,
        rgba(0, 0, 0, 0.5) 90%
    );
}

.card[data-rarity="rare holo galaxy"] .card__shine {
    --space: 80px;
    --h: 21;
    --s: 70%;
    --l: 50%;
    --bars: 50px;
    --bar-color: rgba(255, 255, 255, 0.6);
    --bar-bg: rgb(10, 10, 10);

    clip-path: inset(10% 8.5% 52.5% 8.5%);

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/galaxy.png"),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/galaxy.png"),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/galaxy.png"),
        repeating-linear-gradient(
            82deg,
            rgb(218, 56, 50) calc(var(--space) * 1),
            rgb(219, 204, 86) calc(var(--space) * 2),
            rgb(121, 199, 58) calc(var(--space) * 3),
            rgb(58, 192, 183) calc(var(--space) * 4),
            rgb(71, 98, 207) calc(var(--space) * 5),
            rgb(170, 69, 209) calc(var(--space) * 6),
            rgb(218, 56, 50) calc(var(--space) * 10)
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(255, 255, 255, 0.6) 5%,
            rgba(150, 150, 150, 0.3) 40%,
            rgb(0, 0, 0) 100%
        );

    background-blend-mode: color-dodge, color-burn, saturation, screen;
    background-position: center, center, center,
        calc(((50% - var(--posx)) * 2.5) + 50%)
            calc(((50% - var(--posy)) * 2.5) + 50%),
        center;
    background-size: cover, cover, cover, 600% 1200%, cover;

    filter: brightness(0.75) contrast(1.2) saturate(1.5);
    mix-blend-mode: color-dodge;
}

.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__shine,
.card[data-rarity="rare holo galaxy"][data-subtypes^="stage"] .card__shine {
    clip-path: polygon(
        91.78% 10%,
        57% 10%,
        53.92% 12%,
        17% 12%,
        16% 14%,
        12% 16%,
        8.5% 16%,
        7.93% 47.41%,
        92.07% 47.41%
    );
}
.card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__shine,
.card[data-rarity="rare holo galaxy"][data-subtypes^="supporter"] .card__shine {
    clip-path: inset(14.5% 7.9% 48.2% 8.7%);
}

/*

  V

*/

.card[data-rarity*="rare holo v"] .card__shine,
.card[data-rarity*="rare holo v"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 500px;

    background-image: var(--grain),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );

    background-blend-mode: screen, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);

    filter: brightness(0.8) contrast(2.95) saturate(0.5);
}

.card[data-rarity="rare holo v"] .card__shine:after {
    content: "";

    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);
    background-size: var(--imgsize), 200% 400%, 195%, 200%;

    filter: brightness(1) contrast(2.5) saturate(1.75);
    mix-blend-mode: soft-light;
}

/*

  VMAX

*/

.card[data-rarity="rare holo vmax"] .card__shine {
    --space: 6%;
    --angle: 133deg;
    --imgsize: 60% 30%;
    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/vmaxbg.webp"),
        repeating-linear-gradient(
            -33deg,
            rgb(206, 42, 36) calc(var(--space) * 1),
            rgb(157, 170, 223) calc(var(--space) * 2),
            rgb(45, 153, 146) calc(var(--space) * 3),
            rgb(29, 151, 36) calc(var(--space) * 4),
            rgb(181, 64, 228) calc(var(--space) * 5),
            rgb(206, 42, 36) calc(var(--space) * 6)
        ),
        repeating-linear-gradient(
            var(--angle),
            rgba(14, 21, 46, 0.5) 0%,
            hsl(180, 10%, 50%) 2.5%,
            hsl(83, 50%, 35%) 5%,
            hsl(180, 10%, 50%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(6, 218, 255, 0.6) 0%,
            rgba(38, 235, 127, 0.6) 25%,
            rgba(155, 78, 228, 0.6) 50%,
            rgba(228, 78, 90, 0.6) 75%
        );

    background-blend-mode: color-burn, screen, soft-light;
    background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2.5)
        saturate(0.6);
}

/*

  VSTAR

*/

.card[data-rarity="rare holo vstar"][data-supertype="pokémon"] .card__shine,
.card[data-rarity="rare holo vstar"][data-supertype="pokémon"]
    .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 30%;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/ancient.webp"),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );

    background-blend-mode: soft-light, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);

    filter: brightness(0.8) contrast(2) saturate(0.75);
}

.card[data-rarity="rare holo vstar"][data-supertype="pokémon"]
    .card__shine:after {
    content: "";

    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

    filter: brightness(1.2) contrast(1.5) saturate(1.75);
    mix-blend-mode: exclusion;
}

/*

  FULL / ALTERNATE ART

*/

.card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine,
.card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 50%;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp"),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );

    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2) saturate(1.5);
}

.card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine:after {
    content: "";

    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp) * 0.5) + 0.8)) contrast(1.6)
        saturate(1.4);
    mix-blend-mode: exclusion;
}

/*

  TRAINER FULL-ART

*/

.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine,
.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 50%;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/trainerbg.jpg"),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );

    background-blend-mode: difference, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);

    filter: brightness(0.75) contrast(2.5) saturate(0.75);
}

.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after {
    content: "";

    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

    filter: brightness(1.2) contrast(1) saturate(1.75);
    mix-blend-mode: exclusion;
}

/*

  RAINBOW SECRET

*/

.card[data-rarity^="rare rainbow"] .card__shine,
.card[data-rarity^="rare rainbow"] .card__shine:after {
    --space: 7%;
    --angle: -20deg;
    --angle2: 130deg;
    --imgsize: 540px 700px;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            var(--angle),
            rgb(253, 71, 65) calc(var(--space) * 1),
            rgb(255, 243, 151) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgb(75, 198, 255) calc(var(--space) * 5),
            rgb(255, 73, 246) calc(var(--space) * 6),
            rgb(255, 56, 49) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle2),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(118, 43%, 76%) 2.5%,
            rgb(223, 96, 202) 5%,
            hsl(180, 57%, 56%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        ),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp");

    background-size: 50% 50%, 500% 500%, 1000% 1000%, var(--imgsize);
    background-position: center, 0% calc(var(--posy) * 1.5),
        var(--posx) var(--posy), center;
    background-blend-mode: color-burn, soft-light, normal;

    filter: brightness(calc((var(--hyp) * 0.25) + 0.66)) contrast(2)
        saturate(0.95);
}

.card[data-rarity^="rare rainbow"] .card__shine:after {
    content: "";

    background-position: center, 0% calc(var(--posy) * -1),
        calc(var(--posx) * -1) calc(var(--posy) * -1), center;
    mix-blend-mode: exclusion;
}

/*

  RAINBOW SECRET FULL/ALT

*/

.card[data-rarity="rare rainbow alt"] .card__shine,
.card[data-rarity="rare rainbow alt"] .card__shine:after {
    filter: brightness(calc((var(--hyp) * 0.25) + 0.66)) contrast(3)
        saturate(0.7);
}

/*

  GOLD SECRET

*/

.card[data-rarity="rare secret"] .card__shine,
.card[data-rarity="rare secret"] .card__shine:after {
    --angle: 110deg;
    --imgsize: 250px;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            var(--angle),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(39, 37%, 60%) 2.5%,
            rgb(216, 183, 92) 5%,
            hsl(39, 37%, 60%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        ),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/metal.webp");

    background-size: 50% 50%, 600% 600%, var(--imgsize);
    background-position: center, var(--posx) var(--posy), center;
    background-blend-mode: color-burn, darken;

    filter: brightness(calc((var(--hyp) * 0.4) + 0.7)) contrast(3)
        saturate(0.66);
}

.card[data-rarity="rare secret"] .card__shine:after {
    content: "";

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            var(--angle),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(39, 37%, 60%) 2.5%,
            rgb(216, 183, 92) 5%,
            hsl(39, 37%, 60%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        );

    background-position: center, calc(var(--posx) * -1) calc(var(--posy) * -1),
        center;

    filter: brightness(calc((var(--hyp) * 0.3) + 0.7)) contrast(2.5)
        saturate(0.66);
    mix-blend-mode: exclusion;
}

/*

  RADIANT

*/

.card[data-rarity*="radiant"] .card__shine {
    --barwidth: 1.2%;
    --space: 200px;

    opacity: calc(((var(--hyp) * 0.7) + 0.2) * var(--o)) !important;
    clip-path: inset(2.8% 4% round 2.55% / 1.5%);

    background-image: repeating-linear-gradient(
            55deg,
            rgb(255, 161, 158) calc(var(--space) * 1),
            rgb(85, 178, 255) calc(var(--space) * 2),
            rgb(255, 199, 146) calc(var(--space) * 3),
            rgb(130, 255, 213) calc(var(--space) * 4),
            rgb(253, 170, 240) calc(var(--space) * 5),
            rgb(148, 241, 255) calc(var(--space) * 6),
            rgb(255, 161, 158) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            45deg,
            hsl(0, 0%, 10%) 0%,
            hsl(0, 0%, 10%) 1%,
            hsl(0, 0%, 10%) var(--barwidth),
            hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
        ),
        repeating-linear-gradient(
            -45deg,
            hsl(0, 0%, 10%) 0%,
            hsl(0, 0%, 10%) 1%,
            hsl(0, 0%, 10%) var(--barwidth),
            hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
        );

    background-size: 400% 400%, 210% 210%, 210% 210%;
    background-position: calc(((var(--posx) - 50%) * -2.5) + 50%)
            calc(((var(--posy) - 50%) * -2.5) + 50%),
        calc(((var(--posx) - 50%) * 1.5) + 50%)
            calc(((var(--posy) - 50%) * 1.5) + 50%),
        calc(((var(--posx) - 50%) * 1.5) + 50%)
            calc(((var(--posy) - 50%) * 1.5) + 50%);

    background-blend-mode: exclusion, darken, color-dodge;

    filter: brightness(0.95) contrast(4) saturate(0.75);
    mix-blend-mode: color-dodge;
}

.card[data-rarity*="radiant"] .card__shine:after {
    content: "";

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            55deg,
            rgb(255, 161, 158) calc(var(--space) * 1),
            rgb(85, 178, 255) calc(var(--space) * 2),
            rgb(255, 199, 146) calc(var(--space) * 3),
            rgb(130, 255, 213) calc(var(--space) * 4),
            rgb(253, 170, 240) calc(var(--space) * 5),
            rgb(148, 241, 255) calc(var(--space) * 6),
            rgb(255, 161, 158) calc(var(--space) * 7)
        );

    background-size: 40%, 400%;
    background-position: center,
        calc(((var(--posx) - 50%) * -2.5) + 50%)
            calc(((var(--posy) - 50%) * -2.5) + 50%);

    filter: brightness(1) contrast(1) saturate(0);
    mix-blend-mode: soft-light;

    background-blend-mode: multiply;
}

.card[data-rarity*="radiant"] .card__shine:before {
    content: "";
    z-index: 3;
    grid-area: 1/1;

    background-image: radial-gradient(
        farthest-corner ellipse at calc(((var(--mx)) * 0.5) + 25%)
            calc(((var(--my)) * 0.5) + 25%),
        rgba(100, 100, 100, 0.5) 5%,
        rgba(50, 50, 50, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 30%
    );

    background-position: center;
    background-size: 350% 350%;

    mix-blend-mode: multiply;
}

/*

  TRAINER GALLERY HOLO

*/

.card[data-rarity="rare holo"][data-gallery="true"] .card__shine {
    --space: 5%;
    --angle: -22deg;
    --imgsize: 200% 400%;

    clip-path: inset(2.8% 4% round 2.55% / 1.5%);

    background-image: repeating-linear-gradient(
        var(--angle),
        rgba(174, 102, 202, 0.75) calc(var(--space) * 1),
        rgba(228, 77, 72, 0.75) calc(var(--space) * 2),
        rgba(216, 197, 55, 0.75) calc(var(--space) * 3),
        rgba(124, 201, 62, 0.75) calc(var(--space) * 4),
        rgba(80, 177, 170, 0.75) calc(var(--space) * 5),
        rgba(136, 160, 255, 0.75) calc(var(--space) * 6),
        rgba(176, 105, 204, 0.75) calc(var(--space) * 7)
    );

    background-blend-mode: color-dodge;
    background-size: var(--imgsize), 300%, 200%;
    background-position: 0% calc(var(--posy) * 1), var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp) * 0.3) + 0.6)) contrast(2.3)
        saturate(1.1);
}

.card[data-rarity="rare holo"][data-gallery="true"] .card__shine:after {
    content: "";

    background-image: radial-gradient(
        farthest-corner ellipse at calc(((var(--mx)) * 0.5) + 25%)
            calc(((var(--my)) * 0.5) + 25%),
        rgb(255, 255, 255) 5%,
        rgba(55, 0, 55, 0.6) 25%,
        rgb(55, 55, 55) 90%
    );

    background-position: center;
    background-size: 200% 200%;

    filter: brightness(calc((var(--hyp) * 0.2) + 0.4)) contrast(0.85)
        saturate(1.1);
    mix-blend-mode: hard-light;
}

/*

  TRAINER GALLERY V

*/

.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine,
.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --img: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp");
    --imgsize: 60%;

    background-image: var(--img),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );

    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp) * 0.4) + 0.5)) contrast(2.5) saturate(1);
}

.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine:after {
    content: "";

    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

    filter: brightness(calc((var(--hyp) * 0.5) + 0.7)) contrast(2) saturate(1);
    mix-blend-mode: exclusion;
}

.card[data-rarity="rare holo v"][data-gallery="true"][data-subtypes*="vmax"]
    .card__shine,
.card[data-rarity="rare holo v"][data-gallery="true"][data-subtypes*="vmax"]
    .card__shine:after {
    --img: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/stylish.webp");
    --imgsize: 48%;
}

/********************************/

html,
body,
iframe {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    background: #393c42;
}








/**********/

p.scroll {
    position: fixed;
    font-size: 0.875rem;
    left: 50px;
    bottom: 20px;
    width: 300px;
    text-align: left;
    color: cyan;
    font-weight: bold;
    text-shadow: 0 1px 0 black;
    pointer-events: none;
    cursor: default;
    user-select: none;
}
svg {
    position: fixed;
    left: 25px;
    bottom: 35px;
    width: 22px;
    fill: cyan;
    transform: translateX(-50%);
    filter: drop-shadow(0 1px 0 black);
    animation: bounce 1s ease infinite;
    pointer-events: none;
    cursor: default;
    user-select: none;
}

@keyframes bounce {
    50% {
        transform: translateX(-50%) translateY(5px);
    }
}