@import url("https://use.typekit.net/afb2wxe.css");

@supports(display: grid) {

    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "AESTHETIC-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "AESTHETIC Theme";
        /* set this to your theme's full name */

        /* Header */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aaesthetic-theme/AESTHETIC_logo.svg");

        /* Typefaces */
        --body-font: prenton, serif;
        --header-font: flood-std, sans-serif;
        --title-font: eurostile-extended, sans-serif;
        --mono-font: novel-mono-pro, monospace;

        /* Standard Colors */
        --white-monochrome: 217, 233, 251;
        --pale-gray-monochrome: 1, 245, 252;
        --light-pale-gray-monochrome: 170, 207, 251;
        --very-light-gray-monochrome: 26, 139, 235;
        --light-gray-monochrome: 150, 62, 184;
        --gray-monochrome: 92, 42, 95;
        --dark-gray-monochrome: 39, 6, 75;
        --black-monochrome: 14, 12, 45;
        --bright-accent: 250, 245, 45;
        --pale-accent: var(--pale-gray-monochrome);
        --medium-accent: 255, 52, 131;
        --dark-accent: 195, 42, 158;
        --newpage-color: 204, 5, 166;

        --swatch-text-general: var(--swatch-text-light);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);

        --ui-wght: 700;
        --ui-hvr-wght: 900;

        /* ===SECONDARY & TERTIARY COLORS=== */
        /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */

        /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
        --swatch-secondary-color: var(--swatch-menubg-dark-color);
        --swatch-tertiary-color: var(--swatch-menubg-light-color);
        --swatch-alternate-color: var(--swatch-primary);

        /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
        --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
        --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);

        --swatch-headerh2-color: var(--dark-gray-monochrome);

        --swatch-topmenu-border-color: var(--pale-gray-monochrome);
        --swatch-topmenu-bg-color: var(--dark-gray-monochrome);

        /* ===MENU BACKGROUND COLORS=== */
        --swatch-menubg-color: var(--black-monochrome);

        --swatch-border-color: var(--pale-gray-monochrome);

        --rating-module-text-color: var(--bright-accent);
        --rating-module-button-color: var(--bright-accent);

        --swatch-background: var(--black-monochrome, 14, 12, 45);
        --background-gradient-color: var(--dark-accent);

        --header-gradient-color-bottom: var(--light-gray-monochrome);
        --header-gradient-color-middle: var(--dark-accent);
        --header-gradient-color-top: var(--medium-accent);

        --gradient-header: linear-gradient(355deg,
                rgb(var(--header-gradient-color-bottom)) 0%,
                rgb(var(--header-gradient-color-middle)) 20%,
                rgb(var(--header-gradient-color-top)) 100%);

        --rating-module-text-color: var(--dark-gray-monochrome);
        --rating-module-button-color: var(--dark-gray-monochrome);

        /* ===HEADER TITLE FONT SIZES=== */
        --header-h1-font-size: calc(var(--base-font-size) * 3.5);
        --header-h2-font-size: calc(var(--base-font-size) * 0.8);

        --scrollbar-width: 0.5rem;
    }

    :root:lang(cn) {
        /* Typefaces */
        --body-font: prenton, '等线', serif;
        --header-font: flood-std,  'pin ru', '方正舒体', sans-serif;
        --title-font: eurostile-extended, '黑体', sans-serif;
        --mono-font: novel-mono-pro, 'Noto Serif SC', '幼圆', monospace;
    }

    #header {
        /* ===HEADER ELEMENTS=== */

        /* ===SEARCH ELEMENT=== */
        --search-icon-color: var(--swatch-primary);
        --search-icon-bg-color: var(--black-monochrome);
        --search-icon-hover-color: var(--swatch-primary);
        --search-icon-hover-bg-color: var(--swatch-primary);
        --search-icon-focus-color: var(--black-monochrome);
        --search-icon-focus-bg-color: var(--medium-accent);
        --search-focus-outline-color: var(--medium-accent);
        --search-textbox-text-color: var(--swatch-text-tertiary-color);
        --search-focus-textbox-text-color: var(--swatch-text-secondary-color);
    }

    #top-bar {
        /* ===TOPBAR ELEMENTS=== */

        /* ===TOPBAR CATEGORIES=== */
        --topmenu-category-color: var(--bright-accent);
        --topmenu-category-hover-color: var(--bright-accent);

        --mobile-topmenu-sidebar-button-color: var(--bright-accent);

        /* ===DROPDOWN MENU=== */
        --dropdown-bg-color: var(--swatch-secondary-color), 0.8;
        --dropdown-links-color: var(--swatch-text-tertiary-color);
        --dropdown-links-hover-color: var(--swatch-text-secondary-color);
    }

    #side-bar {
        /* ===SIDE-BAR ELEMENTS=== */

        /* ===SIDE-BAR GENERAL=== */
        --sidebar-resources-bg-color: 0, 0, 0, 0;
        --sidebar-media-bg-color: 0, 0, 0, 0;

        /* ===SIDEBLOCK MENU=== */
        --sideblock-bg-color: 0, 0, 0, 0;
        /* Transparent */

        /* ===MENU-ITEMS=== */
        --sidebar-links-text: var(--swatch-primary);
        --sidebar-links-hover-bg-color: var(--medium-accent);
        --sidebar-links-hover-text-color: var(--swatch-text-secondary-color);
    }

    #license-area {
        --license-link-hover-color: var(--swatch-text-secondary-color);
    }

    ::-moz-selection {
        background: rgb(var(--pale-gray-monochrome));
        color: rgb(var(--black-monochrome));
    }

    ::selection {
        background: rgb(var(--pale-gray-monochrome));
        color: rgb(var(--black-monochrome));
    }

    html {
        background: white;
    }

    html,
    body {
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
    }

    #extra-div-1 {
        --outrun-lines: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 645' overflow='visible' xml:space='preserve'%3E%3Cg id='Outrun_Lines'%3E%3Crect width='100' height='60'/%3E%3Crect y='63' width='100' height='12'/%3E%3Crect y='78' width='100' height='13'/%3E%3Crect y='94' width='100' height='12'/%3E%3Crect y='109' width='100' height='13'/%3E%3Crect y='125' width='100' height='12'/%3E%3Crect y='141' width='100' height='12'/%3E%3Crect y='157' width='100' height='12'/%3E%3Crect y='172' width='100' height='12'/%3E%3Crect y='187' width='100' height='12'/%3E%3Crect y='203' width='100' height='12'/%3E%3Crect y='219.5' width='100' height='11'/%3E%3Crect y='234.5' width='100' height='11'/%3E%3Crect y='249.5' width='100' height='11'/%3E%3Crect y='265.5' width='100' height='11'/%3E%3Crect y='281' width='100' height='10'/%3E%3Crect y='297' width='100' height='10'/%3E%3Crect y='313' width='100' height='9'/%3E%3Crect y='328' width='100' height='9'/%3E%3Crect y='343.5' width='100' height='9'/%3E%3Crect y='359' width='100' height='8'/%3E%3Crect y='374' width='100' height='9'/%3E%3Crect y='391' width='100' height='8'/%3E%3Crect y='407' width='100' height='8'/%3E%3Crect y='422' width='100' height='8'/%3E%3Crect y='437' width='100' height='8'/%3E%3Crect y='453' width='100' height='8'/%3E%3Crect y='469' width='100' height='6'/%3E%3Crect y='485' width='100' height='6'/%3E%3Crect y='501' width='100' height='4'/%3E%3Crect y='517' width='100' height='4'/%3E%3Crect y='533' width='100' height='4'/%3E%3Crect y='549' width='100' height='3'/%3E%3Crect y='564' width='100' height='3'/%3E%3Crect y='579' width='100' height='3'/%3E%3Crect y='595' width='100' height='3'/%3E%3Crect y='611' width='100' height='2'/%3E%3Crect y='627' width='100' height='2'/%3E%3Crect y='643' width='100' height='2'/%3E%3C/g%3E%3C/svg%3E%0A");
        width: 100%;
        height: calc(100% - var(--final-header-height-on-desktop));
        position: absolute;
        top: var(--final-header-height-on-desktop);
        left: 0;
        background-image: var(--gradient-background);
        -webkit-mask-image: var(--outrun-lines);
        mask-image: var(--outrun-lines);
        -webkit-mask-size: 8%;
        mask-size: 8%;
        -webkit-mask-position: top;
        mask-position: top;
        -webkit-mask-repeat: repeat-x;
        mask-repeat: repeat-x;
        pointer-events: none;
        opacity: 0.5;
    }

    #extra-div-2,
    #extra-div-2 span {
        /* Mountains Mask hosted on external site due to CORS issue with wikidot hosted mask SVGs */
        --mountains-mask: url("https://elusionillusion.com/img/AESTHETIC_mtns_vs2.svg");
        display: block;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        pointer-events: none;
    }

    #extra-div-2 {
        height: var(--header-height-on-desktop);
        background-image:
            linear-gradient(35deg,
                rgb(var(--pale-gray-monochrome), 1) 0%,
                rgb(var(--pale-gray-monochrome), 0.3) 30%,
                rgb(var(--pale-gray-monochrome), 0.4) 50%,
                rgba(var(--pale-gray-monochrome), 0) 100%);
        -webkit-mask-image: var(--mountains-mask);
        mask-image: var(--mountains-mask);
        background-repeat: repeat;
        -webkit-mask-size: 400vmin;
        mask-size: 400vmin;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: bottom;
        mask-position: bottom;
    }

    #extra-div-2 span {
        height: 100%;
        background-image:
            linear-gradient(70deg,
                rgb(var(--bright-accent), 0.8) 0%,
                rgb(var(--medium-accent), 0.3) 50%,
                rgba(var(--bright-accent), 0.8) 100%);
        background-repeat: repeat;
        -webkit-animation: movebg 30s linear infinite normal;
        animation: movebg 30s linear infinite normal;
        will-change: background-size, background-position-x, background-position-y;
    }

    @-webkit-keyframes movebg {
        0% {
            background-size: 200vw;
            background-position-x: 100vw;
            background-position-y: -100vw;
        }

        50% {
            background-size: 400vw;
            background-position-x: 0;
            background-position-y: 100vw;
        }

        100% {
            background-size: 200vw;
            background-position-x: -100vw;
            background-position-y: 200vw;
        }
    }

    @keyframes movebg {
        0% {
            background-size: 200vw;
            background-position-x: 100vw;
            background-position-y: -100vw;
        }

        50% {
            background-size: 400vw;
            background-position-x: 0;
            background-position-y: 100vw;
        }

        100% {
            background-size: 200vw;
            background-position-x: -100vw;
            background-position-y: 200vw;
        }
    }

    #header::before {
        opacity: 1;
        -webkit-filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5));
        filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5));
    }

    #header h1 a {
        overflow-wrap: normal;
    }

    #header h1 a::before,
    #header h1 a::after {
        letter-spacing: 0.07em;
    }

    #header h1 a::before {
        -webkit-text-stroke: 0.325rem rgb(var(--dark-gray-monochrome));
    }

    #header h1 a::after {
        color: rgb(var(--bright-accent));
        background:
            linear-gradient(to top,
                rgb(var(--dark-gray-monochrome)) 0%,
                rgb(var(--dark-gray-monochrome)) 20%,
                rgb(var(--dark-accent)) 40%,
                rgb(var(--pale-gray-monochrome)) 70%);
        background-size: contain;
        overflow-wrap: normal;
        z-index: 1;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #header h2 span {
        width: 100%;
    }

    #header h2 span::before,
    #header h2 span::after {
        --wght: 500;
        top: calc(50% + (var(--header-h1-font-size) / 1.5));
        letter-spacing: 0.25em;
    }

    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-secondary-color));
    }

    /* Mobile Header Font Sizes */
    @media only screen and (max-width: 36rem) {
        :root {
            /* ===HEADER TITLE FONT SIZES=== */
            --header-h1-font-size: calc(var(--base-font-size) * 3);
            --header-h2-font-size: calc(var(--base-font-size) * 0.7);
        }
    }

    @media only screen and (max-width: 21.875rem) {
        :root {
            /* ===HEADER TITLE FONT SIZES=== */
            --header-h1-font-size: calc(var(--base-font-size) * 2);
            --header-h2-font-size: calc(var(--base-font-size) * 0.7);
        }
    }

    #top-bar {
        font-size: var(--base-font-size);
    }

    #top-bar div.top-bar>ul>li>ul>li>a {
        --wght: 600;
    }

    #side-bar,
    #side-bar:hover {
        background: linear-gradient(to bottom,
                rgb(var(--black-monochrome)) 0%,
                rgb(var(--dark-gray-monochrome)) 50%,
                rgb(var(--dark-accent)) 100%);
        background-size: 400vh;
        background-origin: border-box;
        background-position: top left;
    }

    #side-bar div.menu-item {
        --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, ));
        border-bottom: 0.0625rem solid rgb(var(--swatch-border-color));
        border-top: 0.0625rem solid rgb(var(--swatch-border-color));
        margin-top: -0.0625rem;
        text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }

    #side-bar div.menu-item> :not(:nth-child(2)):not(.collapsible-block) {
        border-left: 0.0625rem solid rgb(var(--swatch-border-color));
    }

    #side-bar div.menu-item a:-webkit-any-link {
        --text-shadow: rgb(var(--black-monochrome));
        letter-spacing: 0.1em;
        word-spacing: 0.1em;
    }

    #side-bar div.menu-item a:-moz-any-link {
        --text-shadow: rgb(var(--black-monochrome));
        letter-spacing: 0.1em;
        word-spacing: 0.1em;
    }

    #side-bar div.menu-item a:any-link,
    #side-bar div.menu-item .text {
        --text-shadow: rgb(var(--black-monochrome));
        letter-spacing: 0.1em;
        word-spacing: 0.1em;
    }

    #side-bar div.menu-item a::before,
    #side-bar div.menu-item a:hover::before {
        background: var(--gradient-header);
        background-attachment: fixed;
        background-position: top;
        background-origin: border-box;
        background-size: 100vh;
    }

    #side-bar .heading {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
        --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, ));
        --ui-hvr-wght: 900;
        letter-spacing: 0.05rem;
        font-size: 1.25rem;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 1rem 0 1rem 0.5rem;
        color: rgb(var(--pale-gray-monochrome));
        font-family: var(--header-font);
        text-transform: none;
    }

    #side-bar .side-block[style*="background-color:"] .heading {
        margin-top: .25rem;
    }

    #side-bar .heading p::after,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::after {
        bottom: -0.6rem;
    }

    #side-bar .heading p::before,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::before {
        top: -0.6rem;
    }

    a[href*="/random:random-tale"],
    a[href*="/most-recently-edited"] {
        min-width: calc((var(--base-font-size) * (14 / 15)) * 6.5);
    }

    #main-content {
        z-index: 1;
        position: relative;
    }

    #main-content a:not([href*="javascript"]):-webkit-any-link, #main-content div.collapsible-block a:-webkit-any-link {
        --wght: var(--ui-wght);
        background-color: rgb(var(--swatch-primary));
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 0.4em 0 0.2em;
        color: rgb(var(--swatch-background));
        box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    #main-content a:not([href*="javascript"]):-moz-any-link, #main-content div.collapsible-block a:-moz-any-link {
        --wght: var(--ui-wght);
        background-color: rgb(var(--swatch-primary));
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 0.4em 0 0.2em;
        color: rgb(var(--swatch-background));
        box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    #main-content a:not([href*="javascript"]):any-link,
    #main-content div.collapsible-block a:any-link {
        --wght: var(--ui-wght);
        background-color: rgb(var(--swatch-primary));
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 0.4em 0 0.2em;
        color: rgb(var(--swatch-background));
        box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    #main-content a:not([href*="javascript"]):hover,
    #main-content a:not([href*="javascript"]):active,
    #main-content div.collapsible-block a:hover,
    #main-content div.collapsible-block a:active {
        --wght: var(--ui-hvr-wght);
        background-color: rgb(var(--swatch-primary-darker));
        color: rgb(var(--swatch-background));
        text-decoration: none;
        box-shadow:
            0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
            0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }

    #main-content a:not([href*="javascript"]):focus-within,
    #main-content div.collapsible-block a:focus-within {
        --wght: var(--ui-hvr-wght);
        background-color: rgb(var(--swatch-primary-darker));
        color: rgb(var(--swatch-background));
        text-decoration: none;
        box-shadow:
            0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
            0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }

    #main-content a.footnoteref:-webkit-any-link {
        --wght: var(--ui-wght);
        background-color: rgb(var(--swatch-primary));
        width: 1em;
        height: 1.1em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 0.4em 0 0.2em;
        color: rgb(var(--swatch-background));
        box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    #main-content a.footnoteref:-moz-any-link {
        --wght: var(--ui-wght);
        background-color: rgb(var(--swatch-primary));
        width: 1em;
        height: 1.1em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 0.4em 0 0.2em;
        color: rgb(var(--swatch-background));
        box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    #main-content a.footnoteref:any-link {
        --wght: var(--ui-wght);
        background-color: rgb(var(--swatch-primary));
        width: 1em;
        height: 1.1em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 0.4em 0 0.2em;
        color: rgb(var(--swatch-background));
        box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    #main-content a.footnoteref:hover,
    #main-content a.footnoteref:active {
        --wght: var(--ui-hvr-wght);
        background-color: rgb(var(--swatch-primary-darker));
        color: rgb(var(--swatch-background));
        box-shadow:
            0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
            0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }

    a.footnoteref:focus-within {
        --wght: var(--ui-hvr-wght);
        background-color: rgb(var(--swatch-primary-darker));
        color: rgb(var(--swatch-background));
        box-shadow:
            0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
            0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }

    #page-title,
    .meta-title {
        color: rgb(var(--pale-gray-monochrome));
        border-color: rgba(0, 0, 0, 0);
    }

    #page-title::before,
    #page-title::after,
    .meta-title::before,
    .meta-title::after {
        background-image:
            linear-gradient(30deg,
                rgb(var(--bright-accent), 0.8) 0%,
                rgb(var(--dark-accent), 0.3) 50%,
                rgba(var(--bright-accent), 1) 100%);
        background-size: 100%;
        background-color: rgb(var(--bright-accent));
        height: 0.125rem;
    }

    blockquote,
    .blockquote {
        background-color: rgba(var(--gray-monochrome), 0.25);
        border: 0.0625rem solid rgb(var(--swatch-border-color));
    }

    blockquote:nth-of-type(odd) {
        border-color: rgb(var(--swatch-border-color));
    }

    blockquote:nth-of-type(even) {
        border-color: rgb(var(--swatch-primary));
    }

    table.wiki-content-table th {
        background: rgb(var(--swatch-primary-darker));
        color: rgb(var(--dark-gray-monochrome));
    }

    table.wiki-content-table,
    table.wiki-content-table th,
    table.wiki-content-table td {
        border: .0625rem solid rgba(var(--swatch-border-color), 1) !important;
        border-collapse: collapse;
    }

    .code {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
        border-color: rgb(var(--swatch-border-color));
    }

    .hl-main {
        -webkit-filter: invert(1) hue-rotate(180deg);
        filter: invert(1) hue-rotate(180deg);
    }

    .scp-image-block .scp-image-caption {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .scp-image-block img {
        border: 0.0625rem solid rgba(var(--swatch-border-color));
    }

    a:visited {
        color: rgb(var(--swatch-primary-darker));
    }

    h1 {
        color: rgb(var(--swatch-primary)) !important;
    }

    hr {
        border-top: none;
        position: relative;
        height: 0.35rem;
        background: rgba(0, 0, 0, 0);
        display: flex;
    }

    hr::before {
        content: " ";
        position: absolute;
        top: 0.1125rem;
        left: 0;
        border-top: none;
        width: 100%;
        height: 0.125rem;
        background: linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%);
        background-position: center center;
        -webkit-filter: blur(0.04rem);
        filter: blur(0.04rem);
    }

    .page-rate-widget-box, .rate-box-with-credit-button {
        background: linear-gradient(to top left, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important;
    }

    .rate-box-with-credit-button .page-rate-widget-box {
        background: none !important;
    }

    #page-content .rate-box-with-credit-button>.creditButton>p>a:after {
        background-color: rgba(255,34,255,1);
    }

    form#edit-page-form {
        background-color: rgba(var(--dark-accent), 0.25);
        border: 0.0625rem solid rgb(var(--light-gray-monochrome));
    }

    @media only screen and (max-width: 56.25rem) {

        a[href*="/random:random-tale"],
        a[href*="/most-recently-edited"] {
            min-width: calc((var(--base-font-size) * (14 / 15)) * 4);
        }

        #side-bar .heading p,
        #side-bar .side-block>.collapsible-block .collapsible-block-link {
            font-size: 1em;
        }
    }

    @-webkit-keyframes fade-in {
        from {
            opacity: 0;
            box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        }

        to {
            opacity: 1;
            box-shadow:
                0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
                0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
            box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
        }

        to {
            opacity: 1;
            box-shadow:
                0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
                0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
        }
    }
}

:root {
    --body-font: prenton, '等线', serif;
    --header-font: flood-std, '方正舒体', sans-serif;
    --title-font: eurostile-extended, '黑体', sans-serif;
    --ui-wght: 700;
    --ui-hvr-wght: 900;
    --white-monochrome: 217, 233, 251;
    --pale-gray-monochrome: 1, 245, 252;
    --light-gray-monochrome: 150, 62, 184;
    --black-monochrome: 14, 12, 45;
    --bright-accent: 250, 245, 45;
    --medium-accent: 255, 52, 131;
    --dark-accent: 195, 42, 158;
    --swatch-border-color: var(--pale-gray-monochrome);
    --swatch-text-dark: var(--black-monochrome);
    --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
    --header-gradient-color-bottom: var(--light-gray-monochrome);
    --header-gradient-color-middle: var(--dark-accent);
    --header-gradient-color-top: var(--medium-accent);
    --gradient-header: linear-gradient(355deg, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-middle)) 20%, rgb(var(--header-gradient-color-top)) 100%);
}
::-moz-selection {
    background: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--black-monochrome));
}
::selection {
    background: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--black-monochrome));
}
.side-block {
    --sidebar-links-text: var(--swatch-primary);
    --sidebar-links-hover-bg-color: var(--medium-accent);
}
.side-block .heading {
    text-align: center;
    justify-content: center;
    align-items: center;
}
.side-block .heading p {
    --text-shadow: rgb(var(--swatch-text-dark));
    --ui-hvr-wght: 900;
    letter-spacing: 0.05rem;
    font-size: 1.25rem;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 1rem 0 1rem 0.5rem;
    color: rgb(var(--pale-gray-monochrome));
    font-family: var(--header-font);
    text-transform: none;
}
.side-block div.menu-item {
    --text-shadow: rgb(var(--swatch-text-dark));
    border-bottom: 0.0625rem solid rgb(var(--swatch-border-color));
    border-top: 0.0625rem solid rgb(var(--swatch-border-color));
    margin-top: -0.0625rem;
    text-shadow: .063rem .063rem .063rem var(--text-shadow);
}
.side-block div.menu-item a {
    --text-shadow: rgb(var(--black-monochrome));
    letter-spacing: 0.1em;
    word-spacing: 0.1em;
}
.side-block div.menu-item a::before,
.side-block div.menu-item a:hover::before {
    background: var(--gradient-header);
    background-attachment: fixed;
    background-position: top;
    background-origin: border-box;
    background-size: 43.75rem;
}