nylo's Theme by nylo23

/* ==UserStyle==
@name         Nylo's Theme
@version      20230510.04.58
@namespace    ?
==/UserStyle== */

@-moz-document domain("monkeytype.com") {
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");



/*keyboard*/
.keymap {
    background-color: #fff;
    border-radius: 10px;
    width: 450px;
    padding: 10px 0px 10px 15px;
    position: relative;
    left: 250px;
    --roundness: 0rem;
}

/*top menu*/
#menu {
    background-color: #afffd2;
    border-radius: 100px;
    position: relative;
    left: 75px;
}
#top.focus #menu {
    color: transparent!important;
    background-color: transparent;
}

/*result*/
#result {
    background-color: #0009;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
}

/*text*/
#wordsWrapper {
    background-color: #fff3;
    border-radius: 15px;
}

 /* force font on logo */
    *:not(i) {
        font-family: var(--font) !important;
    }

    /* hide bottom */
    #bottom {
        display: none;
    }

    /* center menu */
    #top {
        grid-template-columns: 1fr auto 1fr;
    }

    /* increase menu gap */
    #menu {
        gap: 1rem;
    }

    /* hide account name */
    .icon-button .text {
        display: none;
    }

    /* typing test margins */
    #middle {
        margin-left: 10%;
        margin-right: 10%;
    }

    /* change logo text */
    #top .logo .text {
        visibility: hidden;
    }

    #top .logo .text .top:after {
        content: 'theme by:';
        visibility: visible;
        display: block;
        position: relative;
        margin-top: -.7rem;
        margin-left: -.15rem;
    }

    #top .logo .text:after {
        content: 'nylo';
        visibility: visible;
        display: block;
        position: relative;
        margin-top: -2rem;
    }

    /* caret width */
    #caret.default {
        width: 1px;
    }

    /* change live wpm and acc text size */
    #liveWpm,
    #liveAcc {
        font-size: 100px;
    }

 .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;
      animation-fill-mode: forwards;
  }

  .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;
      animation-fill-mode: forwards;
  }

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

  #top > div.logo > div.text {
      content: 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}
  }
}

    /* text shadow */
    body {
        text-shadow: 1px 1px 3px #00000050 !important;
    }

    /* remove shadow when test starts */
    #top.focus #menu,
    #top.focus #menu .text-button {
        text-shadow: none;
    }


/* theme colors */
    * {
        --bg-color: #60a87f;
        --main-color: #afffd2;
        --caret-color: #fff;
        --sub-color: #3abb8b;
        --sub-alt-color: #009b61;
        --text-color: #d8dee9;
        --error-color: #bf616a;
        --error-extra-color: #793e44;
        --colorful-error-color: #bf616a;
        --colorful-error-extra-color: #793e44;
        text-shadow: 1px 1px 3px #009b61 !important;
    }

    /* background and effects */
    .customBackground {
        background-image: url("https://i.imgur.com/fIzTkKH.png") !important;
        background-image: url("https://i.imgur.com/fIzTkKH.png") !important;
        background-size: cover;
        background-position: center !important;
        background-repeat: no-repeat;
        transition: filter 1s ease !important;
        filter: blur(0px) brightness(1);
    }

    body[style*="cursor: none"] .customBackground {
        filter: blur(0px) brightness(0.8);
    }

    #menu {
       
    background-color: #3c8a5e63;
    border-radius: 100px;
    position: relative;
    left: 75px;
}
   
    /* change logo text */
    #top .logo .text {
        visibility: hidden;
    }

    #top .logo .text .top:after {
        content: 'theme by:' !important;
        visibility: visible;
        display: block;
        position: relative;
        margin-top: -.7rem;
        margin-left: -.15rem;
    }

    #top .logo .text:after {
        content: 'nylo' !important;
        visibility: visible;
        display: block;
        position: relative;
        margin-top: -2rem;
    }

    /* change menu icon colors */
    .view-start {
        color: #d8dee9;
    }

    .view-leaderboards {
        color: #d8dee9;
    }

    .view-about {
        color: #d8dee9;
    }

    .view-settings {
        color: #d8dee9;
    }

    .view-account {
        color: #d8dee9;
    }

    #menu>*:hover {
        color: var(--text-color) !important;
    }
    /* base styling for bootstrap icons */
    i::before,
    .supportButtons .button div,
    .contactButtons .button div {
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
    }

    /* icons */
    .fa-keyboard::before {
        content: "\f451";
    }
    .fa-crown::before {
        content: "\f5e7";
    }
    .fa-info::before {
        content: "\f431";
    }
    .fa-cog::before {
        content: "\f3e5";
    }
    .fa-user::before,
    .fa-user-circle::before {
        content: "\f4e1";
    }
    .fa-tools::before {
        content: "\f5db";
    }
    .fa-mouse-pointer::before {
        content: "\f402";
        /* content: "\f2e3"; triangle cursor */
        /* content: "\f2e2"; text cursor */
    }
    .fa-redo-alt::before {
        content: "\f116";
    }
    .fa-globe-americas::before {
        content: "\f3ee";
    }
    .fa-chevron-right::before {
        content: "\f285";
    }
    .fa-sync-alt::before {
        content: "\f117";
    }
    .fa-exclamation-triangle::before {
        content: "\f33b";
    }
    .fa-align-left::before {
        content: "\f5c7";
    }
    .fa-backward::before {
        content: "\f552";
    }
    .fa-image::before {
        content: "\f226";
    }
    .fa-search::before {
        content: "\f52a";
    }
    .fa-chevron-down::before {
        content: "\f282";
    }
    .fa-angle-double-up::before {
        content: "\f281";
    }
    .fa-save::before {
        content: "\f272";
        /* content: "\f525"; default save */
    }
    .fa-check::before {
        content: "\f272";
    }
    .fa-quote-right::before {
        content: "\f250";
    }
    .fa-percentage::before {
        content: "\f4d1";
    }
    .fa-bomb::before {
        content: "\f333";
    }
    .fa-tachometer-alt::before {
        content: "\f57f";
    }
    .fa-chart-line::before {
        content: "\f3f2";
    }
    .fa-exchange-alt::before {
        content: "\f12b";
    }
    .fa-ad::before {
        content: "\f161";
    }
    .fa-palette::before {
        content: "\f4b1";
    }
    .fa-i-cursor::before {
        content: "\f2e2";
    }
    .fa-language::before {
        content: "\f658";
    }
    .fa-gamepad::before {
        content: "\f2d4";
        /* content: "\f448"; joystick */
    }
    .fa-long-arrow-alt-right::before {
        content: "\f138";
    }
    .fa-angle-down::before {
        content: "\f282";
    }
    .fa-bars::before {
        content: "\f479";
    }
    .fa-eye-slash::before {
        content: "\f340";
    }
    .fa-step-forward::before {
        content: "\f55e";
    }
    .fa-volume-mute::before {
        content: "\f60d";
    }
    .fa-hand-paper::before {
        content: "\f337";
    }
    .fa-star::before {
        content: "\f588";
    }
    .fa-clock::before {
        content: "\f293";
    }
    .fa-font::before {
        content: "\f3da";
    }
    .fa-volume-up::before {
        content: "\f611";
    }
    .fa-fire-alt::before {
        content: "\f5ce";
    }
    .fa-question::before {
        content: "\f64e";
    }
    .fa-minus::before {
        content: "\f63b";
    }
    .fa-exclamation::before {
        content: "\f63c";
    }
    .fa-list::before {
        content: "\f479";
    }
    .fa-adjust::before {
        content: "\f288";
    }
    .fa-fill-drip::before {
        content: "\f4af";
    }
    .fa-random::before {
        content: "\f544";
    }
    .fa-highlighter::before {
        content: "\f435";
    }
    .fa-arrows-alt-h::before {
        content: "\f14a";
        /* content: "\f150"; aspect ratio box */
    }
    .fa-egg::before {
        content: "\f46f";
    }
    .fa-backspace::before {
        content: "\f159";
    }
    .fa-sign-out-alt::before {
        content: "\f1c3";
    }
    .fa-calendar::before {
        content: "\f1f6";
    }
    .fa-tags::before {
        content: "\f5b0";
    }
    .fa-tag::before {
        content: "\f5b0";
    }
    .fa-bullseye::before {
        content: "\f1de";
    }
    .fa-question-circle::before {
        content: "\f505";
    }
    .fa-sort-down::before {
        content: "\f22c";
    }
    .fa-sort-up::before {
        content: "\f238";
    }
    .fa-unlink::before {
        content: "\f471";
    }
    .fa-pen::before {
        content: "\f4c8";
    }
    .fa-trash::before {
        content: "\f5de";
    }
    .fa-plus::before {
        content: "\f4fe";
    }
    .fa-user-plus::before {
        content: "\f4dd";
    }
    .fa-sign-in-alt::before {
        content: "\f1c3";
    }
    .fa-google::before {
        content: "\f3f0";
    }
    .fa-envelope::before {
        content: "\f32f";
    }
    .fa-code::before {
        content: "\f2c6";
    }
    .fa-discord::before {
        content: "\f300";
    }
    .fa-twitter::before {
        content: "\f5ef";
    }
    .fa-file-contract::before {
        content: "\f38b";
    }
    .fa-shield-alt::before {
        conte...