: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{
    animation-name: rgb-bg !important;
    animation-duration: 1s;
    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 {
    animation-name: rgb;
    animation-duration: 1s;
    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;
}