monkeytype.com by tuffys

/* ==UserStyle==
@name         monkeytype.com
@version      20220404.11.19
@namespace    userstyles.world/user/tuffys
@description  just trying different effects (css) for monkeytype, using stylus.
@author       tuffys
@license      No License
==/UserStyle== */

@-moz-document domain("monkeytype.com") {
#top .logo .icon {
    width: 3rem;
}
#top .logo .text {
    visibility: hidden;
}
#top .logo .text .top:after {
    content: 'testing';
    visibility: visible; 
    display: block; 
    position: relative;
    font-size: 0.8rem;
    margin-top: -.8rem;
    margin-left: -.15rem;
}
#top .logo .text:after {
    content: 'monkeh';
    visibility: visible; 
    display: block; 
    position: relative;
    margin-top: -2rem;
}

.word:not(.active):not([burst]) letter:nth-child(odd).correct, .word.error:not(.active):not([burst]) letter:nth-child(odd) {
    animation-name: moveup;
    animation-duration: 1s;
    transform: translate(0, -50%);
    opacity: 0;
}

.word:not(.active):not([burst]) letter:nth-child(even).correct, .word.error:not(.active):not([burst]) letter:nth-child(even) {
    animation-name: movedown;
    animation-duration: 1s;
    transform: translate(0, 50%);
    opacity: 0;
}

.word.error {
    border-bottom: none;
}

@keyframes moveup {
    0% {transform: translate(0, 0px); opacity:1;}
    100% {transform: translate(0, -50%); opacity:0}
}

@keyframes movedown {
    0% {transform: translate(0, 0px); opacity:1;}
    100% {transform: translate(0, 50%); opacity:0}
}
}