Money5

---

+ Mostrar código do componente

@supports(display: grid) {
    :root {
     --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
     --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
     #side-bar .close-menu {
     display: block;
     position: fixed;
     top: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem;
     background: unset;
     opacity: 1;
     pointer-events: all;
     z-index: -1;
     }
 
     #side-bar .close-menu img {
     color: transparent;
     }
 
     #side-bar .close-menu::before,
     #side-bar .close-menu::after {
     content: "";
     box-sizing: border-box;
     position: fixed;
     display: block;
     top: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem;
     padding: 0;
     margin: 0;
     text-align: center;
     pointer-events: all;
     cursor: pointer;
     transition:
     opacity var(--sidebar-transition-timing);
     }
 
     #side-bar .close-menu::before {
     --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
     z-index: -1;
     background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
     -webkit-mask: var(--mask);
     mask: var(--mask);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: 50% 50%;
     mask-position: 50% 50%;
     -webkit-mask-size: 60%;
     mask-size: 60%;
     }
 
     #side-bar .close-menu::after {
     z-index: -2;
     background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
     border-radius: var(--toggle-roundness, 50%);
     border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
     }
 
     #side-bar:focus-within .close-menu,
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
     pointer-events: none;
     }
 
     #side-bar:focus-within .close-menu::before,
     #side-bar:focus-within .close-menu::after {
     opacity: 0;
     pointer-events: none;
     }
 
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
     opacity: 0;
     pointer-events: none;
     }
 
     #side-bar {
     display: block;
     position: fixed;
     top: 0;
     left: calc(var(--sidebar-width-on-desktop)*-1);
     z-index: 10;
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     margin-top: 0;
     }
 
     #side-bar:focus-within {
     left: 0;
     }
 
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
     left: 0;
     }
 
     #side-bar .side-block {
     margin-top: 1rem;
     background-color: rgb(0, 0, 0, 0);
     border-radius: 0;
     border-left-width: 0px;
     border-right-width: 0px;
     }
 
     #main-content::before {
     content: "";
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     z-index: -1;
     opacity: 0;
     transition:
     opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     margin-left: var(--sidebar-width-on-desktop);
     background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
     padding-right: 0;
     width: 100%;
     height: 100vh;
     pointer-events: none;
     z-index: 99;
     }
 
     #side-bar:focus-within ~ #main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
 
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
 
     @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
     padding: inherit;
     } }
 
     #content-wrap {
     display: flex;
     flex-direction: row;
     width: calc(100vw - (100vw - 100%));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     flex-grow: 2;
     height: auto;
     position: relative;
     margin: 0 auto;
     max-width: inherit;
     }
 
     #main-content {
     width: 100%;
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
     }
 
     #page-content {
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
     }
 
     @supports (-webkit-hyphens:none) {
     #side-bar {
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     padding-right: 0;
     background-color: rgb(0, 0, 0, 0);
     pointer-events: all;
     overflow-x: visible;
     overflow-y: visible;
     z-index: 999;
     }
 
     #side-bar::-webkit-scrollbar {
     opacity: 0;
     -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     }
 
     #side-bar .close-menu::before {
     z-index: 999;
     }
 
     #side-bar .close-menu::after {
     z-index: 998;
     }
 
     #side-bar:hover .close-menu::before,
     #side-bar:hover .close-menu::after {
     opacity: 0;
     }
 
     #side-bar:hover {
     left: 0;
     background-color: rgba(var(--swatch-menubg-color), 1);
     padding-right: 0;
     }
 
     #side-bar:hover::-webkit-scrollbar {
     opacity: 1;
     }
 
     #side-bar:hover~#main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
     }
    }
}

---

+ Show component code

:root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }

+ Mostrar código do tema

/* Fonts */
 
@import url('https://fonts.googleapis.com/css?family=Sirin+Stencil');
 
/* All Vars Used */
@supports(display:grid) {
    :root:lang(pt-br) {
     /* S-CSS-P Integration */
     /* If you're making a new CSS theme, please include the following three variables at minimum. */
     --theme-base: "black-highlighte";
     /* must be either "nuscp" or "sigma9" */
     --theme-id: "galfed-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "Galactic Federation Theme";
     /* set this to your theme's full name */
 
     /* Header */
     --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:galactic-theme/galfedlogo.gif");
     --header-title: "FEDERAÇÃO GALÁCTICA";
     --header-subtitle: "purificando as mentes impuras";
 
     /* Typefaces */
     --header-font: 'Sirin Stencil', 'Poppins', sans-serif;
     --title-font: 'Sirin Stencil', 'Poppins', sans-serif;
     --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
     /* Standard Colors */
     --white-monochrome: 246, 246, 246;
     /* white */
     --pale-gray-monochrome: 244, 244, 244;
     /* v light gray for blockquotes and stuff */
     --light-gray-monochrome: 170, 170, 170;
     /* light accent gray for login status */
     --gray-monochrome: 69, 69, 72;
     /* gray */
     --dark-gray-monochrome: 51, 48, 52;
     /* dark accent gray for sidebar background */
     --black-monochrome: 14, 4, 14;
     /* black */
     --bright-accent: 203, 90, 204;
     /* purple */
     --pale-accent: 143, 64, 145;
     /* medium-dark purple */
     --medium-accent: 111, 25, 93;
     /* medium purple */
     --dark-accent: 27, 22, 62;
     /* dark purple */
     --alt-accent: 7, 190, 234;
     /* pale orange */
 
     /* Primary Theme Colors */
     --swatch-background: var(--black-monochrome);
     --swatch-primary: var(--bright-accent);
     --swatch-primary-darker: var(--medium-accent);
     --swatch-primary-darkest: var(--dark-accent);
     /* Primary Text Colors */
     --swatch-text-dark: var(--black-monochrome);
     --swatch-text-light: var(--white-monochrome);
     --swatch-text-general: var(--white-monochrome);
     --swatch-important-text: var(--bright-accent);
 
     /* Primary Menu Colors */
     --swatch-menubg-color: var(--black-monochrome);
     --swatch-menubg-light-color: var(--pale-gray-monochrome);
     --swatch-menubg-medium-color: var(--light-gray-monochrome);
     --swatch-menubg-medium-dark-color: var(--gray-monochrome);
     --swatch-menubg-dark-color: var(--dark-gray-monochrome);
     --swatch-menubg-black-color: var(--black-monochrome);
     --swatch-menubg-hover-color: var(--bright-accent);
     --swatch-menutxt-general-color: var(--white-monochrome);
     --swatch-border-color: var(--bright-accent);
     /* Primary Header Colors */
     --swatch-headerh1-color: var(--white-monochrome);
     --swatch-headerh2-color: var(--white-monochrome);
 
     --rating-module-button-color: var(--swatch-menutxt-light-color);
     --rating-module-text-color: var(--swatch-menutxt-light-color);
 
     /* ===SECONDARY & TERTIARY COLORS=== */
     /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
     --swatch-secondary-color: var(--swatch-menubg-dark-color);
     --swatch-tertiary-color: var(--swatch-primary);
     --swatch-alternate-color: var(--swatch-primary-darkest);
 
     /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
     --swatch-text-secondary-color: var(--swatch-menutxt-light-color);
     --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
     /* Link Colors */
     --link-color: var(--bright-accent);
     --visited-link-color: var(--swatch-primary);
     --hover-link-color: var(--alt-accent);
 
     /* Header Gradients */
 
     --gradient-topmenu-mobile: inherit;
     --diagonal-stripes: inherit;
 
     /* Sidebar */
 
     --background-gradient-color: rgba(var(--black-monochrome), 0);
    }
 
    /*  ===============================
    ======= SPECIFIC COLORS =======
    ===============================
    /* Colors for Buttons, Tabs, Tables, Footnotes Hover/Modal, Etc. */
 
    :root {
     /* ===TOPBAR GRADIENT=== */
     /* Colors used in the --gradient-topmenu var to give the topbar its color */
     --swatch-topmenu-bg-color: var(--swatch-background), 0.125;
     --swatch-topmenu-border-color: var(--swatch-background), 0.125;
    }
 
    #main-content {
     /* ===MAIN CONTENT UI ELEMENTS */
     /* ===UI ICONS=== */
     /* ===PAGE OPTIONS ICONS=== */
     --ui-icon-color: var(--swatch-primary);
     --ui-icon-bg: var(--swatch-primary-darkest);
     --ui-icon-hover-color: var(--swatch-primary-darkest);
     --ui-icon-hover-bg: var(--swatch-primary);
    }
 
    /* ===GLOBAL ELEMENTS=== */
    :root {
     /* ===UI BUTTONS=== */
     --ui-button-bg: var(--swatch-primary-darkest);
     --ui-button-txt: var(--swatch-text-tertiary-color);
     --ui-button-hover-bg: var(--swatch-primary);
     --ui-button-hover-txt: var(--swatch-text-tertiary-color);
     --ui-button-hover-outline: var(--swatch-primary);
    }
 
    ::-moz-selection {
     background: rgba(var(--bright-accent), 0.5);
    }
 
    ::selection {
     background: rgba(var(--bright-accent), 0.5);
    }
 
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    h7 {
     color: rgb(var(--swatch-primary));
     font-family: var(--title-font);
    }
 
    body {
     background-image: inherit;
     color: rgb(var(--swatch-text-light));
    }
 
    #extra-div-1,
    #extra-div-2 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: calc(var(--final-header-height-on-desktop) + 10rem);
     overflow: hidden;
     pointer-events: none;
     will-change: transform;
    }
 
    #extra-div-1 {
     z-index: -3;
     opacity: 0.75;
     background-position: center top;
    }
 
    #extra-div-1::before {
     -webkit-animation: move 90s infinite cubic-bezier(0.4, 0, 0.2, 1);
     animation: move 90s infinite cubic-bezier(0.4, 0, 0.2, 1);
    }
 
    #extra-div-2::before {
     z-index: -2;
     -webkit-animation: move 120s infinite cubic-bezier(0.4, 0, 0.2, 1) 30s;
     animation: move 120s infinite cubic-bezier(0.4, 0, 0.2, 1) 30s;
     opacity: 0.5;
     background-position: left -12.5rem top -3.125rem;
    }
 
    #extra-div-1::before,
    #extra-div-2::before {
     content: " ";
     position: absolute;
     width: 150%;
     height: 100%;
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Agalactic-theme/galfed_bg.png');
     background-repeat: repeat-x;
     background-size: 50%;
     pointer-events: none;
     will-change: transform;
     -webkit-mask: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 120%);
             mask: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 120%);
    }
 
    #header {
     background-position: left .75rem top .65rem;
     background-size: auto 6.375rem;
    }
 
    #header::before {
     background-size: auto 9rem;
    }
 
    #header h1 a {
     position: relative;
     font-variant-ligatures: no-common-ligatures;
    }
 
    #header h1,
    #header h2 {
     font-weight: normal;
     font-variant-ligatures: no-common-ligatures;
    }
 
    #header h2 span {
     font-variant-ligatures: no-common-ligatures;
    }
 
    #header h1 a::before,
    #header h1 a::after {
     content: var(--header-title);
     width: 100%;
     height: 100%;
     mix-blend-mode: screen;
     font-variant-ligatures: no-common-ligatures;
    }
 
    #header h1 a::after {
     position: absolute;
     z-index: -1;
     left: 0;
     transform: translateY(-0.25rem) translateX(-0.125rem);
     color: rgb(var(--bright-accent));
     mix-blend-mode: overlay;
    }
 
    #header h2 span::before {
     font-family: var(--header-font);
     font-weight: 800;
     letter-spacing: 0.25em;
     font-feature-settings: inherit;
     font-variant-ligatures: no-common-ligatures;
    }
 
    #header h1 a::before,
    #header h2 span::before {
     -webkit-text-stroke: transparent;
    }
 
    #header h2 span::after {
     display: none;
    }
 
    #header div[class*="top-bar"] * {
     color: rgb(var(--swatch-text-tertiary-color));
    }
 
    #login-status span.printuser {
     color: rgb(var(--swatch-text-tertiary-color));
    }
 
    #side-bar {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.1);
    }
 
    #side-bar:hover {
     background-color: rgba(var(--swatch-menubg-color), 0.1);
     ;
    }
 
    #side-bar .side-block {
     background-color: inherit;
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item a:visited,
    #side-bar div.menu-item a:active,
    #side-bar div.menu-item .text {
     color: rgb(var(--swatch-menutxt-light-color));
     font-weight: 500;
    }
 
    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
     padding-right: 0.5rem;
     color: rgb(var(--swatch-primary));
     font-size: 1.15em;
     font-weight: 500;
     text-shadow: inherit;
    }
 
    #page-title::before,
    .meta-title::before,
    #page-title::after,
    .meta-title::after {
     background-attachment: fixed;
     background-position: top var(--final-header-height-on-desktop) center;
     background-size: min(90vw, var(--body-width-on-desktop));
     background-image:
     radial-gradient(rgb(var(--swatch-primary)) 0%,
     rgb(var(--swatch-primary)) 40%,
     rgba(var(--swatch-primary-darkest), 0) 100%);
     background-color: transparent;
    }
 
    blockquote,
    textarea {
     border-color: rgb(var(--medium-accent));
     background-color: rgba(var(--swatch-menubg-dark-color), 0.5);
     color: rgb(var(--swatch-menutxt-light-color));
     font-family: var(--body-font);
    }
 
    .code {
     border: 0.0625rem dashed rgb(var(--bright-accent));
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
     color: rgb(var(--swatch-menutxt-light-color));
     font-family: var(--mono-font);
     word-break: break-all;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
    }
 
    .code,
    .code pre,
    .code pre span.hl-code,
    .code pre span.hl-identifier {
     color: rgb(var(--swatch-menutxt-light-color));
    }
 
    .scp-image-block .scp-image-caption {
     background-color: rgb(var(--swatch-primary-darkest));
    }
 
    .yui-navset .yui-nav a,
    yui-navset .yui-navset-top .yui-nav a,
    .yui-navset .yui-nav li,
    .yui-navset .yui-navset-top .yui-nav li {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.5);
     color: rgb(var(--swatch-menutxt-light-color));
    }
 
    .yui-navset .yui-content,
    .yui-navset .yui-navset-top .yui-content {
     border-color: rgb(var(--medium-accent));
    }
 
    table.wiki-content-table,
    table.wiki-content-table tbody {
     border-collapse: collapse;
    }
 
    table.wiki-content-table th {
     background: rgba(var(--swatch-menubg-dark-color), 0.5);
     color: rgb(var(--bright-accent));
     font-family: var(--header-font);
     font-size: calc(var(--base-font-size) * 1.1);
    }
 
    table.wiki-content-table th,
    table.wiki-content-table tr {
     border: .0625rem solid rgba(var(--bright-accent), 0.25) !important;
     text-shadow: none;
    }
 
    table.wiki-content-table td {
     border: .0625rem solid rgb(var(--medium-accent));
    }
 
    .content-panel.standalone {
     background: rgb(var(--swatch-primary-darkest));
    }
 
    hr {
     border-top: none;
     background:
     linear-gradient(10deg,
     rgba(var(--bright-accent), 0.15) 0%,
     rgba(var(--bright-accent), 1) 50%,
     rgba(var(--bright-accent), 0.15) 100%);
     -webkit-filter: blur(0.04rem);
     filter: blur(0.04rem);
    }
 
    #odialog-container,
    .title.modal-header,
    .owindow,
    .hovertip {
     background-color: rgb(var(--swatch-primary-darkest));
     color: rgb(var(--white-monochrome));
    }
 
    #main-content .page-tags {
     box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary));
    }
 
    #main-content .page-tags::before {
     background-color: rgb(var(--swatch-primary));
    }
 
    #lock-info {
     background: rgb(var(--swatch-menubg-dark-color));
    }
 
    #page-content>div.unmargined {
     background: rgb(var(--bright-accent));
    }
 
    #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]),
    #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) {
     color: rgb(var(--swatch-primary-secondary-color));
    }
 
    /* Sky Sermon Nav CSS */
 
    .skysermon-nav {
     --text-shadow: rgba(var(--black-monochrome), 0.35);
     --box-shadow: rgb(var(--gray-monochrome));
     --border-color: rgb(var(--bright-accent));
     margin: 0.625rem 0 0.938rem;
     margin-bottom: 1.250rem;
     padding: 0 0.125rem;
     border: double 0.188rem var(--border-color);
     border-radius: 0.0625rem;
     background-color: rgb(var(--dark-accent));
     box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow);
     color: rgb(var(--white-monochrome));
     text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow);
    }
 
    .skysermon-nav a {
     display: inline-block;
     position: relative;
     width: 100%;
     height: 100%;
     padding-top: 0.45em;
     padding-bottom: 0.35em;
     color: rgb(var(--bright-accent));
    }
 
    .skysermon-nav a::before {
     display: flex;
     position: absolute;
     top: 0;
     align-items: center;
     height: 100%;
     font-size: calc(var(--base-font-size) * 1.1);
     font-weight: 800;
     line-height: calc(var(--base-font-size) * 0.7);
    }
 
    .skysermon-nav .footer-wikiwalk-nav {
     display: flex;
     align-items: center;
     justify-content: center;
    }
 
    .skysermon-nav .footer-wikiwalk-nav * {
     line-height: 1em;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .center {
     flex-basis: 8em;
     text-align: center;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .left,
    .skysermon-nav .footer-wikiwalk-nav .right {
     display: inline-flex;
     position: relative;
     flex-basis: calc(50% - 5em);
     align-items: center;
     font-size: calc(var(--base-font-size) * 0.8);
    }
 
    .skysermon-nav .footer-wikiwalk-nav .left {
     justify-content: flex-end;
     margin: 0.35em 0 0.35em 0.35em;
     padding-right: 0.5em;
     padding-left: 1em;
     border-right: 0.0625rem solid rgb(var(--white-monochrome));
     text-align: right;
    }
 
    .skysermon-nav .left>a::before {
     content: "«";
     left: -0.75em;
     transition: left 1s ease-in-out;
     will-change: left;
     -webkit-animation: bounce-left 1.7s infinite;
     animation: bounce-left 1.7s infinite;
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
    }
 
    .skysermon-nav .left>a:hover::before {
     -webkit-animation-play-state: running;
     animation-play-state: running;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .right {
     justify-content: flex-start;
     margin: 0.35em 0.35em 0.35em 0;
     padding-right: 1em;
     padding-left: 0.5em;
     border-left: 0.0625rem solid rgb(var(--white-monochrome));
     text-align: left;
    }
 
    .skysermon-nav .right>a::before {
     content: "»";
     right: -0.75em;
     transition: left 1s ease-in-out;
     will-change: right;
     -webkit-animation: bounce-right 1.7s infinite;
     animation: bounce-right 1.7s infinite;
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
    }
 
    .skysermon-nav .right>a:hover::before {
     -webkit-animation-play-state: running;
     animation-play-state: running;
    }
 
    #side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
     -webkit-filter: invert(1);
             filter: invert(1);
    }
 
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
     background-color: rgb(var(--swatch-menubg-color));
    }
 
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
     mix-blend-mode: lighten;
    }
 
    @media only screen and (max-width: 56.25rem) {
     #header h1 a {
     margin-top: calc(0.625rem + var(--offset-from-page-top));
     }
 
     #header h2 span {
     margin-left: 7.75rem;
     }
 
     #header h2 span::before {
     letter-spacing: 0.1em;
     }
 
     #skrollr-body:target #container {
     transform: none;
     }
 
     #skrollr-body:target #container-wrap-wrap {
     overflow: hidden;
     }
 
     #top-bar {
     background-color: rgb(var(--black-monochrome))
     }
 
     #top-bar div.top-bar>ul>li>ul,
     #top-bar div.mobile-top-bar>ul>li>ul {
     display: flex;
     transform: translate(-50%, 0);
     }
 
     #top-bar div.mobile-top-bar>ul>li>ul>li {
     display: flex;
     flex-basis: calc(98vw / 2);
     flex-grow: 2;
     width: calc(98vw + 1px);
     max-width: calc(98vw + 1px);
     max-height: calc(99vh / 15);
     }
 
     #top-bar div.top-bar>ul>li>ul>li>a,
     #top-bar div.mobile-top-bar>ul>li>ul>li>a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     font-size: calc(var(--base-font-size) * 0.8);
     line-height: 1em;
     }
 
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(1)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(11)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(21)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(31)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(41)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(51)>a::before {
     display: flex;
     align-items: center;
     justify-content: center;
     }
 
     #side-bar {
     background-color: rgba(var(--swatch-menubg-dark-color), 1);
     }
 
     #side-bar:hover {
     background-color: rgba(var(--swatch-menubg-color), 1);
     ;
     }
    }
 
    /* CSS Animations */
 
    @-webkit-keyframes move {
     25% {
     transform: translateY(-3.125rem) translateX(0);
     }
 
     50% {
     transform: translateY(0px) translateX(-3.125rem);
     }
 
     75% {
     transform: translateY(-3.125rem) translateX(0);
     }
    }
 
    @keyframes move {
     25% {
     transform: translateY(-3.125rem) translateX(0);
     }
 
     50% {
     transform: translateY(0px) translateX(-3.125rem);
     }
 
     75% {
     transform: translateY(-3.125rem) translateX(0);
     }
    }
 
    @-webkit-keyframes move2 {
     25% {
     transform: translateY(0) translateX(-3.125rem);
     }
 
     50% {
     transform: translateY(-3.125rem) translateX(0);
     }
 
     75% {
     transform: translateY(0) translateX(-3.125rem);
     }
    }
 
    @keyframes move2 {
     25% {
     transform: translateY(0) translateX(-3.125rem);
     }
 
     50% {
     transform: translateY(-3.125rem) translateX(0);
     }
 
     75% {
     transform: translateY(0) translateX(-3.125rem);
     }
    }
 
    @-webkit-keyframes flicker {
     0% {
     opacity: .1;
     }
 
     10% {
     opacity: 1;
     }
 
     15% {
     opacity: .3;
     }
 
     17% {
     opacity: 1;
     }
 
     20% {
     opacity: .5;
     }
 
     25% {
     opacity: .2;
     }
 
     30% {
     opacity: 1;
     }
 
     43% {
     opacity: .3;
     }
 
     43% {
     opacity: .8;
     }
 
     75% {
     opacity: .75;
     }
 
     79% {
     opacity: .53;
     }
 
     80% {
     opacity: .69;
     }
 
     100% {
     opacity: 1;
     }
    }
 
    @keyframes flicker {
     0% {
     opacity: .1;
     }
 
     10% {
     opacity: 1;
     }
 
     15% {
     opacity: .3;
     }
 
     17% {
     opacity: 1;
     }
 
     20% {
     opacity: .5;
     }
 
     25% {
     opacity: .2;
     }
 
     30% {
     opacity: 1;
     }
 
     43% {
     opacity: .3;
     }
 
     43% {
     opacity: .8;
     }
 
     75% {
     opacity: .75;
     }
 
     79% {
     opacity: .53;
     }
 
     80% {
     opacity: .69;
     }
 
     100% {
     opacity: 1;
     }
    }
 
    @-webkit-keyframes rotation {
     from {
     transform: rotate(0deg);
     }
 
     to {
     transform: rotate(359deg);
     }
    }
 
    @keyframes rotation {
     from {
     transform: rotate(0deg);
     }
 
     to {
     transform: rotate(359deg);
     }
    }
 
    @-webkit-keyframes bounce-left {
     0% {
     left: -0.75em;
     }
 
     50% {
     left: -0.50rem;
     }
 
     100% {
     left: -0.75em;
     }
    }
 
    @keyframes bounce-left {
     0% {
     left: -0.75em;
     }
 
     50% {
     left: -0.50rem;
     }
 
     100% {
     left: -0.75em;
     }
    }
 
    @-webkit-keyframes bounce-right {
     0% {
     right: -0.75em;
     }
 
     50% {
     right: -0.50rem;
     }
 
     100% {
     right: -0.75em;
     }
    }
 
    @keyframes bounce-right {
     0% {
     right: -0.75em;
     }
 
     50% {
     right: -0.50rem;
     }
 
     100% {
     right: -0.75em;
     }
    }
}
 
/* L2 has been here */
 
@media (max-width: 767px) {
    #side-bar .side-bar-container {
        background-color: unset !important;
        padding: 0 !important;
    }
}

Uma grande neblina estava se formando. A névoa era pontuada por tochas elétricas. Cinco luas apontadas em forma de uma estrela iluminavam o céu.

"Opa, desculpe. Devo ter apertado o botão errado," disse Duchamp.

Júnior, agora acostumado com a doença por transporte, estava de pé em uma sala do trono. Diante dele, sentado em um palanquim com relevo de titânio bem acima do solo, estava um esqueleto vestindo um manto roxo. À sua direita e à esquerda havia esqueletos vestidos de maneira semelhante em assentos inferiores. Todos os mantos estavam estampados com o ícone da Fundação SCP.

"Espere só 30 segundos, o capacete precisa recarregar para o próximo salto."

Os esqueletos começaram a tremer. O esqueleto chefe levantou a mão. Júnior ouviu passos atrás dele. Ele se virou e, da escuridão, ele viu duas pessoas andróginas de pele bronzeada caminhando para frente. Seus olhos estavam presos nas luas acima delas e, após cerca de 10 segundos, elas estavam ao lado de Júnior.

Elas usavam trapos simples. Suas mãos estavam cruzadas atrás das costas, mas as pessoas as soltaram e cada uma revelou uma adaga. Júnior deu um passo para trás, pensando que elas iam atacá-lo. Com uma voz seca, elas começaram a falar ao mesmo tempo.

"Eu caí no abismo dos ossos, para viver, para morrer, para me tornar imortal. Ninguém vive para sempre."

As duas golpearam seus pescoços com suas adagas e caíram no chão. Júnior sentiu algo em sua mão. Ele o levantou para descobrir que estava segurando uma adaga.

O esqueleto chefe inclinou a cabeça para baixo, olhando para Júnior com olhos vazios. Ele apertou mão estendida. A mão do Júnior com a adaga foi em direção ao seu pescoço.

Mas antes dela tocar seu pescoço, ele desapareceu.

Seguir o Júnior?