/* Wanderer's Station Theme */
/* 2019 Wikidot Theme */
/* By Rounderhouse, based off Dustjacket by Woedenaz and Croquembouche */
/* Logo by Rounderhouse, using art from SunnyClockwork, licensed under CC BY SA 3.0 */
/* Header background by NASA, public domain. */

/* Fonts */

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

@font-face {
  font-family: "Blogger Sans Medium";
  src: url("https://files.scpfoundation.net/local--files/theme:wanderers-station/Blogger_Sans-Medium.otf") format('opentype');
}

@font-face {
  font-family: "Xolonium Bold";
  src: url("https://files.scpfoundation.net/local--files/theme:wanderers-station/Xolonium-Bold.otf") format('opentype');
}

/* 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: "WandererStation";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Wanderer's Station";
    /* set this to your theme's full name */

    /* Header */
    --logo-image: url("https://files.scpfoundation.net/local--files/theme:wanderers-station/spacelogo.png");
    --header-title: "СТАНЦИЯ СТРАННИКА";
    --header-subtitle: "Добро пожаловать домой, Wanderer01.";

    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: "Xolonium Bold", 'Audiowide', cursive;
    --title-font: "Blogger Sans Medium", 'Gugi', cursive;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;

    /* 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: 255, 219, 90;
    /* bright yellow */
    --medium-accent: 36, 38, 114;
    /* blue */
    --dark-accent: 220, 185, 53;
    /* dark yellow */
    --newpage-color: 221, 102, 17;
    /* pale orange */
    --mid-black: 39, 39, 39;
    /* pale black */

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

    /* Primary Menu Colors */
    --swatch-menubg-color: var(--gray-monochrome);
    --swatch-menubg-light-color: var(--gray-monochrome);
    --swatch-menubg-medium-color: var(--gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--black-monochrome);
    --swatch-menubg-dark-color: var(--medium-accent);
    --swatch-menubg-black-color: var(--black-monochrome);
    --swatch-menubg-hover-color: var(--gray-monochrome);
    --swatch-menutxt-dark-color: var(--bright-accent);
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-border-color: var(--bright-accent);
    /* Primary Header Colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--medium-accent);

    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--bright-accent);

    /* space between the top of the page and the start of the header */
    --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));

    /* Box-Shadow 1px Borders */
    --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));

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

    --background-gradient-color: 36, 38, 114;
    --background-gradient-distance: 10rem;

}

div#extra-div-1 {
    background-image: url(https://files.scpfoundation.net/local--files/theme:wanderers-station/space.png);
    background-size: contain;
    background-repeat: repeat-x;
}

.page-rate-widget-box {
    border-radius: 0px 15px 0px 15px !important;
}

#top-bar div.top-bar>ul>li>ul {
    background: rgba(var(--medium-accent), 1);
}

#login-status,
#my-account {
    color: rgb(var(--bright-accent)) !important;
}

#login-status>a>strong {
    color: rgb(var(--bright-accent)) !important;
}

#toc {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
}

a {
    color: rgb(var(--dark-accent));
}

#top-bar div.top-bar div.newpage_dropdown div.new-page-box input {
    background-color: rgba(var(--bright-accent));
    color: rgba(var(--medium-accent));
}

#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button:hover {
    color: rgba(var(--bright-accent));
    border: solid 2px rgba(var(--bright-accent));
}

#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a,
#top-bar div.top-bar>ul>li>ul>li:hover>a {
    color: rgba(var(--medium-accent));
}

.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em {
    color: rgba(var(--bright-accent));
}

.yui-navset-bottom .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset .yui-nav li a {
    background-color: rgba(var(--medium-accent));
}

.yui-navset .yui-nav li a em:hover,
.yui-navset-top .yui-nav li a em:hover,
.yui-navset-bottom .yui-nav li a em:hover {
    color: rgba(var(--medium-accent));
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    color: rgba(var(--medium-accent));
}

#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"],
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover {
    background-color: rgb(var(--medium-accent));
}

#search-top-box:not(:focus-within)::before {
    color: rgb(var(--bright-accent));
}

#page-title {
    grid-area: page-title;
    border-color: rgb(var(--bright-accent, 66, 66, 72));
    color: rgb(var(--bright-accent, 12, 12, 12));
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgba(var(--bright-accent));
}

#lock-info {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
}

div#page-options-bottom>a,
div#page-options-bottom-2>a {
    background-color: rgba(178, 210, 180, 0.25);
    background-color: rgba(var(--swatch-menubg-light-color), 0.25);
    border: 0.0625rem solid rgba(255, 219, 90, 1);
    border: 0.0625rem solid rgba(var(--swatch-primary), 1);
    color: rgba(var(--medium-accent));
}

div#page-options-bottom>a:hover,
div#page-options-bottom>a:active,
div#page-options-bottom-2>a:hover,
div#page-options-bottom-2>a:active {
    background-color: rgba(30, 55, 30, 1);
    background-color: rgba(var(--swatch-menubg-dark-color), 1);
    color: rgba(255, 219, 90, 1);
    color: rgba(var(--medium-accent), 1);
}

html body#html-body div#skrollr-body div#container-wrap-wrap div#container-wrap div#container div#content-wrap div#main-content div#action-area div form#edit-page-form div.buttons.alignleft>input {
    background: rgb(var(--medium-accent));
}

.wl-translations {
    border: 1px solid rgba(var(--bright-accent), 1);
    border-radius: 2px;
}

.wl-translations a {
    color: rgba(var(--bright-accent), 1);
}

.collection>.collapsible-block {
    background-color: rgb(var(--mid-black));
    border: 1px solid rgb(var(--dark-accent));
}

.collection .collapsible-block-unfolded-link {
    background-color: rgba(var(--medium-accent), 0.75);
    border: 2px solid rgb(var(--mid-black));
}

.collection .collapsible-block-folded {
    background-color: rgba(var(--medium-accent), 0.75);
    border: 2px solid rgb(var(--mid-black));
}

.authorname {
    color: rgb(var(--white-monochrome));
    background-color: rgba(var(--medium-accent), 0.75);
    border: 2px solid rgb(var(--mid-black));
}

.titlecolumn {
    border: 2px solid rgb(var(--mid-black));
    background-color: rgba(var(--medium-accent), 0.75);
}

.articlecolumn {
    background-color: rgb(var(--mid-black));
}

.blockquote,
blockquote {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
    border: .063em solid rgba(var(--bright-accent), .25)
}

table.wiki-content-table th {
    background-color: rgb(var(--medium-accent));
}

table.wiki-content-table th,
table.wiki-content-table tr {
    border: .075rem solid rgba(var(--bright-accent), .50) !important;
}

/* terminal by ayers */

div.terminal {
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #00183C;
    /* black shadow at the top of the terminal */
    background-image:
        -o-radial-gradient(50% 90%, ellipse 1000% 100%, transparent, #00183C);
    background-image:
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #00183C);
    background-position: center;
    display: block;
    /* shadow around the terminal */
    -webkit-box-shadow: inset 0 0 10em 1em rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 10em 1em rgba(0, 0, 0, 0.5);
    /* prevents scanline from forming a scrollwheel */
    overflow: hidden;
}

div.terminal blockquote {
    color: rgba(22, 115, 255, 0.8) !important;
    background-color: black;
    border: double 3px #1E78FF
}

div.scanline {
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite;
    /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite;
    /* Same as above */
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(56, 112, 82, 0)), to(rgba(56, 112, 82, 0.1))) !important;
    background: -o-linear-gradient(top, rgba(56, 112, 82, 0), rgba(56, 112, 82, 0.1)) !important;
    background: linear-gradient(to bottom, rgba(56, 112, 82, 0), rgba(56, 112, 82, 0.1)) !important;
}

div.text {
    color: rgba(22, 115, 255, 0.8);
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan {
    from {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    to {
        -webkit-transform: translateY(5000%);
        transform: translateY(5000%);
    }

    /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan {
    from {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    to {
        -webkit-transform: translateY(5000%);
        transform: translateY(5000%);
    }

    /* Same as above.*/
}

div.text a {
    color: #00B6AC;
    text-decoration: none;
    background: transparent;
}

div.text a.newpage {
    color: #03fff1;
}

div.text a:hover {
    color: #00d0c4;
    text-decoration: underline;
    background-color: #272727;
    padding: 1px;
}

div.text a:hover::before {
    content: "> ";
}

/* mobile */

@media only screen and (max-width: 768px) {

    div#extra-div-1 {
        background-size: cover;
    }

    div#extrac-div-1 {
        background-image: url(https://files.scpfoundation.net/local--files/theme:wanderers-station/space.png);
        background-size: var(--header-height-on-mobile);
        background-repeat: no-repeat;
        z-index: 3;
    }

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

    #main-content {
        margin-left: inherit;
    }

    div#page-options-bottom {
        width: 90%;
    }
}