.gold {
    color: #fad429 !important;
    animation-delay: 1s;
    background: linear-gradient(125deg, #fad429 0%, #fad429 10%, white 20%, #fad429 30%, #fad429 100%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine 3s linear infinite;
    animation: shine 3s linear infinite;
}

.silver {
    color: #bebebe !important;
    animation-delay: 2s;
    background: linear-gradient(125deg, #bebebe 0%, #bebebe 10%, white 20%, #bebebe 30%, #bebebe 100%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine 4s linear infinite;
    animation: shine 4s linear infinite;
}

.bronze {
    color: #c18a50 !important;
    animation-delay: 3s;
    background: linear-gradient(125deg, #c18a50 0%, #c18a50 10%, white 20%, #c18a50 30%, #c18a50 100%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine 4s linear infinite;
    animation: shine 4s linear infinite;
}

@keyframes shine {
    0% {
        background-position: 100% center;
    }

    30% {
        background-position: 200% center;
    }

    40% {
        background-position: 300% center;
    }

    100% {
        background-position: 300% center;
    }
}