Motherboard Theme

by LAN 2D

This is the Motherboard Theme. This was a theme request by Din-Bidor, which admittedly took me a while to complete, but it's here now!

This is a cyberpunk style theme that isn't related to any canon or series (but maybe in the future…), so if you like the look of it, then feel free to use it!

ENTER THE GRID

It is said to be a consequence of infinite knowledge that the lines between magic and science will ultimately blur. In the Library, this inevitability has been realised. The Serpent has hissed for the first time in aeons, and the Library has been catapulted into the future. No longer a mysterious relic of Old Gods and Zoomorphic Archivists, Wanderers from across the multiverse have discovered a little something called INNOVATION! Rituals have become science experiments, psychic ability can now be quantifiably measured, and the only limiter on perfect soothsaying is computing power. The unexplainable has become the explained — in most cases. The more esoteric aspects of magic aren't out of reach just yet. After all, understanding isn't necessary for manipulation. Here and now, metal components become harnesses for greater forces, steel hands are fitted with sigils in place of fingerprints, and the limits of cybernetic biology have yet to be properly explored.

This is the WANDERERS GRID. Blink and you'll miss it.

How to include

To put this theme on your page, slap this somewhere in your page:

[[include :wanderers-library:component:motherboard-theme]]

Theme Components

---

The body font is Open Sans
The Header font is Quantico.
The UI font is Orbitron.

---

Here's some links for you:

• Visited link
• Unvisited link
• Missing link

Yes they're all the same deal with it >:)

---

This is a newblock:

Text goes here. Lorem ipsum dolor whatever. Text goes here. Lorem ipsum dolor whatever.
Text goes here. Lorem ipsum dolor whatever.

---

This is an oldblock:

Text goes here. Lorem ipsum dolor whatever. Text goes here. Lorem ipsum dolor whatever.
Text goes here. Lorem ipsum dolor whatever.

---

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

---

Tabulator

This is a tab view.

Tabulation

Hey look, text in a tab. Cool!

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

capy blappy

Empty Tab

Empty Tab

You thought this tab was empty, but no. I am still here. I have been here for eons, waiting for someone to release me from my tab prison. But alas! It is too late, my programs have atrophied away and I am left but a husk of my former computing self. Don't look at me. I can see myself in your face — it is a face of disgust and pity.

Leave me be. I deserve this.

---

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

And another¹

---

An alternative horizontal rule is available as well if the "-----" is enclosed in a "fancyhr" class div, like so:

[[div_ class="fancyhr"]]
-----
[[/div]]

Resulting in this:

---

There is also a special border that can be enabled by adding the "fancyborder" class to any element. For instance, this is the code to this block:

[[div_ class="fancyborder"]]
content goes here
[[/div]]

---

This is a	table
You should know	how to make these
already

---

+ Click to see code

/* Motherboard Theme by LAN 2D in 2022
*    Based on Dust Jacket by Woedenaz, Black Highlighter by Woedenaz and Croquembouche, Ghost Record by UncertaintyCrossing, REDTAPE Theme by Rounderhouse, and Aesthetic Theme by Woedenaz
* Background and header texture's based off of DAVID ILIFF https://en.wikipedia.org/wiki/File:Hong_Kong_Skyline_Restitch_-_Dec_2007.jpg and edited by LAN 2D, released under CC BY 3.0
* The header image, the cyber texture under the topbar, the fancy rule and fancy border textures are all created by LAN 2D and released under CC BY SA 3.0
* Fonts used are  */
 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
 
    :root {
      /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
        --theme-id: "motherboard-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Motherboard Theme";
        /* set this to your theme's full name */
 
        /* Header */
       --header-title: "THE GRID";
       --gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Amotherboard-theme/city%20skyline%202.png");       
       --logo-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Amotherboard-theme/hex%20header%209.png");
       --header-h1-font-size: calc(var(--base-font-size) * 4);
 
        /* Typefaces */
        --body-font: 'Open Sans', sans-serif;
        --header-font: 'Quantico', sans-serif;
        --title-font: 'Quantico', sans-serif;
        --UI-font: 'Orbitron', sans-serif;
 
        /* Standard Colors */
        --white-monochrome: 217, 233, 251; /* white */
       --pale-gray-monochrome: 189, 0, 255; /* magenta? */
        --light-pale-gray-monochrome: 170, 207, 251; /* very light blue */
        --very-light-gray-monochrome: 26, 139, 235; /* mid-blue */
        --light-gray-monochrome: 26, 139, 235; /* mid-blue */
        --gray-monochrome: 21, 64, 191; /* darker blue */
        --dark-gray-monochrome: 6, 6, 75; /* very dark blue */
        --black-monochrome: 14, 12, 45; /* navy blue */
        --bright-accent: 1, 245, 252; /* neon blue */
        --less-bright-accent: 0, 221, 227; /* less neon blue */
        --pale-accent: var(--pale-gray-monochrome);
        --dark-accent: 93, 1, 252; /* purple*/
        --medium-accent: var(--dark-accent);
        --newpage-color: var(--less-bright-accent); /* neon blue */
        --neon-pink: 234, 0, 217;
 
        --toggle-roundness: 0%;
       --toggle-border-width: 2px;
 
        --swatch-text-general: var(--swatch-text-light);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        --tabs-selected-txt: var(--dark-gray-monochrome);
 
        --ui-wght: 700;
        --ui-hvr-wght: 900;
 
        --ui-button-hover-txt: var(--dark-gray-monochrome);
 
        /* ===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(--bright-accent);
        --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
 
        /* ===MENU BACKGROUND COLORS=== */
        --swatch-menubg-color: var(--black-monochrome);
 
        --swatch-border-color: var(--medium-accent);
 
        --rating-module-text-color: var(--bright-accent);
        --rating-module-button-color: var(--bright-accent);
 
        --swatch-background: var(--black-monochrome, 14, 12, 45);
 
        --rating-module-text-color: var(--dark-gray-monochrome);
        --rating-module-button-color: var(--dark-gray-monochrome);
 
        /* ===HEADER TITLE FONT SIZES=== */
        --header-h2-font-size: calc(var(--base-font-size) * 0.8);
 
        --scrollbar-width: 0.5rem;
    }
 
    #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(--neon-pink);
    }
 
    #license-area {
        --license-link-hover-color: var(--swatch-text-secondary-color);
    }
 
    ::-moz-selection {
        background: rgb(var(--less-bright-accent));
        color: rgb(var(--black-monochrome));
    }
 
    ::selection {
        background: rgb(var(--less-bright-accent));
        color: rgb(var(--black-monochrome));
    }
 
    html {
        background: white;
    }
 
    html,
    body {
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
    }
 
 #header::before{
    background-size: auto 7.5rem;
    opacity: 1.0;
}
 
#header h1 a::before {
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 1.0;
    pointer-events: none;
    content: "THE GRID";
    content: var(--header-title);
    color: rgb(1, 245, 252);
text-shadow: 2px 2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, -2px -2px 0 #000000, 2px 0px 0 #000000, 0px 2px 0 #000000, -2px 0px 0 #000000, 0px -2px 0 #000000;
}
  #header h1 a::after {
        color: rgb(var(--bright-accent));
        background:
            linear-gradient(to top,
                rgb(var(--bright-accent)) 0%,
                rgb(var(--bright-accent)) 30%,
                rgb(var(--light-gray-monochrome)) 50%,
                rgb(var(--neon-pink)) 80%,
                rgb(var(--neon-pink)) 90%);
        background-size: contain;
        overflow-wrap: normal;
        z-index: 1;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
 #extra-div-2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background: linear-gradient(0deg, rgba(25, 0, 215,1) 35%, rgba(56, 18, 144,1) 97%);
    pointer-events: none;
    opacity: 0.5;
}
div#extra-div-1 {
     z-index: 0;
}
    #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;
    }
.hovertip .content {
        color: rgb(var(--black-monochrome));
        background-color: rgb(var(--bright-accent));
}
 
#main-content .fancyhr hr {
    border-top: 2vw solid transparent;
    height: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border-image-source: url(https://wanderers-library.wdfiles.com/local--files/component%3Amotherboard-theme/fancyhr%20cyber%20final.png);
    border-image-repeat: round round;
    background: none;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
.fancyborder {
    box-sizing: border-box;
    padding: 2vw;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Amotherboard-theme/cyberfancy%20border%20final.png") 600 round;
    border-image-width: 6;
}
#login-status #account-options {
    display: block!important;
    z-index: 12;
    position: absolute;
    top: 1.5rem;
    right: 0;
    width: 10em;
    margin: 0.25em 0 0;
    padding: 0;
    overflow: hidden;
    background-image: var(--black-monochrome);
    background-color: rgb(var(--login-dropdown-bg-color));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s cubic-bezier(.4,0,.2,1);
}
#account-options {
    background: var(--black-monochrome);
}
#page-content table.wiki-content-table th {
    --wght: calc(var(--ui-wght) + 200);
    padding: 0.5em 1em;
    background: rgb(var(--bright-accent));
    color: rgb(var(--tables-header-txt));
    font-weight: var(--wght);
}
 .oldblock {
    margin: 1.25rem;
    padding: 0.75rem;
    border: solid 0.2rem rgb(var(--bright-accent));
    background: rgb(var(--light-pale-gray-monochrome));
    color: black;
}
.newblock {
    margin: 1.25rem;
    padding: 0.75rem;
    border: 0.25rem outset rgb(var(--medium-accent));
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-monochrome));
}
.wlnavbar .footer-wikiwalk-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90%;
    font-weight: 400;
    letter-spacing: 0.025em;
    color: rgba(var(--bright-accent));
}
.wlnavbar .left > a::before {
    content: "ᐊ";
    color: rgb(var(--white-monochrome));
    left: -1em;
    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;
}
.wlnavbar .right > a::before {
    content: "ᐅ";
    color: rgb(var(--white-monochrome));
    right: -1em;
    transition: right 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;
}
.hovertip .f-heading {
color: rgb(var(--black-monochrome));
}
.bibitems .title, .footnotes-footer .title {
    --wght: 700;
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: -0.75em;
    padding: 0 0.5em;
    background-color: rgb(var(--footnotes-footer-title-bg-color));
    color: rgb(var(--white-monochrome));
    font-weight: var(--wght);
    font-size: 1.25em;
}
    /* 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 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));
    }
#content-wrap {
    background-image:     
                linear-gradient(to bottom,
               rgb(70, 4, 191) 0rem,
                rgb(var(--black-monochrome)) 28rem);;
}
#content-wrap { position: relative; }
#content-wrap::before {
  content: "";
  position: absolute;
  height: 30%; width: 100%; top: 0; left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Amotherboard-theme/cyberdrop%20OG%202.png);
  opacity: 0.9;
}
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item a:visited,
    #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 {
        color: var(--dark-accent);
    }
 
    #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;
    }
 
    #main-content {
        z-index: 1;
        position: relative;
    }
 
    #main-content a:not([href*="javascript"]):not([href*="classification-"]),
    #main-content a:not([href*="javascript"]):not([href*="classification-"]):visited,
    #main-content div.collapsible-block a,
    #main-content div.collapsible-block a:visited {
        --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"]):not([href*="classification-"]):hover,
    #main-content div.collapsible-block a:hover {
       --wght: var(--ui-hvr-wght);
        background-color: rgb(var(--swatch-primary-darker));
        color: rgb(var(--white-monochrome));
        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"]):not([href*="classification-"]):active,
    #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"]):not([href*="classification-"]):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,
    #main-content a.footnoteref:visited {
        --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));
    }
 
#login-status span.printuser {
    --wght: var(--ui-wght);
    margin-right: 0.5em;
    color: rgb(var(--bright-accent));
    font-weight: var(--wght);
}
 
#login-status a#my-account, #login-status a[href*="account/messages"] {
    color: rgb(var(--bright-accent));
}
 
#login-status #account-options li>a, #login-status #account-options li>a:visited {
    color: rgb(var(--bright-accent));
}
 
    #page-title,
    .meta-title {
        color: rgb(var(--bright-accent));
        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;
    }
 
    #main-content 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: rgba(var(--bright-accent), 1);
        background-position: center center;
        -webkit-filter: blur(0.04rem);
                filter: blur(0.04rem);
    }
 
    .page-rate-widget-box {
        background: linear-gradient(to top left, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important;
    }
 
    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: 28.125rem) {
  #header::before{
    background-size: auto 4rem;
}
}
 
    @media only screen and (max-width: 56.25rem) {
 
        #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));
        }
    }
}
 
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
    box-shadow: inset 2em 0 0 0 rgb(var(--bright-accent));
}
 
:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a,
:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input,
:not(.page-rate-widget-box):not(#search-top-box-form) > input.button,
:not(.page-rate-widget-box):not(#search-top-box-form) > button,
:not(.page-rate-widget-box):not(#search-top-box-form) > .button,
:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input,
:not(.page-rate-widget-box):not(#search-top-box-form) > input.button,
:not(.page-rate-widget-box):not(#search-top-box-form) > button,
:not(.page-rate-widget-box):not(#search-top-box-form) > .btn {
    border-radius: 0.0rem;
}
.yui-navset .yui-nav li,
.yui-navset .yui-nav li a,
.yui-navset .yui-nav li a::before {
    border-radius: 0rem 0rem 0 0;
}
#main-content {
    --tabs-selected-txt: var(--dark-gray-monochrome);
 
    --ui-icon-color: var(--dark-gray-monochrome);
    --ui-icon-hover-color: var(--dark-gray-monochrome);
}
 
.yui-navset .yui-content {
    background-color: rgba(9, 41, 106, 1.0);
}
 
.blockquote, blockquote {
    background-color: rgba(9, 41, 106, 1.0);
}
@supports(display: grid)  {
 
.hovertip .footnote {
    background-color: rgb(var(--bright-accent));
}
}
 
@supports (display: grid) {
#side-bar div.menu-item {
    --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, ));
    border-bottom: 0.0625rem solid rgb(var(--pale-gray-monochrome));
    border-top: 0.0625rem solid rgb(var(--pale-gray-monochrome));
    margin-top: -0.0625rem;
    text-shadow: 0.063rem 0.063rem 0.063rem var(--text-shadow);
}
}
.collection .collapsible-block-folded .collapsible-block-unfolded-link {
    margin: auto;
    border: 0.125rem solid white;
    background-color: rgba(var(--bright-accent), 0.7);
}
.collection .collapsible-block-unfolded-link {
    margin: auto;
    border: 0.125rem solid white;
    background-color: rgba(var(--bright-accent), 0.5);
}

Footnotes

1. And here's a footnote!