:root {
    --bg-color: #111;
    --main-color: #eee;
    --caret-color: #eee;
    --sub-color: #444;
    --text-color: #eee;
    --error-color: #eee;
    --error-extra-color: rgb(179, 179, 179);
}

@keyframes rgb{
    0%{
        color: #f44336;
    }
    25%{
        color: #FFC107;
    }
    50%{
        color: #4CAF50;
    }
    75%{
        color: #3F51B5;
    }
    100%{
        color: #f44336;
    }
}

@keyframes rgb-bg{
    0%{
        background: #f44336;
    }
    25%{
        background: #FFC107;
    }
    50%{
        background: #4CAF50;
    }
    75%{
        background: #3F51B5;
    }
    100%{
        background: #f44336;
    }
}

.button.discord::after,
#caret,
.pageSettings .section .buttons .button.active,
.pageSettings .section.languages .buttons .language.active,
.pageAccount .group.filterButtons .buttons .button.active
{
    animation-name: rgb-bg !important;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#top.focus .button.discord::after{
    animation-name: none !important;
}

.logo .bottom,
#top .config .group .buttons .button.active,
#result .stats .group .bottom,
#menu .button:hover,
#top .config .group .buttons .button:hover,
a:hover,
#words.flipped .word{
    animation-name: rgb;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* .word letter.correct{
    animation-name: rgb;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}  */


#words.flipped .word letter.correct {
    color: var(--sub-color);
}

#words:not(.flipped) .word letter.correct {
    animation-name: rgb;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}