/* ==UserStyle==
@name           AniList Amoled
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep dark theme for AniList
@author         https://anilist.co/user/xiggeush/
==/UserStyle== */
@-moz-document url-prefix("https://anilist.co/") {
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(12, 12, 12, .45);
        --second-bg-rgb: 12, 12, 12;
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);
        --third-bg-opacity: rgb(41, 41, 41);

        /** Colors **/
        --white: #fff;
        --gray: #777;
        --ccc: #ccc;
        --blue: #1281bb;
        --light-blue: : #02a9ff;
    }

    body {
        background: var(--main-bg);
    }

    .overview[data-v-5c30286e] .content-wrap {
        background: var(--second-bg);
    }

    .history-day[data-v-b79eb0f0] {
        background: var(--third-bg);
    }

    .favourites-wrap[data-v-ddf96a3c] {
        background: var(--second-bg);
    }

    .overview[data-v-5c30286e] .content-wrap {
        background: var(--second-bg);
    }

    .wrap[data-v-04d66030] {
        background: var(--second-bg);
    }

    .load-more[data-v-6f203cf2] {
        background: var(--second-bg);
    }

    .load-more[data-v-6f203cf2]:hover {
        background: var(--third-bg);
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .nav-wrap[data-v-1cc2919e] {
        background: var(--second-bg);
        border-bottom: 2px solid var(--third-bg);
    }

    .site-theme-dark .nav-unscoped, .nav[data-v-62eacfff], .solid[data-v-62eacfff], .transparent[data-v-62eacfff]:hover {
        background: rgba(21, 21, 21, .8);
        backdrop-filter: blur(10px) !important;
    }

    .el-input-group__append,
    .el-input-group__prepend,
    .el-input__inner,
    .el-textarea__inner {
        background: var(--second-bg);
    }

    .markdown-editor {
        background: var(--second-bg);
        color: #ccc;
    }

    h2.section-header {
        font-size: 17px;
    }

    .dropdown[data-v-38edf8f8] {
        background: var(--third-bg);
    }

    .dropdown[data-v-38edf8f8]:before {
        color: var(--third-bg);
    }

    .small .cover .image-text[data-v-6dc78144] {
        background: rgb(12 12 12 / 80%);
        color: rgba(var(--color-text-bright), .91);
    }

    .name[data-v-39573fe2] {
        background: rgb(12 12 12 / 80%);
    }

    .unfollow[data-v-39573fe2] {
        background: rgb(var(--color-red-400));
    }

    .plus-progress[data-v-2fd80e52] {
        background: rgb(12 12 12 / 80%);
        color: rgba(var(--color-text-bright), .9);
    }

    .quick-search[data-v-17620a08] {
        background: rgb(12 12 12 / 80%);
    }

    .view-all > div[data-v-597da2e4]:last-of-type:hover {
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    [data-v-17620a08] .result .open-list-editor {
        background: var(--second-bg);
        color: #1f81b2;
    }

    .footer[data-v-38edf8f8] {
        background: var(--second-bg);
        color: #ccc;
    }

    .footer a:hover .icon[data-v-38edf8f8] {
        color: rgb(var(--color-blue));
    }

    .footer a[data-v-38edf8f8]:hover {
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .primary-link-text[data-v-38edf8f8]:hover {
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .primary-link-text[data-v-38edf8f8] {
        color: #ccc;
    }

    .primary-link-text[data-v-38edf8f8]:hover {
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .primary-link .icon[data-v-38edf8f8] {
        color: #ccc;
    }

    .primary-link .icon[data-v-38edf8f8]:hover {
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .secondary-links a[data-v-38edf8f8] {
        color: #ccc;
    }

    a:visited:hover {
        color: rgb(var(--color-blue)) !important;
        transition: 0.2s;
    }

    .nav .link[data-v-5776f768] {
        color: #ccc;
        border-bottom: 2px solid var(--third-bg-opacity);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    }

    .nav .router-link-active[data-v-5776f768] {
        color: #fff;
        background: rgb(18 129 187 / 40%);;
        font-weight: 600;
        border-bottom: 2px solid #fff;
    }

    .secondary-links a[data-v-38edf8f8]:hover {
        color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .label[data-v-8aeb5e9a] {
        color: var(--white);
    }

    .active[data-v-8aeb5e9a] {
        color: rgb(var(--color-blue)) !important;
    }


    .menu[data-v-8aeb5e9a] {
        color: #ccc;
    }

    svg.svg-inline--fa.fa-times.fa-w-11.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-cog.fa-w-16.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-search.fa-w-16.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-envelope.fa-w-16.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-user.fa-w-14.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-user.fa-w-14.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-comments.fa-w-18.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-book-open.fa-w-18.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-play.fa-w-14.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    svg.svg-inline--fa.fa-home.fa-w-18.fa-fw.fa-lg:hover {
    color: rgb(var(--color-blue));
        transition: 0.2s;
    }

    .dropdown[data-v-04b245e6] {
        background: var(--second-bg);
        border: 1px solid var(--third-bg);
    }

    .footer[data-v-04b245e6] {
        background: var(--second-bg);
    }

    .footer[data-v-0f519cab] {
        background: var(--main-bg);
    }

    .content[data-v-6dc78144] {
        background: var(--second-bg);
    }

    .role-card[data-v-f92815d6] {
        background: var(--second-bg);
        color: var(--white);
    }

    .role-card[data-v-f92815d6]:hover {
        background: var(--third-bg);
        transition: 0.2s;
    }

    .content .role[data-v-f92815d6] {
        color: var(--ccc);
    }

    .overview[data-v-cdf07c88] .content-wrap {
        background: var(--second-bg);
        color: #ccc;
    }

    .media-score-distribution {
        background: var(--second-bg);
    }

    .data[data-v-d3a518a6] {
        background: var(--second-bg);
    }

    .tag[data-v-c403a904] {
        background: var(--second-bg);
    }

    .follow[data-v-69b91520] {
        background: var(--second-bg);
        color: #ccc;
    }

    .follow[data-v-69b91520]:hover {
        background: var(--third-bg);
        color: var(--blue);
        transition: 0.2s;
    }

    .thread-card[data-v-550f7194] {
        background: var(--second-bg);
    }

    .header[data-v-5776f768] {
        background: var(--second-bg);
        border-bottom: 2px solid var(--third-bg);
    }

    .header[data-v-779420e9] {
        background: var(--second-bg);
    }

    .site-theme-dark .nav-unscoped.transparent {
        background: transparent;
        color: #e5e7ea;
    }

    .content[data-v-3deab077] {
        background: var(--second-bg);
    }

    .color.active[data-v-5f9057fc] {
        border: solid 4px var(--third-bg);
    }

    .dropbox[data-v-5f9057fc] {
        background: var(--main-bg);
    }

    .settings[data-v-3deab077] .el-select .el-input--suffix .el-input__inner {
        background: var(--third-bg);
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: var(--third-bg);
        transition: 0.2s;
    }
    .el-select-dropdown__item {
        color: #ccc;
        background: var(--third-bg);
    }

    .el-scrollbar__thumb {
        background-color: var(--second-bg);
    }

    .el-popper[x-placement^=bottom] .popper__arrow:after {
        top: 1px;
        margin-left: -6px;
        border-top-width: 0;
        border-bottom-color: var(--third-bg);
        box-shadow: 1px 1px 20px var(--third-bg);
    }

    .list-preview[data-v-6aea970d] {
        background: var(--second-bg);
    }

    .feed-type-toggle > div.active[data-v-8209bd04] {
        background: var(--blue);
        color: var(--white);
    }

    .feed-type-toggle[data-v-8209bd04] {
        background: var(--third-bg);
        border-radius: 30px;
    }

    .feed-type-toggle > div[data-v-8209bd04]:hover {
        background: var(--third-bg-opacity);
        color: var(--blue);
        transition: 0.2s;
    }

    .list-preview[data-v-6aea970d] .media-preview-card .content {
        background: var(--second-bg);
    }

    .banner .shadow[data-v-5776f768] {
    background: linear-gradient(to top, var(--second-bg), transparent);
    }

    span.count {
        margin-right: 5px;
        margin-left: 10px;
    }

    .search[data-v-219025ae] {
        background: var(--main-bg);
    }

    .search-wrap[data-v-84c4e64c] {
        background: var(--third-bg);
    }

    .search-wrap[data-v-128d71ac] {
        background: var(--third-bg);
    }

    .tag[data-v-5760f120] {
        background: var(--main-bg);
    }

    .tag[data-v-5760f120]:hover {
        background: var(--third-bg);
        transition: 0.2s;
    }

    .filter[data-v-cd1dc2b6] {
        background: var(--third-bg);
        color: var(--white);
    }

    .tag.included[data-v-5760f120] {
        background: var(--third-bg);
    }

    .milestones[data-v-815ccddc] {
        background: var(--second-bg);
 ...