:root { --bg-color: #111; --main-color: #eee; --caret-color: #eee; --sub-color: #444; } @keyframes rgb{ 0%{ color: #f44336; } 25%{ color: #FFC107; } 50%{ color: #4CAF50; } 75%{ color: #3F51B5; } 100%{ color: #f44336; } } .word.error { border-bottom: 2px solid #ccc; } .word letter.incorrect { color: white; } .word letter.incorrect.extra { color: white; } .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; }