Foxen's Brigade, Bringing Dreams to Light.

---

+ Show component code

#side-bar {
    /* ===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-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-light-color);
 
    /* 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);
 
    /* ===SIDE-BAR ELEMENTS=== */
 
    /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0, 0, 0, 0;
    --sidebar-media-bg-color: 0, 0, 0, 0;
 
    /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0, 0, 0, 0;
    /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
    /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
    /* ===SIDEBAR COLLAPSIBLES=== */
    /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color:
        rgba(var(--swatch-primary-darker), 0.1)
        /* Thumb */
        rgba(var(--swatch-secondary-color), 0.05);
    /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:-webkit-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:-moz-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a[href*="tiktok"]::before,
#side-bar .side-block.media a[href*="tiktok"]::after {
    transition:
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before,
#side-bar .side-block.media a[href*="tiktok"]:active::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]::after {
    --clip-path:
        polygon(0 0,
            0 0,
            0 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::after,
#side-bar .side-block.media a[href*="tiktok"]:active::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a img {
    -webkit-filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
            filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
    transition: -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}
 
#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-dark-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
        function sendStyle() {
            try {
                window.parent.window.interwikiFrame.bhlDark();
            } catch(e) {}
        }
        sendStyle();
        </script>
    </body>
</html>

---

+ Show theme code

@import url("https://use.typekit.net/mst2dnj.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: "ouroborous-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Ouroborous Theme";
        /* set this to your theme's full name */
 
        --header-title: "The Foundation";
        --header-subtitle: "Office of the Overseer";
 
        /* Header */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aouroborous-theme/ouroborous_logo.svg");
 
        /* Typefaces */
        --header-font: korolev-condensed, sans-serif;
        --title-font: korolev, sans-serif;
 
        --ui-wght: 550;
        --ui-hvr-wght: 700;
 
        /* Standard Colors */
        --white-monochrome: 246, 246, 246;
        /* white */
        --pale-gray-monochrome: 244, 244, 244;
        /* v light gray for blockquotes and stuff */
        --light-pale-gray-monochrome: 244, 244, 244;
        /* very light pale gray for misc. use */
        --very-light-gray-monochrome: 215, 215, 215;
        --light-gray-monochrome: 133, 133, 133;
        /* light accent gray for login status */
        --gray-monochrome: 66, 66, 66;
        /* gray */
        --dark-gray-monochrome: 59, 59, 59;
        /* dark accent gray for sidebar background */
        --black-monochrome: 15, 5, 5;
        /* black */
        --bright-accent: 185, 5, 4;
        /* bright red */
        --medium-accent: 140, 20, 25;
        /* medium red */
        --dark-accent: 153, 1, 0;
        /* dark red */
        --newpage-color: 221, 102, 17;
        /* pale orange */
 
        /* Primary Text Colors */
        --swatch-text-general: var(--swatch-text-light);
 
        /* Primary Menu Colors */
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        --swatch-menubg-color: var(--black-monochrome);
        --swatch-border-color: var(--swatch-menubg-black-color);
        --sidebar-links-text: var(--swatch-menutxt-light-color);
 
        /* Primary Theme Colors */
        --swatch-background: var(--black-monochrome, 26, 25, 24);
 
        /* ===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-menubg-light-color);
        --swatch-alternate-color: var(--swatch-background);
 
        /* 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);
 
        /* Rating Module Colors */
        --rating-module-button-color: var(--bright-accent);
        --rating-module-button-plus-color: 45, 65, 25;
        --rating-module-button-negative-color: 70, 35, 30;
        --rating-module-button-cancel-color: 50, 45, 50;
        --rating-module-button-credit-color: 50, 45, 50;
        --rating-module-text-color: var(--dark-accent);
        --rating-module-button-color: var(--dark-accent);
        --rating-module-text-hover-color: var(--swatch-menutxt-light-color);
 
        /* Background and Header Colors */
        --background-gradient-color: var(--very-light-gray-monochrome);
        --header-gradient-color-bottom: var(--bright-accent);
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);
        --background-gradient-distance: 40rem;
        --diagonal-stripes: none;
 
        --scrollbar-width: 0.5rem;
 
        /*Toggle Sidebar Button Colors*/
        --toggle-button-bg: rgb(var(--black-monochrome));
        --toggle-border-color: rgb(var(--bright-accent));
        --toggle-icon-color: rgb(var(--white-monochrome));
    }
 
    /* ===PAGE ELEMENTS COLORS=== */
    /* Colors for Buttons, Tabs, Tables, & Footnotes Hover/Modal */
    :root {
        /* ===UI BUTTON COLORS=== */
        --ui-button-bg: var(--swatch-background);
 
        /* ===TABS COLORS=== */
        --tabs-bg: var(--swatch-primary-darkest), 0.15;
 
        /* ===TABLES COLORS=== */
        --tables-header-bg: var(--swatch-primary-darkest);
        --tables-header-txt: var(--swatch-text-secondary-color);
        --tables-border: var(--swatch-primary), 0.5;
 
        /* ===FOOTNOTES HOVER BLOCK COLORS=== */
        --hoverblock-bg: var(--swatch-background);
    }
 
    #header,
    #footer,
    #license-area {
        --swatch-text-secondary-color: var(--swatch-menutxt-light-color);
    }
 
    #header {
        /* ===LOGIN BOX ELEMENT=== */
        --login-line-divider-color: var(--swatch-text-tertiary-color);
        --login-username-color: var(--swatch-text-tertiary-color);
        --login-myaccount-color: var(--swatch-text-tertiary-color);
        /* Dropdown Box when arrow is clicked */
        --login-dropdown-text-color: var(--swatch-text-tertiary-color);
        --login-dropdown-text-hover-color: var(--swatch-text-tertiary-color);
        --login-dropdown-bg-hover-color: var(--dark-accent);
    }
 
    #side-bar {
        --sidebar-links-hover-text-color: var(--swatch-menutxt-general-color);
    }
 
    ::-moz-selection {
        background: rgba(var(--swatch-primary), 1);
        color: rgb(var(--black-monochrome)) !important;
        text-shadow: none;
    }
 
    ::selection {
        background: rgba(var(--swatch-primary), 1);
        color: rgb(var(--black-monochrome)) !important;
        text-shadow: none;
    }
 
    html,
    body {
        color: rgb(var(--swatch-text-light));
    }
 
    a {
        color: rgb(var(--swatch-primary));
    }
 
    div.buttons.alignleft>input {
        cursor: pointer;
    }
 
    .autocomplete-list li {
        background-color: rgb(var(--black-monochrome)) !important;
    }
 
    .autocomplete-list li.yui-ac-highlight {
        background-color: rgb(var(--dark-accent)) !important;
        color: rgb(var(--black-monochrome)) !important;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
        padding: 0.15em;
        margin: -0.15em;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome));
        transition:
            box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-animation-delay: -300ms;
        animation-delay: -300ms;
        transition-delay: 300ms;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
        padding: 0.3em 0.25em 0.2em 0.25em;
        margin: -0.25em;
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent), 0.6667);
        text-decoration: none;
        color: rgb(var(--white-monochrome));
        -webkit-animation: neondrop 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate;
        animation: neondrop 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate;
        -webkit-animation-delay: -300ms;
        animation-delay: -300ms;
        transition-delay: 0;
    }
 
    @supports (background-blend-mode: screen) {
        #extra-div-1 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            background-image:
                linear-gradient(to bottom,
                    rgb(var(--black-monochrome)) 0%,
                    rgb(var(--black-monochrome)) 30%,
                    rgb(var(--dark-gray-monochrome)) 100%),
                linear-gradient(to bottom,
                    rgb(var(--bright-accent)) var(--header-height-on-desktop),
                    rgb(var(--black-monochrome)) calc(var(--header-height-on-desktop) + 0.125rem),
                    rgb(var(--black-monochrome)) calc(100% - 0.125rem),
                    rgb(var(--black-monochrome)) calc(100% - 0.125rem),
                    rgb(var(--bright-accent)) 100%),
                linear-gradient(to bottom,
                    rgba(var(--black-monochrome), 0) 0,
                    rgba(var(--black-monochrome), 0.5) 10rem,
                    rgba(var(--black-monochrome), 1) 25rem,
                    rgba(var(--black-monochrome), 1) 100%);
            background-size:
                var(--header-background-image-size),
                100% var(--final-header-height-on-desktop),
                100% var(--background-gradient-distance);
            background-repeat: no-repeat;
            background-blend-mode: darken;
            pointer-events: none;
        }
 
        #extrac-div-1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--background-gradient-distance);
            z-index: -2;
            background-color: rgb(var(--bright-accent));
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f0505' fill-opacity='0.1'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }
    }
 
    #header {
        background-repeat: no-repeat;
        background-position: left 0 top 1rem;
        background-clip: border-box;
        background-size: auto calc(var(--header-height-on-desktop) - 2rem);
        -webkit-filter: initial;
        filter: initial;
    }
 
    #header h1,
    #header h2 {
        --wght: 400;
        font-weight: 400;
    }
 
    #header h1 a {
        --wght: 500;
        font-size: 175%;
        font-weight: 500;
        overflow-wrap: normal;
        padding: 0;
        margin-top: calc((var(--header-height-on-desktop) - 0.5em)/2);
        margin-left: calc(var(--header-height-on-desktop) - .75rem);
    }
 
    #header h1 a::before {
        color: rgb(255, 219, 90);
        color: rgb(var(--bright-accent));
        text-shadow: inherit;
        -webkit-animation: neon-end 300ms ease-in-out 1 normal forwards;
        animation: neon-end 300ms ease-in-out 1 normal forwards;
        transition: all 0.5s;
    }
 
    #header h1 a:hover::before,
    #header h1 a:active::before {
        -webkit-animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
        animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
    }
 
    #header h1 a:focus-within::before {
        -webkit-animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
        animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
    }
 
    #top-bar a:hover,
    #top-bar a:active {
        -webkit-animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
        animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
    }
 
    #top-bar a:focus-within {
        -webkit-animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
        animation:
            neon-start 300ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 300ms infinite alternate;
    }
 
    #header h2 span {
        margin-left: calc(var(--header-height-on-desktop) + 0.75rem);
    }
 
    #top-bar {
        --swatch-text-secondary-color: var(--swatch-text-tertiary-color);
    }
 
    #top-bar div.mobile-top-bar>ul>li:hover,
    #top-bar div.top-bar>ul>li:hover {
        background: rgb(var(--swatch-menubg-black-color));
    }
 
    #top-bar div.mobile-top-bar>ul>li>ul,
    #top-bar div.top-bar>ul>li>ul {
        background: rgba(var(--swatch-menubg-black-color), .93);
    }
 
    #side-bar {
        background-color: rgb(var(--black-monochrome));
    }
 
    #side-bar div.menu-item {
        border-bottom: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
        border-top: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
        margin-top: -0.0625rem;
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        color: rgb(var(--swatch-menutxt-light-color));
        line-height: inherit;
    }
 
    #side-bar div.menu-item a:hover {
        background-color: rgba(var(--bright-accent), .15);
    }
 
    #side-bar div.menu-item a:hover::before,
    #top-bar div.top-bar>ul>li>ul>li>a:hover::before,
    #top-bar div.top-bar>ul>li>ul>li>ul>li>a:hover::before {
        -webkit-animation: neonbg 1.5s ease-in-out infinite alternate;
        animation: neonbg 1.5s ease-in-out infinite alternate;
    }
 
    #side-bar .heading,
    #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
        --wght: 700;
        background: initial;
        font-weight: 700;
    }
 
    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
        --wght: 900;
        color: rgb(var(--swatch-menutxt-dark-color));
        text-shadow: inherit;
        letter-spacing: 0.05rem;
        font-weight: 900;
        font-size: 1.25rem;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 1rem 0 0.25rem 0.5rem;
        color: rgb(255, 219, 90);
        color: rgb(var(--bright-accent));
        text-shadow: inherit;
        font-family: var(--header-font);
        text-transform: none;
    }
 
    #side-bar .heading p::after,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::after,
    #side-bar .heading p::before,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 0.35rem;
    }
 
    #side-bar .side-block[style*="background-color:"] * {
        margin-left: 0 !important;
    }
 
    #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;
    }
 
    #side-bar div.menu-item .sub-text {
        color: rgba(var(--swatch-primary-darker), 1);
    }
 
    html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
        box-shadow: inherit;
    }
 
    #side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
        filter: invert(1);
    }
 
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
        mix-blend-mode: lighten;
    }
 
    #page-title {
        color: rgb(var(--swatch-menutxt-dark-color));
        -webkit-animation: neon-end 300ms ease-in-out 1 normal forwards;
        animation: neon-end 300ms ease-in-out 1 normal forwards;
        cursor: default;
        transition: all 0.5s;
        border-bottom: none;
    }
 
    #page-title:hover,
    #page-title:active {
        -webkit-animation:
            neon-start 500ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 500ms infinite alternate;
        animation:
            neon-start 500ms ease-in-out 1 normal forwards,
            neon 1.5s ease-in-out 500ms infinite alternate;
        color: rgb(var(--bright-accent));
    }
 
    blockquote,
    .blockquote {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .yui-navset .yui-content {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .yui-navset .yui-content,
    .yui-navset .yui-navset-top .yui-content {
        border-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
        background-color: rgb(var(--swatch-menubg-black-color));
        color: rgb(var(--swatch-text-light));
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-navset-top .yui-nav li {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .yui-navset .yui-nav a:focus,
    .yui-navset .yui-nav a:hover {
        -webkit-animation: neonbg 1.5s ease-in-out infinite alternate;
        animation: neonbg 1.5s ease-in-out infinite alternate;
    }
 
    table.wiki-content-table th {
        background: rgb(var(--swatch-primary-darkest));
    }
 
    .code {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .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.5rem solid rgba(var(--black-monochrome));
    }
 
    a:visited {
        color: rgb(var(--swatch-primary-darker));
    }
 
    h1 {
        color: rgb(var(--swatch-primary)) !important;
    }
 
    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);
        height: 0.03125rem;
        margin: 1.25em 0;
    }
 
    hr::before {
        content: " ";
        position: absolute;
        top: 0.1125rem;
        left: 0;
        border-top: none;
        width: 100%;
        height: 0.125rem;
        background:
            linear-gradient(10deg,
                rgba(var(--bright-accent), 0.15) 0%,
                rgba(var(--bright-accent), 1) 50%,
                rgba(var(--bright-accent), 0.15) 100%);
        background-position: center center;
        -webkit-filter: blur(0.04rem);
        filter: blur(0.04rem);
    }
 
    .page-rate-widget-box {
        background:
            linear-gradient(to bottom left,
                rgba(var(--swatch-primary-darkest), 0.1) 0,
                rgba(var(--black-monochrome), 1) 100%) !important;
    }
 
    form#edit-page-form {
        background-color: rgba(var(--bright-accent), 0.25);
    }
 
    textarea,
    input.text {
        background-color: rgb(var(--black-monochrome));
        color: rgb(var(--white-monochrome));
        padding: 0.5em;
    }
 
    .owindow .title {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    #odialog-container,
    .title.modal-header,
    .owindow,
    .hovertip {
        background-color: rgb(var(--swatch-primary-darkest));
        color: rgb(var(--white-monochrome));
    }
 
    .owindow .button-bar a {
        background-color: rgb(var(--swatch-menubg-dark-color));
        color: rgb(var(--white-monochrome));
    }
 
    @media only screen and (max-width: 56.25rem) {
        #header {
            --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
            --y-offset: 1.5rem;
            background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
            background-repeat: no-repeat, repeat;
        }
 
        #header>h1>a>span {
            height: var(--header-height-on-mobile);
        }
 
        #header h1 a {
            line-height: 1;
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 2rem);
            font-size: 3rem;
        }
 
        #header h2 span {
            line-height: 1.1;
            margin-left: calc(var(--header-height-on-mobile) - 3rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.75rem));
            font-size: 1rem;
        }
 
        #extra-div-1 {
            background-image:
                linear-gradient(to bottom,
                    rgb(var(--black-monochrome)) 0%,
                    rgb(var(--black-monochrome)) 30%,
                    rgb(var(--dark-gray-monochrome)) 100%),
                linear-gradient(to bottom,
                    rgb(var(--bright-accent)) var(--header-height-on-mobile),
                    rgb(var(--black-monochrome)) calc(var(--header-height-on-mobile) + 0.125rem),
                    rgb(var(--black-monochrome)) calc(100% - 0.125rem),
                    rgb(var(--black-monochrome)) calc(100% - 0.125rem),
                    rgb(var(--bright-accent)) 100%),
                linear-gradient(to bottom,
                    rgba(var(--black-monochrome), 0) 0,
                    rgba(var(--black-monochrome), 0.5) 10rem,
                    rgba(var(--black-monochrome), 1) 25rem,
                    rgba(var(--black-monochrome), 1) 100%);
            background-size:
                var(--header-background-image-size),
                100% var(--final-header-height-on-mobile),
                100% var(--background-gradient-distance);
        }
    }
 
    @media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
        #header {
            --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
            --y-offset: 1.5rem;
            background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
            background-repeat: no-repeat, repeat;
        }
    }
 
    @-webkit-keyframes neon-start {
        from {
            text-shadow:
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent));
        }
 
        to {
            text-shadow:
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--black-monochrome)),
                0 0 0.9375rem rgb(var(--black-monochrome)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 2.1875rem rgb(var(--bright-accent)),
                0 0 2.5rem rgb(var(--bright-accent)),
                0 0 3.125rem rgb(var(--bright-accent)),
                0 0 4.6875rem rgb(var(--bright-accent));
        }
    }
 
    @keyframes neon-start {
        from {
            text-shadow:
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent));
        }
 
        to {
            text-shadow:
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--black-monochrome)),
                0 0 0.9375rem rgb(var(--black-monochrome)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 2.1875rem rgb(var(--bright-accent)),
                0 0 2.5rem rgb(var(--bright-accent)),
                0 0 3.125rem rgb(var(--bright-accent)),
                0 0 4.6875rem rgb(var(--bright-accent));
        }
    }
 
    @-webkit-keyframes neon-end {
        from {
            text-shadow:
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--black-monochrome)),
                0 0 0.9375rem rgb(var(--black-monochrome)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 2.1875rem rgb(var(--bright-accent)),
                0 0 2.5rem rgb(var(--bright-accent)),
                0 0 3.125rem rgb(var(--bright-accent)),
                0 0 4.6875rem rgb(var(--bright-accent));
        }
 
        to {
            text-shadow:
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent));
        }
    }
 
    @keyframes neon-end {
        from {
            text-shadow:
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--black-monochrome)),
                0 0 0.9375rem rgb(var(--black-monochrome)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 2.1875rem rgb(var(--bright-accent)),
                0 0 2.5rem rgb(var(--bright-accent)),
                0 0 3.125rem rgb(var(--bright-accent)),
                0 0 4.6875rem rgb(var(--bright-accent));
        }
 
        to {
            text-shadow:
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--black-monochrome)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent)),
                0 0 0 rgb(var(--bright-accent));
        }
    }
 
    @-webkit-keyframes neon {
        from {
            text-shadow:
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--black-monochrome)),
                0 0 0.9375rem rgb(var(--black-monochrome)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 2.1875rem rgb(var(--bright-accent)),
                0 0 2.5rem rgb(var(--bright-accent)),
                0 0 3.125rem rgb(var(--bright-accent)),
                0 0 4.6875rem rgb(var(--bright-accent));
        }
 
        to {
            text-shadow:
                0 0 0.1565rem rgb(var(--black-monochrome)),
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.469rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--bright-accent)),
                0 0 1.094rem rgb(var(--bright-accent)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 1.5625rem rgb(var(--bright-accent)),
                0 0 2.344rem rgb(var(--bright-accent));
        }
    }
 
    @keyframes neon {
        from {
            text-shadow:
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--black-monochrome)),
                0 0 0.9375rem rgb(var(--black-monochrome)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 2.1875rem rgb(var(--bright-accent)),
                0 0 2.5rem rgb(var(--bright-accent)),
                0 0 3.125rem rgb(var(--bright-accent)),
                0 0 4.6875rem rgb(var(--bright-accent));
        }
 
        to {
            text-shadow:
                0 0 0.1565rem rgb(var(--black-monochrome)),
                0 0 0.3125rem rgb(var(--black-monochrome)),
                0 0 0.469rem rgb(var(--black-monochrome)),
                0 0 0.625rem rgb(var(--bright-accent)),
                0 0 1.094rem rgb(var(--bright-accent)),
                0 0 1.25rem rgb(var(--bright-accent)),
                0 0 1.5625rem rgb(var(--bright-accent)),
                0 0 2.344rem rgb(var(--bright-accent));
        }
    }
 
    @-webkit-keyframes neonbg {
        0% {
            background: rgba(var(--bright-accent), calc(2/3));
        }
 
        100% {
            background: rgba(var(--bright-accent), 0.125);
        }
    }
 
    @keyframes neonbg {
        0% {
            background: rgba(var(--bright-accent), calc(2/3));
        }
 
        100% {
            background: rgba(var(--bright-accent), 0.125);
        }
    }
 
    @-webkit-keyframes neondrop {
        0% {
            box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent), calc(2/3));
        }
 
        100% {
            box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent), 0.125);
        }
    }
 
    @keyframes neondrop {
        0% {
            box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent), calc(2/3));
        }
 
        100% {
            box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent), 0.125);
        }
    }
}

The Foxen's bridgade main wiki. A place to discover the world of the Thorian 7 realms, the Thorni itself its capital and the districts it hides, and Dr. Kitsuni and her crew of misfits, idiots, crazies, and the abnormal. Take your time, read carefully, and watch yourself, the Crimson Council is always watching. And hey, if you want to contribute, the sandbox link is below, along with the author pages.

search

Search is temporarily unavailable, we are working to bring it online!

Meet the crew.

• User Database, Character sheets and Containment procedures

Take a dive into the sandbox, and see others work!

• Stories of the Book of Stars, the sandbox of sandboxes
• Our fabulous author pages!

Join the cause!

• Sign up today to make your dreams come alive.

We have a discord! Foxen's Brigade Hq! Check it out!