@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://scpfoundation.net/local--files/theme:deus-ex-machina/pataphysics_logo_ani.svg");
     --header-title: "Отдел патафизики";
     --header-subtitle: "Убийство наших богов";

     /* ===TYPEFACES=== */
     --header-font: 'Roboto Slab', 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);
    }

    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,
    #interwiki {
     --sidebar-bg-color: var(--swatch-menubg-light-color);
    }

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

    #side-bar .heading p,
    #interwiki .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 {
     background: rgba(var(--white-monochrome), 0.25);
    }

    .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: "Отдел патафизики";
     }
    }
}