/*
Greystyle
[2023 Wikidot Theme]
Created by Greyve

Forked from:
* Penumbra BHL by Woedenaz

Inspiration from:
* ADMONITION Theme by Liryn and Placeholder McD
* Basalt Theme by Liryn and Placeholder McD
* Black Highlighter Theme by Croquembouche and Woedenaz
* BLANKSTYLE CSS by HarryBlank and Placeholder McD
* Flopstyle: DARK by Lt Flops
* Paperstack Theme by EstrellaYoshte
* Penumbra by EstrellaYosthe
* Penumbra BHL by Woedenaz
* PLACESTYLE CSS by Placeholder McD
* Redtape Theme by Rounderhouse
* SYNTECH Theme by Greyve
* Twin Files Theme by JackalRelated

Components from:
* Centered BHL Header  by Woedenaz
* Toggle BHL Sidebar by Woedenaz
* BetterFootnotes by EstrellaYoshte
* ACS Animation by EstrellaYoshte
*/

/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root:lang(cn) {
/* INTEGRATION */
    --theme-base: "black-highlighter";
    --theme-id: "greystyle";
    --theme-name: "Greystyle";

/* FONTS */
    --body-font: "Oxygen", "Noto Sans SC", sans-serif;
    --header-font: 'Josefin Sans', 'Noto Sans SC', sans-serif;
    --title-font: 'Josefin Sans', 'Noto Sans SC', sans-serif;
    --mono-font: "Fira Code", "Andale Mono", "Courier New", monospace;
    --ui-font: "Noto Sans SC", "Oxygen", sans-serif;

/* COLORS */
    /* Primary Colors */
    --white-monochrome: 252, 252, 252;
    --light-gray-monochrome: 238, 238, 238;
    --gray-monochrome: 56, 49, 49;

    --pale-gray-monochrome: 196, 196, 196;
    --dark-gray-monochrome: 28, 28, 28;
    --black-monochrome: 14, 14, 14;

    --accent-color: 140, 0, 0;

    --pale-accent: var(--accent-color);
    --bright-accent: var(--accent-color);
    --medium-accent: var(--accent-color);
    --dark-accent: var(--accent-color);
    --alt-accent: var(--accent-color);

    /* Custom Variable Colors */
    --bg-color1: var(--white-monochrome);
    --bg-color2: var(--light-gray-monochrome);
    --bg-color3: var(--accent-color);
    --bg-color4: var(--gray-monochrome);

    --txt-color1: var(--gray-monochrome);
    --txt-color2: var(--white-monochrome);
    --txt-color3: var(--accent-color);
    --txt-color4: var(--light-gray-monochrome);

    /* Secondary and Tertiary Colors */
    --swatch-primary: var(--accent-color);
    --swatch-primary-darker: var(--accent-color);
    --swatch-primary-darkest: var(--accent-color);
    --swatch-border-color: var(--dark-gray-monochrome);
    --swatch-secondary-color: var(--accent-color);
    --swatch-tertiary-color: var(--accent-color);
    --swatch-alternate-color: var(--alt-accent);

    /* Background Color */
    --background-color: var(--bg-color1);
    --background-gradient-color: var(--bg-color1);

    /* Text Colors */
    --swatch-text-general: var(--txt-color1);
    --swatch-text-light: var(--txt-color2);
    --swatch-text-dark: var(--txt-color1);
    --swatch-important-text: var(--txt-color3);

    --link-color: var(--txt-color3);
    --hover-link-color: var(--txt-color3);

    /* Menu Colors */
    --swatch-menutxt-general-color: var(--txt-color1);
    --swatch-menutxt-dark-color: var(--txt-color1);
    --swatch-menutxt-light-color: var(--txt-color2);

    --swatch-menubg-color: var(--bg-color1);
    --swatch-menubg-light-color: var(--bg-color3);
    --swatch-menubg-medium-color: var(--bg-color3);
    --swatch-menubg-medium-dark-color: var(--bg-color3);
    --swatch-menubg-dark-color: var(--bg-color3);
    --swatch-menubg-black-color:var(--bg-color4);
    --swatch-menubg-hover-color:var(--bg-color2);

    --swatch-background: var(--bg-color1);
    --swatch-headerh1-color: var(--bg-color3);
    --swatch-headerh2-color: var(--bg-color3);

    /* ACS Colors */
    --one-color: 76, 160, 108;
    --two-color: 67, 135, 190;
    --three-color: 245, 211, 1;
    --four-color: 233, 107, 40;
    --five-color: 197, 38, 50;
    --six-color: 98, 60, 122;

/* COMPONENTS */
    /* UI */
    --ui-button-txt: var(--txt-color1);
    --ui-button-bg: var(--bg-color2);
    --ui-button-hover-txt: var(--txt-color2);
    --ui-button-hover-bg: var(--bg-color3);
    --ui-button-hover-outline: transparent;

    /* Header */
    --logo-image: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --header-title: "SCP基金会";
    --header-subtitle: "控制，收容，保护";
    --header-h1-font-size: calc(2rem + (.025 * (100vw - 20rem)));
    --header-h2-font-size: calc(var(--base-font-size) * 1.25);

    --down-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26' overflow='visible' xml:space='preserve'%3E%3Cpath d='m15,26 15-26H0'/%3E%3C/svg%3E");
    --right-arrow-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' overflow='visible' xml:space='preserve'%3E%3Cpath d='m26,15 -26,15 V0'/%3E%3C/svg%3E");

    --header-gradient-color-bottom: var(--bg-color1);
    --header-gradient-color-middle: var(--bg-color1);
    --header-gradient-color-top: var(--bg-color1);
    --diagonal-stripes: unset;

    --swatch-topmenu-border-color: var(--bg-color1);
    --swatch-topmenu-bg-color: var(--bg-color1);

    /* Toggle Sidebar */
    --sidebar-transition-timing: .7s ease-in-out .1s;
    --toggle-button-bg: rgb(var(--bg-color3));
    --toggle-border-color: transparent;
    --toggle-icon-color: rgb(var(--txt-color2));
    --toggle-roundness: 0;

    /* Rating Module */
    --rating-module-button-color: var(--bg-color2);
    --rating-module-button-cancel-color: var(--bg-color4);
    --rating-module-button-credit-color: var(--bg-color4);
    --rating-module-text-color: var(--txt-color1);
    --rating-module-text-hover-color: var(--txt-color2);

    /* Footnote Hoverbox */
    --hoverblock-bg: var(--bg-color2);
    --hoverblock-txt: var(--txt-color1);
    --hoverblock-header-bg: var(--bg-color3));
    --hoverblock-header-txt: var(--txt-color2);
    --hoverblock-footer-bg: var(--bg-color2);
    --hoverblock-footer-txt: var(--txt-color1);

    /* Modal */
    --modal-bg: var(--bg-color1);
    --modal-body-text: var(--txt-color1);
    --modal-body-header-txt: var(--txt-color1);
    --modal-header-txt: var(--txt-color2);
    --modal-header-bg: var(--bg-color3);
    --modal-header-stripe: var(--bg-color3);

    /* BetterFootnotes */
    --fnColor: rgb(var(--txt-color3));
    --posX: calc(50% + var(--body-width-on-desktop) / 2 + 2.5rem);
}

/* HEADER*/
#header {
    --swatch-headerh1-color: var(--txt-color1);
    --swatch-headerh2-color: var(--txt-color1);

    --search-icon-color: var(--txt-color1);
    --search-icon-hover-color: var(--txt-color2);
    --search-icon-hover-bg-color: var(--bg-color3);

    --search-icon-focus-color: var(--txt-color2);
    --search-icon-focus-bg-color: var(--bg-color3);
    --search-focus-outline-color: transparent;
    --search-focus-textbox-bg-color: var(--bg-color2);
    --search-focus-textbox-text-color: var(--txt-color1);

    --login-username-color: var(--txt-color1);
    --login-line-divider-color: var(--txt-color1);
    --login-myaccount-color: var(--txt-color1);
    --login-myaccount-hover-color: var(--txt-color2);
    --login-myaccount-underline-color: var(--bg-color3);
    --login-myaccount-hover-bg-color: var(--bg-color3);

    --login-dropdown-text-color: var(--txt-color1);
    --login-dropdown-bg-color: var(--bg-color2);
    --login-dropdown-bg-image: var(--bg-color2);
    --login-dropdown-border-color: transparent;
    --login-dropdown-text-hover-color: var(--txt-color2);
    --login-dropdown-bg-hover-color: var(--bg-color3);
}

/* Logo Changes */
/* Use https://codepen.io/sosuke/pen/Pjoqqp to filter the image color from black. */
:root:lang(cn) {
    --logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(25%);
}

#header::before {
    filter: var(--logo-filter);
}

/* Outline Correction */
#header h1 a::before {
    content: "";
}

#header h2 span::before {
    content: "";
}

/* Position Correction */
#header h1,
#header h1 a,
#header h1 a::before {
    top: -.25rem;
}

/* Login Arrow */
#login-status #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton:hover::before {
    --clip-path: polygon(30% 30%, 70% 30%, 50% 65%);
}

#login-status #account-options li>a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

#login-status #account-options li>a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Mobile Corrections */
@media only screen and (max-width:56.25rem) {
    :root:lang(cn) {
        --body-width-on-desktop: 100vw;
        --header-h1-font-size: calc(2rem + (.02 * (100vw - 20rem)));
        --header-h2-font-size: calc(var(--base-font-size) * 1.25);
    }
}

/* SELECTION */
::-moz-selection {
    background: rgba(var(--bg-color3), 1);
    color: rgb(var(--txt-color2));
    text-shadow: none;
    }

::selection {
    background: rgba(var(--bg-color3), 1);
    color: rgb(var(--txt-color2));
    text-shadow: none;
    }

/* TOPBAR */
#top-bar {
    --topmenu-category-color: var(--txt-color1);
    --topmenu-category-hover-color: var(--txt-color2);
    --topmenu-category-hover-bg: var(--bg-color3);
    --topmenu-hover-border-color: transparent;

    --mobile-topmenu-sidebar-button-color: var(--bg-color3);

    --dropdown-bg-color: var(--bg-color2);
    --dropdown-border-color: transparent;
    --dropdown-links-color: var(--txt-color1);
    --dropdown-links-hover-color: var(--txt-color2);
    --dropdown-links-hover-bg-color: var(--bg-color3);

    --topbar-height-on-desktop: 2rem;
    --topbar-height-on-mobile: 2rem;
}

#header div[class*=top-bar]>ul>li>ul li>a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

#header div[class*=top-bar]>ul>li>ul li>a:active:before,
#header div[class*=top-bar]>ul>li>ul li>a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* SIDEBAR */
#side-bar {
    --sidebar-bg-color: var(--bg-color1);
    --sidebar-resources-bg-color: var(--bg-color2);
    --sidebar-media-bg-color: var(--bg-color2);

    --sideblock-heading-border-color: transparent;

    --sidebar-border-color: var(--bg-color1);

    --sidebar-links-text: var(--txt-color1);
    --sidebar-links-hover-bg-color: var(--bg-color3);
    --sidebar-links-hover-text-color: var(--txt-color2);
}

#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
    text-transform: none;
    text-align: left;
    font-size: .95rem;
    text-indent: 0;
}

/* Background Changes */
@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #main-content::before {
            background: rgba(var(--bg-color2), .5) 1px 1px repeat;
            backdrop-filter: blur(.1rem);
            }
        }
    }

/* BREADCRUMBS */
#breadcrumbs a:before,
#breadcrumbs a:visited:before,
.pseudocrumbs a:before,
.pseudocrumbs a:visited:before {
    padding: 0;
    transform: skew(0deg);
    color: rgb(var(--txt-color3));
    box-shadow: inset 0 -.125rem 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1), color 300ms cubic-bezier(.4, 0, .2, 1), padding 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
}

#breadcrumbs a:active:before,
#breadcrumbs a:hover:before,
.pseudocrumbs a:active:before,
.pseudocrumbs a:hover:before {
    padding: 0;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}

/* SCROLLBAR*/
html,
body {
    scrollbar-color: rgb(var(--bg-color3)) rgb(var(--bg-color2));
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 16px;
    background: transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgb(var(--bg-color2));
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--bg-color3));
}

/* TITLE */
#page-title::before,
.meta-title::before {
        content: none;
    }

#page-title::after,
.meta-title::after{
height: .125rem;
}

/* CONTENT*/
#main-content {
    /* UI */
    --ui-icon-color: var(--txt-color1);
    --ui-icon-bg: var(--bg-color2);
    --ui-icon-hover-color: var(--txt-color2);
    --ui-icon-hover-bg: var(--bg-color3);

    /* Table of Contents */
    --toc-header-bg-color: var(--bg-color3);
    --toc-header-text-color: var(--txt-color2);
    --toc-header-text-hover-color: var(--txt-color2);
    --toc-body-bg-color: var(--bg-color2);
    --toc-directory-lines-color: var(--bg-color2);
    --toc-body-link-color: var(--txt-color1);
    --toc-body-link-hover-color: var(--txt-color3);
    --toc-body-hover-arrow-color: var(--txt-color3);

    /* Tabs */
    --tabs-bg: var(--bg-color2);
    --tabs-txt: var(--txt-color1);
    --tabs-hover-bg: var(--bg-color3);
    --tabs-hover-txt: var(--txt-color2);
    --tabs-selected-bg: var(--bg-color3);
    --tabs-selected-txt: var(--txt-color2);
    --tabs-selected-outline: var(--bg-color3);
    --tabs-bottom-border-color: var(--bg-color3);
    --tabs-content-bg-color: var(--bg-color2);
    --tabs-content-border-color: var(--bg-color2);

    /* Footnote Block */
    --footnotes-footer-bg-color: var(--bg-color2);
    --footnotes-footer-colorbar-color: var(--bg-color3);
    --footnotes-footer-title-bg-color: var(--bg-color3);
    --footnotes-footer-title-text-color: var(--txt-color2);
    --footnotes-footer-num-color: var(--txt-color3);
    --footnotes-footer-num-hover-color: var(--txt-color3);

    /* Editor*/
    --editor-icon-color: var(--txt-color1);
    --editor-icon-bg: var(--bg-color1);
    --editor-icon-hover-color: var(--txt-color2);
    --editor-icon-hover-bg: var(--bg-color3);
    --editor-icon-submenu-bg: var(--bg-color3);

    /* Tags */
    --pagetags-title-bg: var(--bg-color3);
    --pagetags-title-text: var(--txt-color2);
    --pagetags-text-color: var(--txt-color1);
    --pagetags-text-hover-color: var(--txt-color2);
    --pagetags-text-hover-bg-color: var(--bg-color3);
}

/* RATING MODULE */
#page-content .rate-box-with-credit-button, .page-rate-widget-box {
    background-color: rgb(var(--bg-color2));
    border: none;
}

/* Credit */
#page-content .rate-box-with-credit-button>.creditButton>p>a:after {
    background-color: rgb(var(--bg-color3));
}

/* POPUP */
div.odialog-shader{
    background-color: rgba(var(--bg-color3), .5) 1px 1px repeat;
    backdrop-filter: blur(.1rem);
}

#odialog-container div.owindow {
    box-shadow: none;
}

/* Header */
.owindow .modal-header {
    background-color: rgb(var(--bg-color2));
}

.owindow .title {
    color: var(--txt-color2);
    background-color: rgb(var(--bg-color3));
    border: none;
}

/* Body */
#odialog-container .content h1,
#odialog-container .modal-body h1 {
    box-shadow: none;
}

/* Footer */
#odialog-container .modal-footer {
    box-shadow: none;
}

/* Button Correction */
#odialog-container .title.modal-header :not(.page-rate-widget-box) :not(#search-top-box-form) > a.btn {
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
}

#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:active,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:hover,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:focus-within {
    color: rgb(var(--txt-color2));
    background-color: rgb(var(--bg-color3));
    border: none;
}

/* DETAILS */
/* Watch */
div.page-watch-options a {
    padding: 0.15em;
    text-decoration: none !important;
    box-shadow: inset 0 -0.125em 0 0 rgba(var(--bg-color3), 1) !important;
    transition: box-shadow 300ms cubic-bezier(.4, .0, .2, 1), color 300ms cubic-bezier(.4, .0, .2, 1), padding 300ms cubic-bezier(.4, .0, .2, 1), margin 300ms cubic-bezier(.4, .0, .2, 1) !important;
}

div.page-watch-options a:hover {
    padding: .3em .25em .2em .25em !important;
    text-decoration: none !important;
    color: rgb(var(--txt-color2)) !important;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1) !important;
}

/* Revision */
#page-info {
    margin: .25em;
    font-family: var(--body-font) !important;
    font-size: .75rem !important;
}

div#page-info .odate {
    --MONO: 0;
    font-family: var(--body-font);
    font-size: .75rem;
}

/* TAGS*/
.page-tags span a {
    padding: .15em;
    color: rgb(var(--txt-color1));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 -.125em 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, .0, .2, 1), color 300ms cubic-bezier(.4, .0, .2, 1), padding 300ms cubic-bezier(.4, .0, .2, 1), margin 300ms cubic-bezier(.4, .0, .2, 1);
}

.page-tags span a:hover {
    padding: .3em .25em .2em .25em;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}

#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):before,
#main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]):before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):active:before,
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ACTION AREA */
#action-area > p {
    background-color: rgb(var(--bg-color2)) !important;
    box-shadow: none !important;
}

#action-area a[onclick*=PageRateModule],
#action-area a.action-area-close,
table.page-history tr td.optionstd a,
body.print-body #print-options a,
#site-tools-box ul.nav li a,
#action-area h1+p+h2~div[style="padding-left:3em;"] > div a {
    border: none;
    box-shadow: none;
}

/* EDITOR */
/* Title */
#action-area h1:after {
    height: .125rem;
}

/* Border */
form#edit-page-form:not(.data-form),
form#edit-page-form .wd-editor-toolbar-panel {
    box-shadow: none;
}

/* Title */
form#edit-page-form #edit-page-title {
    background-color: rgb(var(--bg-color2));
}

form#edit-page-form #edit-page-title:focus-visible {
    background-color: rgb(var(--bg-color1));
    border: none;
}

/* Text Area */
form#edit-page-form #edit-page-textarea {
    border: none;
}

form#edit-page-form #edit-page-textarea:focus {
    border: none;
}

form#edit-page-form #wd-editor-toolbar-panel+div {
    box-shadow: none;
}

/* Help */
form#edit-page-form .edit-help-34 {
    background-color: rgb(var(--bg-color2));
}

/* Size Buttons */
form#edit-page-form .change-textarea-size {
    grid-gap: 0em;
    gap: 0em;
    background-color: rgb(var(--bg-color2));
}

form#edit-page-form .change-textarea-size a:active,
form#edit-page-form .change-textarea-size a:hover{
    border: .125rem solid rgb(var(--bg-color3));
}

/* Edit Comments */
form#edit-page-form #edit-page-comments {
    background-color: rgb(var(--bg-color2));
}

form#edit-page-form #edit-page-comments:focus-visible {
    background-color: rgb(var(--bg-color1));
    border: none;
}

/* HISTORY */
/* Per Page */
select#h-perpage {
    background-color: rgb(var(--bg-color2));
    border: none;
}

/* Pager */
#action-area .pager span.current:not(:last-of-type)::before {
    display: none;
}

.pager .current {
    color: rgb(var(--txt-color2));
}

/* List*/
#revision-list .page-history tr:first-child {
    display: none;
}

table.page-history tr:nth-of-type(odd) {
    background-color: rgb(var(--bg-color2));
}

/* SOURCE */
.page-source {
    border: none;
    background-color: rgb(var(--bg-color2));
}

/* FOOTER */
/* Footer */
#footer {
    --footer-bg-color: var(--bg-color2);
    --footer-text-color: var(--txt-color1);
    --footer-link-color: var(--txt-color1);
    --footer-link-hover-color: var(--txt-color2);
    --footer-link-hover-bg-color: var(--bg-color3);
}

#footer a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

#footer a:active:before,
#footer a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Buttons */
:not(.page-rate-widget-box):not(#search-top-box-form)>.btn,
:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input {
    border: none !important;
    box-shadow: none !important;
}

#odialog-container div.owindow {
    box-shadow: none;
}

/* License Area */
#license-area {
    --license-bg-color: var(--bg-color2);
    --license-text-color: var(--txt-color1);
    --license-link-color: var(--txt-color1);
    --license-link-hover-color: var(--txt-color2);
    --license-link-hover-bg-color: var(--bg-color3);
}

#license-area a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

#license-area a:active:before,
#license-area a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* COMPONENTS */
/* Table of Contents */
#page-content div#toc {
    box-shadow: none;
}

/* Horizontal Rule */
hr {
        height: .125rem;
        margin: 1.25rem 0;
        background-color: rgb(var(--bg-color3));
        border-top: none;
}

/* Link */
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(#toc #toc-list a):not(#toc #toc-list a:visited):not(.fa.fa-info):not(.linkbox a):not(#action-area .btn):not(#rename-option-rename a):not(.danger-diamond a) {
    padding: .15em;
    margin: -.15em;
    color: rgb(var(--txt-color1));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 -.125rem 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1), color 300ms cubic-bezier(.4, 0, .2, 1), padding 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
}

#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover:not(#toc #toc-list a):not(#toc #toc-list a:visited):not(.fa.fa-info):not(.linkbox a):not(#action-area .btn):hover:not(#rename-option-rename a):hover:not(.danger-diamond a):hover {
    padding: .3em .25em .2em .25em;
    margin: -.25em;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}

/* Collapsible */
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
    background: rgb(var(--bg-color2));
    transition: background .25s linear;
}

#page-content .collapsible-block-link {
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: rgb(var(--txt-color1));
    font-weight: 700;
}

#page-content .collapsible-block-link:hover {
    color: rgb(var(--txt-color2));
}

#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {
    background: rgb(var(--bg-color3));
}

#page-content .collapsible-block-unfolded-link {
    box-shadow: 0rem -.25rem 0rem 0rem rgb(var(--bg-color3));
}

#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    margin-top: .75rem;
    margin-bottom: .75rem;
}

/* Image Block */
.scp-image-block {
    box-sizing: border-box;
    border: none;
    bottom-border: none;
    box-shadow: none;
}

:is(div.image-block, div.scp-image-block) {
    box-shadow: none;
}

:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
}

.block-right:is(div.image-block,div.scp-image-block) {
    margin: 1.25em 0 1.25em 1.25em;
}

.block-center:is(div.image-block,div.scp-image-block) {
    margin: 1.25em auto;
}

@media only screen and (max-width: 600px) {
    .scp-image-block {
        float: none;
        margin: 1.25rem auto;
    }
}

/* BetterFootnotes */
.fnnum::after {
    padding: .125rem;
}

.fncon {
    left: var(--posX);
    background: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
    padding: 1rem;
    width: 12rem;
}

.fncon::before {
    color: rgb(var(--txt-color2));
}

@media only screen and (max-width: 58.125rem) {
    .fncon {
        position: fixed;
        bottom: 1.25rem;
        left: calc(27.125vw - 3.125rem);
        width: 75%;
        transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.4, 0, .2, 1) var(--fnLinger), visibility 0.01s linear var(--fnInteract);
    }

    .fnnum:hover + .fncon, .fncon:hover {
        left: 27.125vw;
        transition: opacity 0.15s linear, left var(--fnTransition)  cubic-bezier(.4, 0, .2, 1);
    }
}

/* STANDARD */
/* Blockquote */
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
}

/* Code */
.code {
    margin: 1.25em;
    padding: .825em 1.75em .825em 1.25em;
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3));
}

.hl-code,
.hl-identifier,
.hl-brackets {
    color: rgb(var(--txt-color1));
}

.hl-var {
    color: rgb(76, 160, 108);
}

.hl-reserved {
    color: rgb(67, 135, 190);
}

.hl-number,
.hl-string {
    color: rgb(197, 38, 50);
}

.hl-quotes,
.hl-special {
    color: rgb(98, 60, 122);
}

/* Table */
 #page-content .wiki-content-table tbody tr th {
    padding: .4rem;
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
    border: .125rem solid rgb(var(--bg-color3)) !important;
}

 #page-content .wiki-content-table tbody tr td {
    padding: .8rem;
    line-height: 1.5;
    color: rgb(var(--txt-color1));
    background: rgb(var(--bg-color1));
    border: .125rem solid rgb(var(--bg-color3)) !important;
}

/* CUSTOM */
/* Label */
.label {
    padding: .125em;
    color: rgb(var(--txt-color2));
    white-space: nowrap;
    background: rgb(var(--bg-color3));
}

/* Memetic */
.memetic{
    filter: blur(.25rem);
}

/* Redaction */
.redaction{
    padding: .15em 0;
    color: rgb(var(--txt-color1));
    text-decoration: none;
    background-color: rgb(var(--txt-color1));
    transition: background-color 300ms cubic-bezier(.4, .0, .2, 1);
}

.redaction:hover {
    text-decoration: none;
    background-color: transparent;
}

/* Notation*/
.notation {
    margin: 1.25em;
    padding: .825em 1.75em .825em 1.25em;
    background-color: rgb(var(--bg-color1));
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3));
}

/* Jotting */
.jotting {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: 1px dashed rgb(var(--txt-color1));
}

/* Modal*/
.modal {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}

/* Translucent*/
.translucent{
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgba(var(--bg-color2), .5);
    backdrop-filter: blur(.1rem);
}

/* Floatbox */
/* Adapted from Basalt */
#page-content div.floatbox {
    float: right;
    max-width: calc(var(--body-width-on-desktop)/2.5);
    box-sizing: border-box;
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: none;
}

@media only screen and (max-width: 600px) {
    #page-content div:is(.floatbox) {
    float: none;
    width: 100%;
    margin: 1.25em;
    }
}

/* Document */
/* Adapted from Basalt */
.document {
    display: block;
    position: relative;
    max-width: 45rem;
    margin: 1.25em 1.25em 2.25em 1.25em;
    padding: 1.25em;
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 10px rgba(var(--bg-color4), .5);
}

.document::before {
    top: 5px;
    left: -5px;
    transform: rotate(-2.5deg);
}

.document::after {
    top: 2.5px;
    right: -2.5px;
    transform: rotate(1.25deg);
}

.document::before,
.document::after {
    content: "";
    position: absolute;
    z-index: -1;
    height: 98%;
    width: 98%;
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 10px rgba(var(--bg-color4), .5);
}

@media only screen and (max-width: 1020px) {
.document::before,
.document::after {
        display: none;
    }
}

/* Table Color */
/* Adapted from BLANKSTYLE CSS */
:root:lang(cn) {
    --table0-bg-color: 56, 49, 49;
    --table1-bg-color: var(--one-color);
    --table2-bg-color: var(--two-color);
    --table3-bg-color: var(--three-color);
    --table4-bg-color: var(--four-color);
    --table5-bg-color: var(--five-color);
    --table6-bg-color: var(--six-color);

    --table0-txt-color: var(--white-monochrome);
    --table1-txt-color: var(--white-monochrome);
    --table2-txt-color: var(--white-monochrome);
    --table3-txt-color: var(--gray-monochrome);
    --table4-txt-color: var(--white-monochrome);
    --table5-txt-color: var(--white-monochrome);
    --table6-txt-color: var(--white-monochrome);
}

.table0 {
    --bg-color3: var(--table0-bg-color);
    --txt-color2: var(--table0-txt-color);
}

.table1 {
    --bg-color3: var(--table1-bg-color);
    --txt-color2: var(--table1-txt-color);
}

.table2 {
    --bg-color3: var(--table2-bg-color);
    --txt-color2: var(--table2-txt-color);
}

.table3 {
    --bg-color3: var(--table3-bg-color);
    --txt-color2: var(--table3-txt-color);
}

.table4 {
    --bg-color3: var(--table4-bg-color);
    --txt-color2: var(--table4-txt-color);
}

.table5 {
    --bg-color3: var(--table5-bg-color);
    --txt-color2: var(--table5-txt-color);
}

.table6 {
    --bg-color3: var(--table6-bg-color);
    --txt-color2: var(--table6-txt-color);
}

/* Memo */
/* Adapted from Basalt*/
:root:lang(cn) {
    --memo-txt-color: var(--txt-color1);
    --memo-logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(20%);
    --memo-size: 5rem;
}

div[class$="-memo"] {
    color: rgb(var(--memo-txt-color));
    min-height: var(--memo-size);
    margin: 2.25rem auto;
    padding: 1.25rem;
    text-align: center;
    background: rgb(var(--memo-bg-color));
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    backdrop-filter: blur(.1rem);
}

div[class$="-memo"]::before{
    color: rgb(var(--memo-txt-color));
    z-index: 2;
    content: var(--memo-header);
    display: flex;
    flex-direction: column;
    margin: 0 auto 1.25rem auto;
    padding-top: .5em;
    font-family: var(--UI-font);
    font-weight: 700;
    font-size: 1.25em;
    text-align: center;
}

div[class$="-memo"]::after{
    content: "";
    position: absolute;
    height: 15rem;
    width: 15rem;
    top: 50%;
    left: 50%;
    margin-top: -7.5rem;
    margin-left: -7.5rem;
    min-height: var(--memo-size);
    background: var(--memo-logo);
    filter: var(--memo-logo-filter);
    background-size: calc(1.5 * var(--memo-size));
    background-repeat: no-repeat;
    background-position: center center;
}

div[class$="-memo"] > * {
    position: relative;
    z-index: 2;
}

.overwatch-memo {
    --memo-header: "监督指挥部指令";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/o5-logo.svg);
    --memo-bg-color: 252, 217, 217;
}

.ethics-memo {
    --memo-header: "伦理委员会备忘录";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/ec-logo.svg);
    --memo-bg-color: 217, 231, 252;
}

.raisa-memo {
    --memo-header: "记录与信息安全管理部通知";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/raisa-logo.svg);
    --memo-bg-color: 252, 245, 196;
}

/* Shadow */
.shadow {
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}

.blockquote.shadow {
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}

.notation.shadow,
.code.shadow {
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3)), 0 0 5px rgba(var(--bg-color4), .5);
}

/* Headline */
.headline {
    padding: 0;
    margin: .5rem 1.25rem;
    background: none;
    border: none;
}

.headline > p {
    --wght: 700;
    font-size: 1.5em;
    font-family: var(--title-font);
    text-align: center;
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
    padding: .5rem 1.25rem;
    margin: 0;
}

.headline > div {
    position: relative;
    padding: .5rem 1.25rem;
    border-top: none;
    margin: 0;
}

/* Logo */
:root:lang(cn) {
    --logo1-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --logo2-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --logo3-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");

    --logo-bg-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(20%);
    --logo-bg-size: 15rem;
}

.logo1,
.logo2,
.logo3 {
    position: relative;
}

.logo1::after,
.logo2::after,
.logo3::after {
    content: "";
    position: absolute;
    height: 40vw;
    width: 40vw;
    top: 50%;
    left: 50%;
    margin-top: -20vw;
    margin-left: -20vw;
    min-height: 15rem;
    filter: var(--logo-bg-filter);
}

.logo1 > *,
.logo2 > *,
.logo3 > * {
    position: relative;
    z-index: 2;
}

.logo1::after {
    background: var(--logo1-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}

.logo2::after {
    background: var(--logo2-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}

.logo3::after {
    background: var(--logo3-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}

/* Proposal */
:root:lang(cn) {
    --proposal-logo1: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --proposal-logo2: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --proposal1-logo3: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");

    --proposal-logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%);
    --proposal-logo-size: 15rem;
}

.proposal-logo1,
.proposal-logo2,
.proposal-logo3 {
    min-height: 15rem;
    filter: var(--proposal-logo-filter);
}

.proposal-logo1 {
    background: var(--proposal-logo1);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}

.proposal-logo2 {
    background: var(--proposal-logo2);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}

.proposal-logo3 {
    background: var(--proposal-logo3);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}

.proposal-title {
    font-size: 2em;
}

.proposal-subtitle {
    font-size: 1.5em;
}

.proposal-title,
.proposal-subtitle {
    position: relative;
    margin: .5rem 1.25rem;
    margin-bottom: 0;
    padding: .5rem 1.25rem;
    padding-bottom: 0;
    --wght: 700;
    font-family: var(--title-font);
    text-align: center;
    color: rgb(var(--txt-color1));
}

.proposal-title p,
.proposal-subtitle p {
    margin: 0;
}

.proposal-author {
font-style: italic;
text-align: right;
}

/* Transcript */
.flank {
    --wght: 700;
    text-align: center;
}

.flank p {
    margin: 0;
}

.transcript {
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: rgb(var(--txt-color1));
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-auto-rows: minmax(1em, auto);
}

.transcript p {
    margin: 0;
}

.sp {
    border-right: 1px solid rgb(var(--txt-color1));
    padding: .825em .825em 0 .825em;
    --wght: 700;
    text-align: right;
}

.di {
    padding: .825em 0 0 .825em;
}

.ac {
    padding: .825em 0 0 .825em;
    font-style: italic;
}

/* Mobile Correction */
@media only screen and (max-width: 56.25rem) {
    .transcript {
        display: inline;
    }

    .transcript::after {
        content: "\000a";
        white-space: pre;
    }

    .transcript .sp,
    .transcript .di,
    .transcript .ac {
        display: inline;
        padding: 0;
        margin: 0;
    }

    .sp::before,
    .di::before,
    .ac::before {
        content: "\000a";
        white-space: pre;
    }

    .sp {
        float: left;
        width: fit-content;
        border-right: none;
    }

    .sp p::after {
        content: ":\00a0"
    }
}

/* Linkbox*/
.linkbox {
    display: block;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin: .75rem auto;
    background: rgb(var(--bg-color2));
    transition: background .25s linear;
}

.linkbox p {
    margin: 0;
}

.linkbox a {
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: rgb(var(--txt-color1));
    font-weight: 700;
}

.linkbox:hover {
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
}

.linkbox a:hover {
    color: rgb(var(--txt-color2));
}

/* Mode Changer */
:root:lang(cn) {
    --mode1-display: inline;
    --mode2-display: none;
}

.mode1-changer {
    display: var(--mode1-display);
}

.mode2-changer {
    display: var(--mode2-display);
}

/* Member Changer */
.member-changer {
    display: inline;
    padding: 0 !important;
    margin: 0 !important;
}

.member-changer > .site-member {
    display: inline;
    padding: 0;
    margin: 0;
}

.member-changer .site-member:nth-child(2) {
    display: none;
}

/* DARK */
:root:lang(cn) {
    /* Primary Colors */
    --accent-color: 197, 38, 50;

    --bg-color1: var(--black-monochrome);
    --bg-color2: var(--dark-gray-monochrome);
    --bg-color3: var(--accent-color);
    --bg-color4: var(--black-monochrome);

    --txt-color1: var(--pale-gray-monochrome);
    --txt-color2: var(--pale-gray-monochrome);
    --txt-color3: var(--accent-color);
    --txt-color4: var(--black-monochrome);

    /* Logo Changes */
    --logo-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%) opacity(25%);

    /* Fixing the Text Color in a Single Dark Mode Theme Square */
    --swatch-text-dark: var(--black-monochrome);

    /* Color Table */
    --table0-txt-color: var(--pale-gray-monochrome);
    --table1-txt-color: var(--pale-gray-monochrome);
    --table2-txt-color: var(--pale-gray-monochrome);
    --table3-txt-color: var(--black-monochrome);
    --table4-txt-color: var(--pale-gray-monochrome);
    --table5-txt-color: var(--pale-gray-monochrome);
    --table6-txt-color: var(--pale-gray-monochrome);

    /* Logo Background */
    --logo-bg-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%) opacity(25%);

    /* Proposal Logo */
    --proposal-logo-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%);

    /* Memo */
    --memo-txt-color: var(--txt-color4);
    --memo-logo-filter: invert(0%) sepia(55%) saturate(3607%) hue-rotate(44deg) brightness(94%) contrast(89%) opacity(25%);

    /* Mode Changer */
    --mode1-display: none;
    --mode2-display: inline;
}

/* Document */
.document {
    background-color: rgb(var(--bg-color2));
}

.document::before,
.document::after {
    background-color: rgb(var(--bg-color2));

/* WIDE */
#main-content {
    --body-width-on-desktop: 60vw;
    --header-width-on-desktop: 60vw;
}

@media only screen and (max-width: 78.75rem) {
    .fncon {
        position: fixed;
        bottom: 1.25rem;
        left: calc(20vw - 3.125rem);
            width: 75%;
        transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.4, 0, .2, 1) var(--fnLinger), visibility 0.01s linear var(--fnInteract);
    }

    .fnnum:hover + .fncon, .fncon:hover {
        left: 20vw;
        transition: opacity 0.15s linear, left var(--fnTransition)  cubic-bezier(.4, 0, .2, 1);
    }
}

/* HIDE TITLE */
#page-title {
    display: none !important;
}