Monkey Type Immersive Redesing by Perseus333

/* ==UserStyle==
@name         monkeytype.com
@version      20230605.13.58
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://monkeytype.com/") {
#top {
    margin-top: 3%;
    transform: scale(1.2);
    margin-right: auto;
}

/*This allows for logo cutomization*/
#top .logo .top {
    content:'';
    visibility: hidden;
    display: block; 
    position: relative; 
}

#top .logo .text {
    visibility: hidden;
    top: 20%;
}


/*Custom logo title*/
#top .logo .text:after {
    content: 'ペルセウス';
    visibility: visible; 
    display: block; 
    position: relative; 
    margin-top: -32px;
    font-size: 26px;
    font-weight: bold;
}

/*Custom logo subtitle*/
#top .logo .top:after {
    content: 'Typing Master';
    visibility: visible;
    display: block;
    position: relative;
    margin-top: -8px;
}

.container {
    display: flex;
    justify-content: flex-start;
}

#menu {
    width: 250%;
    margin-left: 15px;
}

#top .textButton.showAlerts {
    grid-column: -2;
}
#top .textButton.signInOut {
    grid-column: -1;
}
#top .textButton.view-settings {
    grid-column: 3;
}

#top .textButton.account.view-account {
    grid-column: -3;
}


/*logo in the middle and  makes it bigger*/
#top .logo {
    position: absolute;
    top: -20%;
    transform: scale(1.5);
    left: 100%;
    width: 0px;

}

/*logo in the middle on focus mode*/
#top.focus .logo { 
    position: absolute;
    top: 100%;
    margin-left: auto;
    width: 0px;
    opacity: 0.5;
    animation: logodown 1s 1;
    animation-timing-function: ease;
}

#top.focus .logo .text{ 
    position: relative;
    margin-bottom: 20px;
    
}

@keyframes logodown {
    from {position: absolute; top: 0px}
    to {position: absolute; top: 100%; }
}



/*Makes the live WPM smaller*/
#liveWpm {
    transform: scale(0.5);
}

.row {
    position: relative;
    top: 100%
}

  
.customBackground:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    position: absolute;
    top: 0; left: 0;
}
}