:root {
    --start-angle: 0deg;
    --gradients: 180deg;
    --angle-180: 180deg;
    --radial-gradient-gold: #ffffff00 25deg, #ffffff 43.4deg, #fbe3d100 60deg, #101419cc 0, #fff0 310deg, #101419cc 408.4deg;
    --radial-gradient-blue: #ffffff00 25deg, #a3b8d6 43.4deg, #fbe3d100 60deg, #101419cc 0, #fff0 310deg, #101419cc 408.4deg;
    --conic-gradient-white: #ffffff14 -54deg, #fff 50.4deg, #fbe3d10d 126deg, #fbe3d1 234deg, #ffffff14 306deg, #fff 410.4deg;
    --conic-gradient-red: #ffffff14 -54deg, var(--color-7) 50.4deg, #fbe3d10d 126deg, var(--color-7) 234deg, #ffffff14 306deg, var(--color-6) 410.4deg;
}

@keyframes btn-votar  {
    0%, 50%, 100% {
        transform: translateY(0);
    }
    25%, 75% {
        transform: translateY(-10px);
    }
}

@keyframes goldToblue-gradient-rotate {

    0%,
    to {
        background: conic-gradient(from var(--start-angle) at 50% 50%, var(--radial-gradient-gold))
    }

    2% {
        background: conic-gradient(from calc(var(--start-angle) + 7.2deg) at 50% 50%, var(--radial-gradient-gold))
    }

    4% {
        background: conic-gradient(from calc(var(--start-angle) + 14.4deg) at 50% 50%, var(--radial-gradient-gold))
    }

    6% {
        background: conic-gradient(from calc(var(--start-angle) + 21.6deg) at 50% 50%, var(--radial-gradient-gold))
    }

    8% {
        background: conic-gradient(from calc(var(--start-angle) + 28.8deg) at 50% 50%, var(--radial-gradient-gold))
    }

    10% {
        background: conic-gradient(from calc(var(--start-angle) + 36deg) at 50% 50%, var(--radial-gradient-gold))
    }

    12% {
        background: conic-gradient(from calc(var(--start-angle) + 43.2deg) at 50% 50%, var(--radial-gradient-gold))
    }

    14% {
        background: conic-gradient(from calc(var(--start-angle) + 50.4deg) at 50% 50%, var(--radial-gradient-blue))
    }

    16% {
        background: conic-gradient(from calc(var(--start-angle) + 57.6deg) at 50% 50%, var(--radial-gradient-blue))
    }

    18% {
        background: conic-gradient(from calc(var(--start-angle) + 64.8deg) at 50% 50%, var(--radial-gradient-blue))
    }

    20% {
        background: conic-gradient(from calc(var(--start-angle) + 72deg) at 50% 50%, var(--radial-gradient-blue))
    }

    22% {
        background: conic-gradient(from calc(var(--start-angle) + 79.2deg) at 50% 50%, var(--radial-gradient-blue))
    }

    24% {
        background: conic-gradient(from calc(var(--start-angle) + 86.4deg) at 50% 50%, var(--radial-gradient-blue))
    }

    26% {
        background: conic-gradient(from calc(var(--start-angle) + 93.6deg) at 50% 50%, var(--radial-gradient-gold))
    }

    28% {
        background: conic-gradient(from calc(var(--start-angle) + 100.8deg) at 50% 50%, var(--radial-gradient-gold))
    }

    30% {
        background: conic-gradient(from calc(var(--start-angle) + 108deg) at 50% 50%, var(--radial-gradient-gold))
    }

    32% {
        background: conic-gradient(from calc(var(--start-angle) + .32turn) at 50% 50%, var(--radial-gradient-gold))
    }

    34% {
        background: conic-gradient(from calc(var(--start-angle) + .34turn) at 50% 50%, var(--radial-gradient-gold))
    }

    36% {
        background: conic-gradient(from calc(var(--start-angle) + .36turn) at 50% 50%, var(--radial-gradient-gold))
    }

    38% {
        background: conic-gradient(from calc(var(--start-angle) + .38turn) at 50% 50%, var(--radial-gradient-blue))
    }

    40% {
        background: conic-gradient(from calc(var(--start-angle) + 144deg) at 50% 50%, var(--radial-gradient-blue))
    }

    42% {
        background: conic-gradient(from calc(var(--start-angle) + .42turn) at 50% 50%, var(--radial-gradient-blue))
    }

    44% {
        background: conic-gradient(from calc(var(--start-angle) + .44turn) at 50% 50%, var(--radial-gradient-blue))
    }

    46% {
        background: conic-gradient(from calc(var(--start-angle) + 165.6deg) at 50% 50%, var(--radial-gradient-blue))
    }

    48% {
        background: conic-gradient(from calc(var(--start-angle) + 172.8deg) at 50% 50%, var(--radial-gradient-blue))
    }

    50% {
        background: conic-gradient(from calc(var(--start-angle) + 180deg) at 50% 50%, var(--radial-gradient-gold))
    }

    52% {
        background: conic-gradient(from calc(var(--start-angle) + .52turn) at 50% 50%, var(--radial-gradient-gold))
    }

    54% {
        background: conic-gradient(from calc(var(--start-angle) + .54turn) at 50% 50%, var(--radial-gradient-gold))
    }

    56% {
        background: conic-gradient(from calc(var(--start-angle) + 201.6deg) at 50% 50%, var(--radial-gradient-gold))
    }

    58% {
        background: conic-gradient(from calc(var(--start-angle) + 208.8deg) at 50% 50%, var(--radial-gradient-gold))
    }

    60% {
        background: conic-gradient(from calc(var(--start-angle) + 216deg) at 50% 50%, var(--radial-gradient-gold))
    }

    62% {
        background: conic-gradient(from calc(var(--start-angle) + .62turn) at 50% 50%, var(--radial-gradient-blue))
    }

    64% {
        background: conic-gradient(from calc(var(--start-angle) + .64turn) at 50% 50%, var(--radial-gradient-blue))
    }

    66% {
        background: conic-gradient(from calc(var(--start-angle) + .66turn) at 50% 50%, var(--radial-gradient-blue))
    }

    68% {
        background: conic-gradient(from calc(var(--start-angle) + .68turn) at 50% 50%, var(--radial-gradient-blue))
    }

    70% {
        background: conic-gradient(from calc(var(--start-angle) + 252deg) at 50% 50%, var(--radial-gradient-blue))
    }

    72% {
        background: conic-gradient(from calc(var(--start-angle) + .72turn) at 50% 50%, var(--radial-gradient-blue))
    }

    74% {
        background: conic-gradient(from calc(var(--start-angle) + .74turn) at 50% 50%, var(--radial-gradient-gold))
    }

    76% {
        background: conic-gradient(from calc(var(--start-angle) + .76turn) at 50% 50%, var(--radial-gradient-gold))
    }

    78% {
        background: conic-gradient(from calc(var(--start-angle) + .78turn) at 50% 50%, var(--radial-gradient-gold))
    }

    80% {
        background: conic-gradient(from calc(var(--start-angle) + 288deg) at 50% 50%, var(--radial-gradient-gold))
    }

    82% {
        background: conic-gradient(from calc(var(--start-angle) + .82turn) at 50% 50%, var(--radial-gradient-gold))
    }

    84% {
        background: conic-gradient(from calc(var(--start-angle) + .84turn) at 50% 50%, var(--radial-gradient-gold))
    }

    86% {
        background: conic-gradient(from calc(var(--start-angle) + 309.6deg) at 50% 50%, var(--radial-gradient-blue))
    }

    88% {
        background: conic-gradient(from calc(var(--start-angle) + .88turn) at 50% 50%, var(--radial-gradient-blue))
    }

    90% {
        background: conic-gradient(from calc(var(--start-angle) + 324deg) at 50% 50%, var(--radial-gradient-blue))
    }

    92% {
        background: conic-gradient(from calc(var(--start-angle) + 331.2deg) at 50% 50%, var(--radial-gradient-blue))
    }

    94% {
        background: conic-gradient(from calc(var(--start-angle) + .94turn) at 50% 50%, var(--radial-gradient-blue))
    }

    96% {
        background: conic-gradient(from calc(var(--start-angle) + 345.6deg) at 50% 50%, var(--radial-gradient-blue))
    }

    98% {
        background: conic-gradient(from calc(var(--start-angle) + .98turn) at 50% 50%, var(--radial-gradient-blue))
    }
}

@keyframes white-gradient-rotate-rev {

    0%,
    to {
        background: conic-gradient(from var(--angle-180) at 50% 50%, var(--conic-gradient-white))
    }

    10% {
        background: conic-gradient(from calc(var(--angle-180) + 18deg) at 50% 50%, var(--conic-gradient-white))
    }

    20% {
        background: conic-gradient(from calc(var(--angle-180) + 36deg) at 50% 50%, var(--conic-gradient-white))
    }

    30% {
        background: conic-gradient(from calc(var(--angle-180) + 54deg) at 50% 50%, var(--conic-gradient-white))
    }

    40% {
        background: conic-gradient(from calc(var(--angle-180) + 72deg) at 50% 50%, var(--conic-gradient-white))
    }

    50% {
        background: conic-gradient(from calc(var(--angle-180) + 90deg) at 50% 50%, var(--conic-gradient-white))
    }

    60% {
        background: conic-gradient(from calc(var(--angle-180) + 108deg) at 50% 50%, var(--conic-gradient-white))
    }

    70% {
        background: conic-gradient(from calc(var(--angle-180) + 126deg) at 50% 50%, var(--conic-gradient-white))
    }

    80% {
        background: conic-gradient(from calc(var(--angle-180) + 144deg) at 50% 50%, var(--conic-gradient-white))
    }

    90% {
        background: conic-gradient(from calc(var(--angle-180) + 162deg) at 50% 50%, var(--conic-gradient-white))
    }
}

@keyframes white-gradient-rotate {

    0%,
    to {
        background: conic-gradient(from var(--angle-180) at 50% 50%, var(--conic-gradient-white))
    }

    10% {
        background: conic-gradient(from calc(var(--angle-180) - 18deg) at 50% 50%, var(--conic-gradient-white))
    }

    20% {
        background: conic-gradient(from calc(var(--angle-180) - 36deg) at 50% 50%, var(--conic-gradient-white))
    }

    30% {
        background: conic-gradient(from calc(var(--angle-180) - 54deg) at 50% 50%, var(--conic-gradient-white))
    }

    40% {
        background: conic-gradient(from calc(var(--angle-180) - 72deg) at 50% 50%, var(--conic-gradient-white))
    }

    50% {
        background: conic-gradient(from calc(var(--angle-180) - 90deg) at 50% 50%, var(--conic-gradient-white))
    }

    60% {
        background: conic-gradient(from calc(var(--angle-180) - 108deg) at 50% 50%, var(--conic-gradient-white))
    }

    70% {
        background: conic-gradient(from calc(var(--angle-180) - 126deg) at 50% 50%, var(--conic-gradient-white))
    }

    80% {
        background: conic-gradient(from calc(var(--angle-180) - 144deg) at 50% 50%, var(--conic-gradient-white))
    }

    90% {
        background: conic-gradient(from calc(var(--angle-180) - 162deg) at 50% 50%, var(--conic-gradient-white))
    }
}

@keyframes red-gradient-rotate-rev {

    0%,
    to {
        background: conic-gradient(from var(--angle-180) at 50% 50%, var(--conic-gradient-red))
    }

    10% {
        background: conic-gradient(from calc(var(--angle-180) + 18deg) at 50% 50%, var(--conic-gradient-red))
    }

    20% {
        background: conic-gradient(from calc(var(--angle-180) + 36deg) at 50% 50%, var(--conic-gradient-red))
    }

    30% {
        background: conic-gradient(from calc(var(--angle-180) + 54deg) at 50% 50%, var(--conic-gradient-red))
    }

    40% {
        background: conic-gradient(from calc(var(--angle-180) + 72deg) at 50% 50%, var(--conic-gradient-red))
    }

    50% {
        background: conic-gradient(from calc(var(--angle-180) + 90deg) at 50% 50%, var(--conic-gradient-red))
    }

    60% {
        background: conic-gradient(from calc(var(--angle-180) + 108deg) at 50% 50%, var(--conic-gradient-red))
    }

    70% {
        background: conic-gradient(from calc(var(--angle-180) + 126deg) at 50% 50%, var(--conic-gradient-red))
    }

    80% {
        background: conic-gradient(from calc(var(--angle-180) + 144deg) at 50% 50%, var(--conic-gradient-red))
    }

    90% {
        background: conic-gradient(from calc(var(--angle-180) + 162deg) at 50% 50%, var(--conic-gradient-red))
    }
}

@keyframes red-gradient-rotate {

    0%,
    to {
        background: conic-gradient(from var(--angle-180) at 50% 50%, var(--conic-gradient-red))
    }

    10% {
        background: conic-gradient(from calc(var(--angle-180) - 18deg) at 50% 50%, var(--conic-gradient-red))
    }

    20% {
        background: conic-gradient(from calc(var(--angle-180) - 36deg) at 50% 50%, var(--conic-gradient-red))
    }

    30% {
        background: conic-gradient(from calc(var(--angle-180) - 54deg) at 50% 50%, var(--conic-gradient-red))
    }

    40% {
        background: conic-gradient(from calc(var(--angle-180) - 72deg) at 50% 50%, var(--conic-gradient-red))
    }

    50% {
        background: conic-gradient(from calc(var(--angle-180) - 90deg) at 50% 50%, var(--conic-gradient-red))
    }

    60% {
        background: conic-gradient(from calc(var(--angle-180) - 108deg) at 50% 50%, var(--conic-gradient-red))
    }

    70% {
        background: conic-gradient(from calc(var(--angle-180) - 126deg) at 50% 50%, var(--conic-gradient-red))
    }

    80% {
        background: conic-gradient(from calc(var(--angle-180) - 144deg) at 50% 50%, var(--conic-gradient-red))
    }

    90% {
        background: conic-gradient(from calc(var(--angle-180) - 162deg) at 50% 50%, var(--conic-gradient-red))
    }
}