/* Original idea by Luke Embrey                 */
/* Changed by Helmuth Hahn-Heinze (C) 2022 */

.animate-charcter1 {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg,
            #231557 0%,
            #44107a 29%,
            #ff1361 67%,
            #fff800 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip1 2s linear infinite;
    display: inline-block;
    font-size: 40px;
}

@keyframes textclip1 {
    to {
        background-position: 200% center;
    }
}

.animate-charcter2 {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg,
            #fff800 0%,
            #ff1361 29%,
            #44107a 67%,
            #231557 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip2 2s linear infinite;
    display: inline-block;
    font-size: 40px;
}

@keyframes textclip2 {
    to {
        background-position: -200% center;
    }
}