@import url('https://fonts.googleapis.com/css?family=Carrois+Gothic&display=swap');

@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: "deus-ex-machina";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Deus Ex Machina Theme";
        /* set this to your theme's full name */

        /* ===HEADER ELEMENTS=== */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Adeus-ex-machina/pataphysics_logo_ani.svg");
        --header-title: "'Pataphysics Department";
        --header-subtitle: "Killing Our Gods";

        /* ===TYPEFACES=== */
        --header-font: 'Carrois Gothic', freight-sans-pro, sans-serif;

        /* ===STANDARD THEME COLORS=== */
        --light-pale-gray-monochrome: 232, 232, 232;
        --pale-accent: 170, 13, 175;
        --bright-accent: 88, 0, 189;
        --medium-accent: 75, 51, 102;
        --dark-accent: 50, 31, 71;

        /* ===TEXT COLORS=== */
        --swatch-text-light: var(--light-pale-gray-monochrome);
        --swatch-menutxt-light-color: var(--light-pale-gray-monochrome);

        /* ===HEADER GRADIENT=== */
        --header-gradient-color-bottom: 47, 29, 68;

        /* ===TOPBAR GRADIENT=== */
        --swatch-topmenu-bg-color: var(--swatch-menubg-black-color);

        /* ===LINK COLORS=== */
        --link-color: var(--swatch-primary);
        --visited-link-color: var(--pale-accent);
        --hover-link-color: var(--pale-accent);

        /* ===PRIMARY GRADIENTS=== */
        --diagonal-stripes: repeating-linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0),
            hsla(0, 0%, 100%, 0) 0.25vh,
            rgba(88, 88, 88, 0.1) 0.35vh,
            rgba(88, 88, 88, 0.2) 0.5vh
        );

        /* ===RATING MODULE=== */
        --rating-module-bg-color: var(--swatch-menubg-light-color);
    }

    :root:lang(cn) {
        /* ===HEADER ELEMENTS=== */
        --header-title: "超形上学部";
        --header-subtitle: "杀死我们的神";
    }

    body {
        background-color: rgba(var(--swatch-menubg-light-color), 1);
    }

    /* ===TOPBAR ELEMENTS=== */

    #header div[class*="top-bar"] > ul > li:hover,
    #header div[class*="top-bar"] > ul > li:active,
    #header div[class*="top-bar"] > ul > li:focus-within {
        background-color: rgba(var(--white-monochrome), 0.1);
    }

    /* ===SIDE-BAR ELEMENTS=== */

    #side-bar {
        --sidebar-bg-color: var(--swatch-menubg-light-color);
    }

    #side-bar .heading {
        margin-top: 0.5em;
    }

    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
        font-size: calc(var(--base-font-size) * (7/6));
    }

    /* ===MAIN CONTENT UI ELEMENTS=== */

    #main-content {
        /* ===TABS=== */
        --tabs-bg: var(--light-pale-gray-monochrome);

        /* ===FOOTNOTES/BIBLIOGRAPHY FOOTER=== */
        --footnotes-footer-bg-color: var(--light-pale-gray-monochrome);
    }

    /* ===Ayers' Info Bar=== */

    .info-container {
        --barColour: rgb(var(--dark-accent));
        --linkColour: rgb(var(--pale-gray-monochrome));
    }

    /* ===Pata Notice By Lt Flops=== */

    .pata-notice {
        --link-color: 255, 217, 0;
        --visited-link-color: 250, 150, 0;
        --hover-link-color: 250, 150, 0;

        margin: 1em 0;
        padding: 0 1em;
        color: rgb(var(--pale-gray-monochrome));
        background-color: rgb(var(--swatch-primary-darker));
        border: 0.0625rem solid rgb(var(--swatch-primary-darker));
        text-align: center;
    }

    .pata-notice ::-moz-selection,
    .pata-notice ::selection {
        background: rgba(var(--white-monochrome), 0.25);
    }

    /* ===MOBILE FORMATTING=== */

    @media only screen and (max-width: 25rem) {
        :root {
            --header-title: "'Pataphysics Dept.";
        }
    }
}

:root {
    --light-pale-gray-monochrome: 232, 232, 232;
    --bright-accent: 88, 0, 189;
    --medium-accent: 75, 51, 102;
    --dark-accent: 50, 31, 71;
    --swatch-menutxt-light-color: var(--light-pale-gray-monochrome);
}
.side-block .heading {
    margin-top: 0.5em;
}
.side-block .heading p {
    font-size: calc(var(--base-font-size) * (7/6));
}