@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Zhi+Mang+Xing|Rubik&display=swap');

@supports(--css:variables) {

    :root {

     --theme-base: "black-highlighter";
     --theme-id: "laruetheme";
     --theme-name: "La Rue Macabre Theme";
     --header-title: "骇灵街";
     --header-subtitle: "我有偷闲法，且坐共谈天";

     --logo-image: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/sigil2.png");

     --body-font: 'Rubik', "Noto Sans SC", sans-serif;
     --header-font: 'Zhi Mang Xing', cursive;
     --title-font: 'Rubik', "Noto Sans SC", sans-serif;
     --mono-font: 'Courier Prime', '幼圆', monospace;

     --white-monochrome: 255, 250, 240;
     --pale-gray-monochrome: 244, 244, 244;
     --light-pale-gray-monochrome: 244, 244, 244;
     --very-light-gray-monochrome: 215, 215, 215;
     --light-gray-monochrome: 215, 215, 215;
     --gray-monochrome: 156, 148, 132;
     --dark-gray-monochrome: 115, 94, 55;
     --black-monochrome: 13, 12, 10;
     --black-monochrome-alt: 54, 48, 43;
     --bright-accent: 255, 230, 179;
     --medium-accent: 207, 159, 45;
     --dark-accent: 70, 56, 33;
     --newpage-color: 224, 224, 209;
     --swatch-text-light: 115, 94, 55;

     --swatch-menubg-color: var(--black-monochrome);
     --swatch-border-color: var(--swatch-menubg-dark-color);
     --sidebar-links-text: var(--swatch-menutxt-light-color);

     --swatch-background: var(--black-monochrome, 26, 25, 24);

     --rating-module-button-color: var(--bright-accent);
     --rating-module-button-plus-color: 45, 65, 25;
     --rating-module-button-negative-color: 70, 35, 30;
     --rating-module-button-cancel-color: 50, 45, 50;
     --rating-module-button-credit-color: 50, 45, 50;
     --rating-module-text-color: var(--bright-accent);
     --rating-module-text-hover-color: var(--swatch-menutxt-light-color);

     --background-gradient-color: var(--dark-accent, 70, 56, 33);
     --header-gradient-color-bottom: var(--dark-accent);
     --header-gradient-color-middle: var(--black-monochrome);
     --header-gradient-color-top: var(--black-monochrome);

     --gradient-header: linear-gradient(30deg,
     rgb(var(--header-gradient-color-bottom)) 0%,
     rgb(var(--header-gradient-color-middle)) 90%,
     rgb(var(--header-gradient-color-top)) 100%);

     --scrollbar-width: 0.5rem;

     --header-height-on-desktop: 12rem;
     --header-height-on-mobile: 12rem;
     --topbar-height-on-desktop: 1.875rem;
     --topbar-height-on-mobile: 3rem;

     scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }

    html,
    body {
     color: rgb(var(--white-monochrome));
    }

    a {
     color: rgb(var(--swatch-primary-darker));
    }

    @supports (background-blend-mode: screen) {

     #extrac-div-1 {
     width: 100%;
     height: var(--header-height-on-desktop);
     position: absolute;
     top: 0;
     left: 0;
     background-image: var(--gradient-header), url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/tilewood.jpg");
     background-size: var(--header-background-image-size) 80%, 80%, 80%;
     background-blend-mode: normal;
     pointer-events: none;
     }

     div#extra-div-1 {
     width: 100%;
     height: calc(100% - var(--final-header-height-on-desktop));
     position: absolute;
     top: calc(var(--final-header-height-on-desktop));
     left: 0;
     z-index: -1;
     background-color: rgba(252, 252, 252, 1);
     background-color: rgba(var(--swatch-background), 1);
     mask: var(--gradient-background);
     -webkit-mask: var(--gradient-background);
     background-image: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/tilewood.jpg"), var(--gradient-background);
     background-size: 10%, 100% var(--background-gradient-distance);
     background-blend-mode: difference;
     background-repeat: repeat, repeat-x;
     pointer-events: none;
     }

    }

    #header {
     background-repeat: no-repeat;
     background-position: left 0 top 0.25rem;
     background-clip: border-box;
     -webkit-background-size: auto calc(var(--header-height-on-desktop) - 1rem);
     background-size: auto calc(var(--header-height-on-desktop) - 1rem);
     filter: initial;
    }

    #header h1 a {
     font-size: 200%;
     overflow-wrap: normal;
     padding: 0;
     margin-top: calc((var(--header-height-on-desktop) - 0.5em)/2);
     margin-left: calc(var(--header-height-on-desktop) - .75rem);
    }

    #header h1 a::before {
     color: rgb(255, 219, 90);
     color: rgb(var(--bright-accent));
     text-shadow: inherit;
     background: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/wood.png");
     -webkit-background-size: cover;
     background-size: cover;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     overflow-wrap: normal;
    }

    #header h2 span {
     margin-left: calc(var(--header-height-on-desktop) + 0.75rem);
    }

    #header h2 {
     font-size: 150%;
    }

    #side-bar:hover {
     background-color: rgb(var(--black-monochrome-alt), 1);
     scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }

    #side-bar {
     background-color: rgb(var(--black-monochrome-alt));
     scrollbar-color: rgba(var(--dark-gray-monochrome), 0) rgba(var(--black-monochrome), 0);
    }

    #side-bar div.menu-item {
     border-bottom: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
     border-top: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
     margin-top: -0.0625rem;
    }

    #side-bar div.menu-item > :not(:nth-child(2)):not(.collapsible-block) {
     border-left: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
    }

    #side-bar .heading,
    #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded {
     background: initial;
    }

    #side-bar .heading p,
    #side-bar .side-block > .collapsible-block .collapsible-block-link {
     color: rgb(var(--swatch-menutxt-dark-color));
     text-shadow: inherit;
     letter-spacing: 0.05rem;
     font-weight: 900;
     font-size: 1.25rem;
     position: relative;
     display: flex;
     justify-content: center;
     margin: 1rem 0 1rem 0.5rem;
     color: rgb(255, 219, 90);
     color: rgb(var(--bright-accent));
     text-shadow: inherit;
     background: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/wood.png");
     -webkit-background-size: cover;
     background-size: cover;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     overflow-wrap: normal;
     font-family: var(--header-font);
     text-transform: none;
    }

    #side-bar .heading p::after,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::after,
    #side-bar .heading p::before,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::before {
     content: " ";
     position: absolute;
     width: 100%;
     height: 0.35rem;
     background-image: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/elegantdivider.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
    }

    #side-bar .side-block[style*="background-color:"] * {
     margin-left: 0 !important;
    }

    #side-bar > div[style="background-color: #e5e5ff;"] > div.menu-item > div {
     background-color: rgb(var(--black-monochrome));
    }

    #side-bar .side-block[style*="background-color:"] .heading {
     margin-top: .25rem;
    }

    #side-bar .heading p::after,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::after {
     bottom: -0.6rem;
    }

    #side-bar .heading p::before,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::before {
     top: -0.6rem;
    }

    #side-bar div.menu-item .sub-text {
     color: rgba(var(--swatch-primary-darker), 1);
    }

    #page-title {
     color: rgb(var(--swatch-menutxt-light-color));
    }

   blockquote,
   .blockquote {
    color: rgb(var(--light-pale-gray-monochrome));
    border-radius: 10px;
    border:dashed 1px rgb(var(--black-monochrome-alt));
    background: rgb(var(--dark-gray-monochrome));
   }

    .yui-navset .yui-content {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .yui-navset .yui-content,
    .yui-navset .yui-navset-top .yui-content {
     border-color: rgb(var(--swatch-menubg-dark-color));
    }

    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
     background-color: rgb(var(--swatch-menubg-black-color));
     color: rgb(var(--swatch-text-light));
    }

    table.wiki-content-table th {
     background: rgb(var(--swatch-primary-darkest));
    }

    .code {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .hl-main {
     filter: invert(1) hue-rotate(180deg);
    }

    .scp-image-block .scp-image-caption {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .scp-image-block img {
     border: 0.5rem solid rgba(var(--black-monochrome));
    }

    a:visited {
     color: rgb(var(--swatch-primary-darker));
    }

    h1 {
     color: rgb(var(--swatch-primary)) !important;
    }

    hr {
     border-top: none;
     position: relative;
     height: 0.35rem;
     background: rgba(0, 0, 0, 0);
     display: flex;
    }

    hr::before {
     content: " ";
     position: absolute;
     top: 0.1125rem;
     left: 0;
     border-top: none;
     width: 100%;
     height: 0.125rem;
     background: -webkit-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background: -o-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background: -moz-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background-position: center center;
     -webkit-filter: blur(0.04rem);
     filter: blur(0.04rem);
    }

    hr::after {
     content: " ";
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 10%;
     height: 0.25rem;
    }

    .page-rate-widget-box {
     background: linear-gradient(to top, rgba(var(--swatch-primary), 0.25) 0, rgba(var(--swatch-primary-darker), 0.15) 100%) !important;
     font-family: var(--mono-font);
    }

    form#edit-page-form {
     background-color: rgba(var(--dark-accent), 0.25);
    }

    textarea,
    input.text {
     background-color: rgb(var(--black-monochrome));
     color: rgb(var(--white-monochrome));
     padding: 0.5em;
    }

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

    div.buttons input,
    input.button,
    button,
    file,
    a.button {
     background-color: rgb(var(--medium-accent));
     color: rgb(var(-black-monochrome));
     border-color: rgb(var(--black-monochrome))
    }

    div.buttons input:hover,
    input.button:hover,
    button:hover,
    a.button:hover {
     background-color: rgb(var(--bright-accent));
    }

    div#page-info,
    div.page-watch-options {
     padding: 0.1em;
    }

    div#page-options-bottom {
     width: 90%;
     margin-bottom: 2.125rem;
     margin-left: auto;
     margin-right: auto;
    }

    div#page-options-bottom-2 {
     width: 90%;
     margin-top: -2.125rem;
     margin-left: auto;
     margin-right: auto;
    }

    div#page-options-bottom,
    div#page-options-bottom-2 {
     text-align: left;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
    }

    div#page-options-bottom,
    div#page-options-bottom-2,
    div#page-options-bottom > a {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
    }

    div#page-options-bottom > a,
    div#page-options-bottom-2 > a {
     -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
     -moz-box-flex: 2;
     -ms-flex-positive: 2;
     flex-grow: 2;
     padding: .25rem;
     -webkit-border-radius: .25rem;
     border-radius: .25rem;
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
     border: 0.125rem solid rgba(var(--swatch-primary), 0.25) !important;
     font-weight: 700;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    div#page-options-bottom-2 > a {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
    }

    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 {
     text-decoration: none;
     background-color: rgba(var(--swatch-menubg-dark-color), 1);
     color: rgba(var(--swatch-primary), 1);
    }

    .owindow .title {
     background-color: rgb(var(--swatch-menubg-dark-color));
    }

    #odialog-container,
    .title.modal-header,
    .owindow,
    .hovertip {
     background-color: rgb(var(--swatch-primary-darkest));
    }

    .hovertip {
    border: 1px solid #000 !important;
    -webkit-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    max-width: 250px;
    }

    .hovertip .content {
     background-color: #1f1c17;
     color: #cec4ae;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     padding: 4px;
   }

    .owindow .button-bar a {
     background-color: rgb(var(--swatch-menubg-dark-color));
     color: rgb(var(--white-monochrome));
    }

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

     #header {
     --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
     --y-offset: 1.5rem;
     background-position:
     calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
     background-size: var(--size), 100% var(--header-height-on-mobile);
     background-repeat: no-repeat, repeat;
     }

     #header > h1 > a > span {
     height: var(--header-height-on-mobile);
     }

     #header h1 a {
     line-height: 1;
     }

     #header h2 span {
     line-height: 1.1;
     }

    }

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

     #header {
     --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
     --y-offset: 1.5rem;
     background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size))
                calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
     background-size: var(--size), 100% var(--header-height-on-mobile);
     background-repeat: no-repeat, repeat;
     }

     #header h1 a {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2)) - 0.75em);
     line-height: 1;
     font-size: 300%;
     }

     #header h2 span {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
     line-height: 1.1;
     font-size: 120%;
     }

    }

    @media only screen and (min-width: 400px) and (max-width: 600px) {

     #header h1 a {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
     font-size: 140%;
     }

     #header h2 span {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
     font-size: 60%;
     }

    }

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

     #header h1 a {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
     font-size: 125%;
     }

     #header h2 span {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2) + 3.5em));
     font-size: 35%;
     }

    }

}