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

    --header-title: "SCP FOUNDATION";
    --header-subtitle: "SECURE - CONTAIN - PROTECT";
    --logo-image: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Fcomponent%3Apride-highlighter%2Fgp_logo.svg');
    --lgurl: var(--logo-image);

    --bright-accent: 245, 245, 245;
    --dark-accent: 36, 36, 36;
    --swatch-primary: var(--dark-accent);
    --light-gray-monochrome: 196, 196, 196;
    --dark-gray-monochrome: 200, 200, 200;
    --medium-accent: var(--dark-accent);
    --tab-border-color: var(--bright-accent);
    --hover-link-color: var(--dark-accent);
    --rating-module-button-color: var(--dark-accent);
    --rating-module-button-credit-color: var(--dark-accent);
    --swatch-background: var(--bright-accent);
    /* Background and Header Colors */
    --background-color: var(--bright-accent);
    /* Primary Text Colors */
    --swatch-text-light: var(--dark-accent);
    --swatch-text-general: var(--dark-accent);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--bright-accent);
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--dark-accent);
    /* Primary Header Colors */
    --gradient-header: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 1) 50%, rgba(245, 245, 245, 1) 100%);
    --swatch-topmenu-border-color: var(--dark-accent);
    --swatch-topmenu-bg-color: var(--dark-accent);
    --background-gradient-distance: 0rem;
    --modal-bg: var(--bright-accent);

    --rating-module-text-color: var(--dark-accent);
    --rating-module-button-cancel-color: var(--gray-monochrome);

    --diagonal-stripes: none;

    --toggle-button-bg: rgb(var(--bright-accent));
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--dark-accent));
}

:root:lang(cn) {
    --header-title: "SCP 基金会";
    --header-subtitle: "控制 - 收容 - 保护";
}

/* Header Stuff, changes the background logo, makes the top bar dark and spooky too! */

#header::before {
    background-image: var(--lgurl);
    opacity: 0.20;
}

#header div[class*=top-bar]>ul li:hover {
    background-color: rgba(var(--bright-accent));
}

#header div[class*=top-bar]>ul>li ul>li {
    box-shadow: inset 0 0 0 .0625rem rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

#header div[class*=top-bar]>ul>li>a {
    color: rgb(var(--bright-accent));
}

#header div#top-bar {
    background-color: inherit;
}

#header div[class*=top-bar]>ul>li>a:after,
#header div[class*=top-bar]>ul>li>a:before {
    background-color: rgba(var(--dark-accent));
}

#header div[class*=top-bar]>ul>li:hover>a {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#header h1 a::before {
    -webkit-text-stroke: 0.325rem rgb(var(--bright-accent));
}

#header h2 span::before {
    -webkit-text-stroke: 0.25rem rgb(var(--bright-accent));
}

#header h2 span::after {
    color: rgb(var(--dark-accent));
}

#header {
    --login-myaccount-hover-color: var(--bright-accent) --login-line-divider-color: var(--dark-accent);
    --login-username-color: var(--dark-accent);
    --login-myaccount-color: var(--dark-accent);
    --login-myaccount-underline-color: var(--bright-accent);
    --login-myaccount-hover-bg-color: var(--dark-accent);
    --login-arrow-color: var(--dark-accent);
    --login-dropdown-text-color: var(--dark-accent);
}

/* This is purely just for the Top Bar, especially the hover elements and whatnot */

#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a,
#top-bar div.top-bar>ul>li>ul>li:hover>a {
    text-decoration: none;
    color: rgb(var(--dark-accent));
}

#top-bar div.mobile-top-bar {
    background: rgb(var(--dark-accent));
}

#top-bar div.top-bar>ul>li:hover {
    background: rgb(var(--dark-accent));
}

#top-bar div.mobile-top-bar>ul>li.sfhover>ul,
#top-bar div.mobile-top-bar>ul>li:hover>ul,
#top-bar div.top-bar>ul>li.sfhover>ul,
#top-bar div.top-bar>ul>li:hover>ul {
    color: rgb(var(--bright-accent));
}

/* Everything below here is for the Sidebar, including the hover elements and the headings too */

#side-bar {
    --sideblock-heading-text-color: var(--bright-accent);
    --social-icon-hover-color: var(--bright-accent);
}

#side-bar .side-block {
    background-color: rgb(var(--bright-accent));
}

#side-bar .side-block.resources {
    background: rgb(var(--bright-accent)) !important;
}

#side-bar .side-block.media {
    background-color: rgba(var(--dark-accent)) !important;
}

#side-bar div.menu-item>a {
    color: rgb(var(--dark-accent));
    transition:
     color 300ms cubic-bezier(.4, 0, .2, 1),
     background-color 300ms cubic-bezier(.4, 0, .2, 1)
}

#side-bar div.menu-item>a:visited {
    color: rgb(var(--dark-accent));
}

#side-bar div.menu-item>a:hover,
#side-bar div.menu-item>a:active {
    color: rgb(var(--bright-accent));
}

#side-bar div.menu-item>a:focus-within {
    color: rgb(var(--bright-accent));
}

#side-bar div.menu-item a::before {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

.side-block.media a {
    background: transparent
}

#side-bar .collapsible-block .collapsible-block-folded,
#side-bar .heading,
#interwiki .heading {
    background: rgb(var(--dark-accent));
}

/* Throwing this quick fix for the search bar up here as well, just so everything fits */

#search-top-box-input {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#search-top-box-form input[type="submit"] {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#search-top-box-form input[type="submit"]:hover {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#search-top-box-input {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#search-top-box input.empty {
    color: rgb(var(--dark-accent));
}

#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    background-color: rgba(var(--dark-accent));
}

@media only screen and (max-width: 56.25rem) {
    #login-status:before {
     background-color: rgba(var(--dark-accent));
    }

}

@media only screen and (min-width: 769px) {
    #search-top-box-form>input {
     box-shadow: none;
    }
}

@media only screen and (min-width: 769px) {

    #search-top-box-form input[type="submit"],
    #search-top-box-form input[type="submit"]:focus,
    #search-top-box-form input[type="submit"]:hover {
     border-left: none;
     border-top: 0.0125rem solid rgb(var(--dark-accent));
     border-right: 0.0125rem solid rgb(var(--dark-accent));
     border-bottom: 0.0125rem solid rgb(var(--dark-accent));
     box-shadow: none;
    }
}

:not(.page-rate-widget-box):not(#search-top-box-form)>.btn,
:not(.page-rate-widget-box):not(#search-top-box-form)>.button,
:not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a,
: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 {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

/* Since we're also up here, here's the code to mess with the account options too (and one fix for the printusers) */

#login-status .printuser {
    background: transparent;
    color: rgb(var(--dark-accent));
}

#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--dark-accent));
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: transparent;
    color: inherit;
}

login-status span.printuser {
    color: rgb(var(--dark-accent));
}


/* Okay, now for the links and the body */

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

#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):not([href*="http://www.scp-wiki.net/classification-committee-memo"]):not([href*="/classification-committee-memo"]):not([href="http://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not(.danger-diamond a) {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--dark-accent));
    transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="http://www.scp-wiki.net/classification-committee-memo"]):not([href*="/classification-committee-memo"]):not([href="http://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not(.fa-info):not(.danger-diamond a):hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent));
    text-decoration: none;
    color: rgb(var(--bright-accent))
}

::-moz-selection {
    background: rgb(148, 148, 148);
}

::selection {
    background: rgb(148, 148, 148);
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
}

a.close-menu {
    background-color: transparent;
}

a:visited {
    color: inherit;
}

.scp-image-block a {
    box-shadow: none;
}

hr {
    border-top: none;
    background-color: rgb(var(--dark-accent));
}

:is(blockquote,.blockquote,div.blockquote,[class*=blockquote]) {
    background-color: rgb(var(--bright-accent));
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--dark-accent)),inset .0625rem 0 0 0 rgba(var(--dark-accent)),inset 0-.0625rem 0 0 rgba(var(--dark-accent));
}

/* Fancy Collapsibles */

#page-content .collapsible-block-link {
    text-decoration: none;
    font-weight: 700;
}

.collapsible-block-folded a,
.collapsible-block-unfolded-link a:not(.info-container):not(.info-container div.collapsible-block-unfolded-link):not(.info-container div.collapsible-block-folded-link):not(.info-container div.collapsible-block-unfolded):not(.info-container div.collapsible-block-folded):not(.info-container .collapsible-block-folded .collapsible-block-link):not(.info-container .collapsible-block-link) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}

.collapsible-block-folded a,
.collapsible-block-unfolded-link a:not(.info-container):not(.info-container div.collapsible-block-unfolded-link):not(.info-container div.collapsible-block-folded-link):not(.info-container div.collapsible-block-unfolded):not(.info-container div.collapsible-block-folded):not(.info-container .collapsible-block-folded .collapsible-block-link):not(.info-container .collapsible-block-link) {
    position: relative;
    top: 0;
    left: 0;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    height: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
     color 0.25s linear,
     background-color 0.25s linear;
}

.collapsible-block-folded a {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

#page-content .collapsible-block-unfolded-link a {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#page-content .collapsible-block-folded a:hover,
#page-content .collapsible-block-unfolded-link a:hover {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}

#page-content .collapsible-block-unfolded-link {
    box-shadow: none;
}

.info-container .collapsible-block-folded .collapsible-block-link,
.info-container .collapsible-block-link {
    padding: 0px;
}

/* Code for changing button colors */

div#page-options-bottom-2>a,
div#page-options-bottom>a {
    color: rgb(var(--dark-accent));
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}

.owindow .button-bar a,
a.button,
button,
div.buttons input,
file,
input.button {
    border: 0.125rem solid rgba(var(--dark-accent));
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}

.owindow .button-bar a:hover,
a.button:hover,
button:hover,
div.buttons input:hover,
file:hover,
input.button:hover {
    border: .125rem solid rgba(var(--bright-accent));
    background-color: rgba(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

div#page-options-bottom-2>a:hover,
div#page-options-bottom>a:hover {
    color: rgb(var(--bright-accent));
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
}

/* All Rating Module Code is below this line! */

.modalbox {
    box-shadow: none !important;
    border-color: transparent !important;
    border-radius: 0px !important;
    padding: 4px;
    pointer-events: auto !important;
}

.creditButton p a {
    background-color: rgb(var(--black-accent));
}

#page-content .rate-box-with-credit-button {
    display: inline-flex;
    margin-bottom: .75rem;
    border: .0625rem solid rgba(12, 12, 12, .25);
    border: .0625rem solid rgba(var(--gray-monochrome));
    border-radius: 0;
    background: rgb(var(--bright-accent));
    background-color: #fcfcfc;
    background-color: rgb(var(--bright-accent));
    padding: 0 .125rem;
    height: var(--rating-module-height);
    overflow: hidden;
}

.page-rate-widget-box {
    background: rgb(var(--bright-accent));
    border: 0.0625rem solid rgba(var(--dark-accent));
}

div.page-rate-widget-box .rate-points {
    border: none;
}

#page-content div.rate-box-with-credit-button, div.page-rate-widget-box {
    border: .0625rem solid rgba(var(--dark-accent));
}

/* Tabs */

.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    box-shadow: none;
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    box-shadow: none;
    border-color: rgb(var(--bright-accent));
}

.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--bright-accent));
}


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

.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    color: rgb(var(--dark-accent));
    background: rgb(var(--bright-accent));
    border: 1px solid rgb(var(--dark-accent));
}

.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background: rgb(var(--bright-accent));
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

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

/* Simple Tables */

table.wiki-content-table td {
    border: 1px solid #888;
    padding: 0.3em 0.7em;
    color: rgb(var(--dark-accent));
}

table.wiki-content-table th {
    background: rgb(var(--dark-accent));
    border: 1px solid rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

table.wiki-content-table tr {
    border: 1px solid #e3e3e3;
    color: #e3e3e3;
}

/* Image Blocks */

.scp-image-block {
    box-shadow: none;
}

.scp-image-block a {
    background-color: transparent;
}

:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption) {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

/* Footer and Hovertips */

.footnote {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
    border: 1px solid #242424;
    padding: .625em;
}

.footnotes-footer {
    background-color: rgba(var(--bright-accent));
    color: rgb(var(--dark-accent));
    border-top: 1px solid #242424;
    border-bottom: 1px solid #242424;
    border-right: 1px solid #242424;
}

.footnotes-footer a[href*=javascript]:before {
    color: rgb(var(--dark-accent));
    background-color: transparent;
}

.hovertip {
    background-color: rgb(var(--bright-accent));
    border: .0625rem solid rgb(var(--dark-gray-monochrome));
    color: rgb(var(--dark-accent));
}

.hovertip .content {
    background-color: rgb(var(--bright-accent));
}

#footer {
    background: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}

/* Michellaneous */


textarea,
#lock-info {
    color: rgb(var(--dark-accent));
}

.owindow .modal-body img {
    background-color: transparent !important;
}


.scpnet-interwiki-wrapper {
    margin-top: 1em;
}

.licensebox .collapsible-block-link {
    background: none;
}

.printuser img.small {
    vertical-align: -0.2em;
    height: 14px;
}

#who-rated-page-area .printuser a {
    font-size: 100%;
}

#license-area {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}


.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: transparent;
    color: inherit;
}

.printuser:hover {
    background-color: transparent;
}

.page-tags a {
    background-color: transparent;
    color: rgb(var(--dark-accent));
}

.page-tags a:hover {
    color: rgb(var(--bright-accent));
}

form#edit-page-form {
    background-color: rgba(var(--dark-accent));
    color: rgb(var(--bright-accent));

}

input#edit-page-title {
    color: rgb(var(--dark-accent));
}

form#edit-page-form .edit-help-34>a {
    color: rgb(var(--dark-accent));
}

.danger-diamond a,
.danger-diamond a:hover {
    color: rgba(0, 0, 0, 0);
    box-shadow: initial;
}

.acs-hybrid-text-bar>a {
    background-color: transparent;
    color: transparent;
}

@media only screen and (min-width: 769px) {

    #search-top-box-form>input,
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
     background: rgb(var(--light-accent));
    }
}

@media (min-width: 0px) {
    #page-content .rate-box-with-credit-button>.creditButton>p>a:before {
     left: 4px;
    }
}


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

    #header h2,
    #header h2 a,
    #header h2 a::before {
     top: 0.45rem;
    }
}

#u-author_block>p>a {
    color: var(--linkColour) !important;
}