liminal by sashaem

/* ==UserStyle==
@name           monkeytype base
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    small tweaks for monkeytype
@author         refact0r
@homepageURL    https://github.com/refact0r/monkeytype-themes
==/UserStyle== */

@-moz-document domain("monkeytype.com") {    
    /* hide scrollbar */
    body {
        overflow-y: hidden;
    }
    
    /* force font on logo */
    *:not(i) {
        font-family: var(--font) !important;
    }
    
    /* hide bottom */
	#bottom {
        display: none;
    }
    
    /* center menu */
	#top {
		grid-template-columns: 0fr auto 1fr;
    }

    /* increase menu gap */
    #menu {
        gap: 2rem;
    }
    
    /* hide account name */
    .icon-button .text {
        display: none;
    }
    
    /* typing test margins */
    #middle {
        margin-left: 20%;
        margin-right: 20%;
    }
    
    /* change logo text */
    #top .logo .icon {
        width: 0rem;
    }
    #top .logo .text {
        visibility: hidden;
    }
    #top .logo .text .top:after {
        content: 'reject humanity';
        visibility: hidden; 
        display: block; 
        position: relative;
        font-size: 0.8rem;
        margin-top: -.8rem;
        margin-left: -.15rem;
    }
    #top .logo .text:after {
        content: 'become monke';
        visibility: hidden; 
        display: block; 
        position: relative;
        margin-top: -2rem;
    }
    
    #top .config .top
    {
        margin-left: 0rem;
    }
    
    /* caret width */
    #caret.default {
        width: 1px;
    }
    
    /* change live wpm and acc text size */
    #liveWpm,
    #liveAcc{
        font-size: 6rem;
    }
    
    /* letter fading */
    #words letter.correct {
        animation: fadeOut 3s ease forwards;
    }
    @keyframes fadeOut {
        100% { opacity:0; }
    }
    
    /* menu transition */
    #top {
        transition: transform 1s ease;
    }
    #top.focus {
        transform: translateY(-100px);
    }
    #top.focus .config {
        opacity: 1 !important;
    }
    #top.focus #menu {
        color: var(--sub-color) !important;
    }
    #top.focus #menu .icon-button {
        color: var(--sub-color) !important;
    }
    
    /* live wpm and live acc transitions */
    #liveWpm {
        display: block !important;
        transition: transform 1s ease;
    }
    #liveWpm.hidden {
        transform: translateY(400px);
    }
    #liveAcc {
        display: block !important;
        transition: transform 1s ease;
    }
    #liveAcc.hidden {
        transform: translateY(400px);
    }
}