MT Easy for the eyes RGB by fe4rlish

/* ==UserStyle==
@name           MT Easy for the eyes RGB
@namespace      USO Archive
@author         bonehead
@description    `Modified RGB theme to create more contrast between the text and the background.`
@version        20201119.10.59
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("monkeytype.com") {
    :root {
        --bg-color: #0b0b0b;
        /* Background colour */
        --main-color: #c4c4c4;
        --caret-color: #eee;
        --sub-color: #969696;
        /* Main text colour */
        --text-color: #eee;
        --error-color: #eee;
        --error-extra-color: #b3b3b3;
        --colorful-error-color: #ffffff;
        /* Wrong character error text colour */
        --colorful-error-extra-color: #ffffff;
        /* Extra character error text colour */
        --balloon-color: #151515;
        --trans-button: #8f8f8f1f;
    }
    @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;
        }
    }

    @keyframes rgb-bgc {
        0% {
            background-color: #f44336;
        }
        25% {
            background-color: #ffc107;
        }
        50% {
            background-color: #4caf50;
        }
        75% {
            background-color: #3f51b5;
        }
        100% {
            background-color: #f44336;
        }
    }

    #words.flipped.colorfulMode .word.error,
    #words.colorfulMode .word.error {
        border-bottom: 2px solid #ffffff;
    }

    .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: 14s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .button:hover,
    .button:focus {
        color: var(--bg-color);
        background: var(--main-color);
    }
    .button {
        color: var(--text-color);
        cursor: pointer;
        transition: .15s;
        background: var(--trans-button);
    }

    .pageSettings .settingsGroup.quickNav .links a {
        text-decoration: none;
        opacity: .8;
    }

    .pageSettings .section .button.danger {
        background: var(--trans-button);
        color: var(--text-color);
    }

    .pageSettings .section .button.danger:hover {
        background: var(--main-color);
        color: var(--bg-color);
    }

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

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

    .keymap-key.active-key {
        color: var(--colorful-error-color);
        animation-name: rgb-bgc;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        border-color: var(--main-color);
    }

    .word letter.correct {
        animation-name: rgb;
        animation-duration: 14s;
        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: 14s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    #liveWpm,
    #timerNumber {
        color: #fff;
    }
}