/*
    The Way Out Theme
    [2019 Wikidot Theme]
    Created by Rounderhouse, with massive help from Woedenaz.
    Based on Black Highlighter Theme created by Woedenaz and Croquembouche.
    The O5 Command logo was created by djkaktus. Licensed under CC BY SA 3.0.
*/
/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800');

/* All Vars Used */

:root {
    /* S-CSS-P Integration */
    /* 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: "nuscp";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "nu-SCP Theme";
    /* set this to your theme's full name */

    /* Header */
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Athe-way-out/wtf.svg");
    --header-title: "OVERWATCH COMMAND";
    --header-subtitle: "SITE-01 INTERNAL DATABASE";

    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: 'Poppins', sans-serif;
    --title-font: 'Poppins', sans-serif;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;

    /* ========================== Stylistic Sets        |    Any:     0 OR 1     */
    --ss01: 0;
    --ss02: 0;
    --ss03: 0;

    /* Standard Colors */
    --white-monochrome: 252, 252, 252;
    /* 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: 66, 66, 72;
    /* gray */
    --dark-gray-monochrome: 48, 48, 52;
    /* dark accent gray for sidebar background */
    --black-monochrome: 12, 12, 12;
    /* black */
    --bright-accent: 14, 65, 102;
    /* blue */
    --medium-accent: 60, 100, 120;
    /* medium blue */
    --dark-accent: 12, 36, 54;
    /* dark blue */
    --newpage-color: 99, 190, 255;
    /* bright blue */

    /* Primary Theme Colors */
    --swatch-background: var(--white-monochrome);
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--bright-accent);
    /* Primary Text Colors */
    --swatch-text-dark: var(--black-monochrome);
    --swatch-text-light: var(--white-monochrome);
    --swatch-important-text: var(--bright-accent);

    /* Primary Menu Colors */
    --swatch-menubg-color: var(--gray-monochrome);
    /* Primary Header Colors */
    --swatch-topmenu-border-color: var(--dark-gray-monochrome);
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);

    --rating-module-button-color: var(--black-monochrome);
    --rating-module-text-color: var(--black-monochrome);

    /* Link Colors */
    --link-color: 27, 65, 94 ;
    --visited-link-color: 133, 193, 233;
    --hover-link-color: 133, 193, 233;

    /* Header Gradients */

    --gradient-header: linear-gradient(to bottom,
        rgba(var(--black-monochrome),0.97) 10%,
        rgb(var(--black-monochrome)) 65%,
        rgb(var(--dark-gray-monochrome)) 100%);
    --gradient-topmenu: linear-gradient(to bottom,
        white 0%,
        white 7.5rem,
        rgba(var(--swatch-topmenu-border-color), 1) 7.5rem,
        rgba(var(--swatch-topmenu-bg-color), 1) 7.625rem,
        rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem),
        rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem),
        rgba(var(--swatch-topmenu-border-color), 1) 100%);
    --gradient-topmenu-mobile: linear-gradient(to bottom,
        rgba(var(--swatch-topmenu-border-color), 1) 0,
        rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
        rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
        rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
        rgba(var(--swatch-topmenu-border-color), 1) 3rem);
    --diagonal-stripes: repeating-linear-gradient(25deg,
        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);
    --gradient-sidemenu-header: linear-gradient(10deg,
        rgba(var(--medium-accent), 0.45) 0%,
        rgba(var(--medium-accent), 0.55) 100%);
    --gradient-background: linear-gradient(to bottom,
        rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.987) calc(calc(0.8 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.951) calc(calc(2.9 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.896) calc(calc(6.4 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.825) calc(calc(11 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.741) calc(calc(16.6 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.648) calc(calc(23.1 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.55) calc(calc(30.4 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.45) calc(calc(38.3 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.352) calc(calc(46.7 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.259) calc(calc(55.4 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.175) calc(calc(64.4 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.104) calc(calc(73.5 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.049) calc(calc(82.5 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0.013) calc(calc(91.4 / 100) * var(--background-gradient-distance)),
        rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance)));
    --header-background-image-size: 100% 7.5rem;

    /* Spacing Measurements */
    --offset-from-page-top: 1.2rem;
    /* space between the top of the page and the start of the header */
    --body-width-on-desktop: 44.25rem;
    --sidebar-width-on-desktop: calc(var(--base-font-size)*19);
    --sidebar-width-on-mobile: 14rem;
    --scrollbar-width: 0.5625rem;
    --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
    --border-radius-width: 0.0625rem;

    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.125rem;

    --background-gradient-color: 12, 36, 54;
    --background-gradient-distance: 40rem;
}

:root:lang(cn) {
    /* Header */
    --header-title: "監督者指揮部";
    --header-subtitle: "SITE-01 內部資料庫";

    /* Typefaces */
    --body-font: 'Lato', "Noto Sans SC", sans-serif;
    --header-font: 'Poppins', "Noto Sans SC", sans-serif;
    --title-font: 'Poppins', "Noto Sans SC", sans-serif;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, '仿宋', monospace;
}

#header {
    filter: drop-shadow(.042rem .042rem .042rem rgb(150,150,150));
}

@media only screen and (max-width: 56.25rem) {
    #header {
        background-position: calc(7.4rem - var(--size)) calc(((var(--size) * -1) + 7.5rem + var(--y-offset)) / 2);
    }
}

:root {
    --body-font: 'Lato', "Noto Sans SC", sans-serif;
    --title-font: 'Poppins', "Noto Sans SC", sans-serif;
    --ss01: 0;
    --ss03: 0;
    --bright-accent: 14, 65, 102;
    --medium-accent: 60, 100, 120;
    --dark-accent: 12, 36, 54;
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--bright-accent);
}