@keyframes wheelHueColor {
    0% {
        background-color: hsl(0, 0%, 100%);
    }

    /* White */
    1% {
        background-color: hsl(180, 100%, 95%);
    }

    /* Light cyan */
    2% {
        background-color: hsl(182, 100%, 95%);
    }

    3% {
        background-color: hsl(184, 100%, 95%);
    }

    4% {
        background-color: hsl(186, 100%, 95%);
    }

    5% {
        background-color: hsl(188, 100%, 95%);
    }

    6% {
        background-color: hsl(190, 100%, 95%);
    }

    7% {
        background-color: hsl(192, 100%, 95%);
    }

    8% {
        background-color: hsl(194, 100%, 95%);
    }

    9% {
        background-color: hsl(196, 100%, 95%);
    }

    10% {
        background-color: hsl(198, 100%, 95%);
    }

    11% {
        background-color: hsl(200, 100%, 95%);
    }

    12% {
        background-color: hsl(202, 100%, 95%);
    }

    13% {
        background-color: hsl(204, 100%, 95%);
    }

    14% {
        background-color: hsl(206, 100%, 95%);
    }

    15% {
        background-color: hsl(208, 100%, 95%);
    }

    16% {
        background-color: hsl(210, 100%, 95%);
    }

    17% {
        background-color: hsl(212, 100%, 95%);
    }

    18% {
        background-color: hsl(214, 100%, 95%);
    }

    19% {
        background-color: hsl(216, 100%, 95%);
    }

    20% {
        background-color: hsl(218, 100%, 95%);
    }

    21% {
        background-color: hsl(220, 100%, 95%);
    }

    22% {
        background-color: hsl(222, 100%, 95%);
    }

    23% {
        background-color: hsl(224, 100%, 95%);
    }

    24% {
        background-color: hsl(226, 100%, 95%);
    }

    25% {
        background-color: hsl(228, 100%, 95%);
    }

    26% {
        background-color: hsl(230, 100%, 95%);
    }

    27% {
        background-color: hsl(232, 100%, 95%);
    }

    28% {
        background-color: hsl(234, 100%, 95%);
    }

    29% {
        background-color: hsl(236, 100%, 95%);
    }

    30% {
        background-color: hsl(238, 100%, 95%);
    }

    31% {
        background-color: hsl(240, 100%, 95%);
    }

    /* Light blue */
    32% {
        background-color: hsl(242, 100%, 95%);
    }

    33% {
        background-color: hsl(244, 100%, 95%);
    }

    34% {
        background-color: hsl(246, 100%, 95%);
    }

    35% {
        background-color: hsl(248, 100%, 95%);
    }

    36% {
        background-color: hsl(250, 100%, 95%);
    }

    37% {
        background-color: hsl(252, 100%, 95%);
    }

    38% {
        background-color: hsl(254, 100%, 95%);
    }

    39% {
        background-color: hsl(256, 100%, 95%);
    }

    40% {
        background-color: hsl(258, 100%, 95%);
    }

    41% {
        background-color: hsl(260, 100%, 95%);
    }

    42% {
        background-color: hsl(262, 100%, 95%);
    }

    43% {
        background-color: hsl(264, 100%, 95%);
    }

    44% {
        background-color: hsl(266, 100%, 95%);
    }

    45% {
        background-color: hsl(268, 100%, 95%);
    }

    46% {
        background-color: hsl(270, 100%, 95%);
    }

    /* Light purple */
    47% {
        background-color: hsl(272, 100%, 95%);
    }

    48% {
        background-color: hsl(274, 100%, 95%);
    }

    49% {
        background-color: hsl(276, 100%, 95%);
    }

    50% {
        background-color: hsl(278, 100%, 95%);
    }

    51% {
        background-color: hsl(280, 100%, 95%);
    }

    52% {
        background-color: hsl(282, 100%, 95%);
    }

    53% {
        background-color: hsl(284, 100%, 95%);
    }

    54% {
        background-color: hsl(286, 100%, 95%);
    }

    55% {
        background-color: hsl(288, 100%, 95%);
    }

    56% {
        background-color: hsl(290, 100%, 95%);
    }

    57% {
        background-color: hsl(292, 100%, 95%);
    }

    58% {
        background-color: hsl(294, 100%, 95%);
    }

    59% {
        background-color: hsl(296, 100%, 95%);
    }

    60% {
        background-color: hsl(298, 100%, 95%);
    }

    61% {
        background-color: hsl(300, 100%, 95%);
    }

    /* Purple */
    62% {
        background-color: hsl(302, 100%, 95%);
    }

    63% {
        background-color: hsl(304, 100%, 95%);
    }

    64% {
        background-color: hsl(306, 100%, 95%);
    }

    65% {
        background-color: hsl(308, 100%, 95%);
    }

    66% {
        background-color: hsl(310, 100%, 95%);
    }

    67% {
        background-color: hsl(312, 100%, 95%);
    }

    68% {
        background-color: hsl(314, 100%, 95%);
    }

    69% {
        background-color: hsl(316, 100%, 95%);
    }

    70% {
        background-color: hsl(318, 100%, 95%);
    }

    71% {
        background-color: hsl(320, 100%, 95%);
    }

    72% {
        background-color: hsl(322, 100%, 95%);
    }

    73% {
        background-color: hsl(324, 100%, 95%);
    }

    74% {
        background-color: hsl(326, 100%, 95%);
    }

    75% {
        background-color: hsl(328, 100%, 95%);
    }

    76% {
        background-color: hsl(330, 100%, 95%);
    }

    /* Pink */
    77% {
        background-color: hsl(332, 100%, 95%);
    }

    78% {
        background-color: hsl(334, 100%, 95%);
    }

    79% {
        background-color: hsl(336, 100%, 95%);
    }

    80% {
        background-color: hsl(338, 100%, 95%);
    }

    81% {
        background-color: hsl(340, 100%, 95%);
    }

    82% {
        background-color: hsl(342, 100%, 95%);
    }

    83% {
        background-color: hsl(344, 100%, 95%);
    }

    84% {
        background-color: hsl(346, 100%, 95%);
    }

    85% {
        background-color: hsl(348, 100%, 95%);
    }

    86% {
        background-color: hsl(350, 100%, 95%);
    }

    87% {
        background-color: hsl(352, 100%, 95%);
    }

    88% {
        background-color: hsl(354, 100%, 95%);
    }

    89% {
        background-color: hsl(356, 100%, 95%);
    }

    90% {
        background-color: hsl(358, 100%, 95%);
    }

    91% {
        background-color: hsl(0, 100%, 95%);
    }

    92% {
        background-color: hsl(2, 100%, 95%);
    }

    93% {
        background-color: hsl(4, 100%, 95%);
    }

    94% {
        background-color: hsl(6, 100%, 95%);
    }

    95% {
        background-color: hsl(8, 100%, 95%);
    }

    96% {
        background-color: hsl(10, 100%, 95%);
    }

    97% {
        background-color: hsl(12, 100%, 95%);
    }

    98% {
        background-color: hsl(14, 100%, 95%);
    }

    99% {
        background-color: hsl(16, 100%, 95%);
    }

    100% {
        background-color: hsl(0, 0%, 100%);
    }

    /* White */
}

#basket-yearly.active {
    background-image: white;
    animation: wheelHueColor 33s infinite;
    background-size: 400% 400%;
}


@supports (background-blend-mode: overlay) {
    .basket-container {
        transition: background 1s ease-in-out;
        background-image: white;
        background-blend-mode: overlay;
    }
}