/*
    Twin Files Theme
    [2022 Wikidot Theme]
       by JackalRelated
       edited by vxeov
*/
@import url('https://scp-wiki.wdfiles.com/local--files/theme:twin-files/stylesheet-alt.css');
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
@import url(https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css);
@import url(https://fastly.jsdelivr.net/gh/Crimone/typefaces@main/YRDZST/subsets/YRDZST.css);

:root {
   --theme-base: "black-highlighter";
   --theme-id: "twin-files";
   --theme-name: "Twin Files";

   --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/fiic-logo-wash.png");
   --header-title: "FIIC";
   --header-subtitle: " ";

   --body-font: 'Jost', 'Noto Sans SC', sans-serif;
   --header-font: 'Rubik', sans-serif;
   --title-font: 'Archivo', 'Noto Sans SC', sans-serif;
   --mono-font: 'IBM Plex Mono', 'Noto Serif SC', monospace;
   --UI-font: var(--printer-paper-font);

   --manila-tabs-font: 'Telegraphem', 'Ma Shan Zheng', monospace;
   --manila-body-font: 'Remington Noiseless', 'Ma Shan Zheng', serif;
   --blockquote-alt-font: var(--printer-paper-font);
   --ticker-font:  'Nouveau IBM', 'VonwaonBitmap 12px', monospace;
   --printer-paper-font: 'Alte Haas Grotesk', 'Noto Sans SC', sans-serif;
   --handwriting-font: 'Sedgwick Ave', 'YRDZST', cursive;
   --windows-font: 'Modern DOS 8x16', 'VonwaonBitmap 12px', sans-serif;
   --logs-header-font: 'Commodore 64 Angled', 'VonwaonBitmap 12px', sans-serif;
   --logs-text-font: 'BabelSans', 'Noto Sans SC', sans-serif;
   --logs-dialogue-font: 'Arimo', 'Noto Sans SC', sans-serif;
   --logs-action-font: 'MoonGloss Display', 'Noto Sans SC', sans-serif;

   --header-height-on-desktop: 11.5rem;
   --header-height-on-mobile: 11.5rem;

/* WHITE - GREY */
   --win-white: 255, 255, 255;
   --win-grey: 195, 195, 195;
   --win-lborder: 237, 237, 237;
   --win-border: 207, 207, 207;

   --printer-paper: 245, 242, 235;
   --believe-white: 215, 216, 217;
   --grey-child: 205, 206, 208;
   --papers-edge: 176, 176, 176;
   --another-grey: 196, 196, 196;
   --filing-cabinet: 193, 197, 201;
   --white-lodge: 159, 160, 161;

   --one-more-grey: 99, 99, 99;
   --dark-track: 40, 42, 46;
   --faded-type: 28, 28, 28;
   --ink-blot: 10, 10, 10;

/* BLUE */
   --dept-blue: 2, 4, 20;
   --saucer-steel: 19, 21, 26;
   --believe-grey: 25, 29, 43;
   --einhander-gun: 78, 82, 92;
   --fiic-blue: 16, 20, 105;
   --fiic-grey: 119, 125, 140;

   --cooper: 98, 112, 140;
   --mulder: 69, 84, 115;
   --skinner: 41, 51, 91;
   --scully: 34, 40, 54;

/* BROWN */
   --manila-folder: 217, 201, 160;
   --manila-body: 224, 213, 186;
   --manila-edge: 189, 169, 124;

   --coffee-ring: 71, 39, 5;
   --dead-wood: 43, 35, 25;
   --light-desk: 26, 24, 21;
   --dark-desk: 13, 12, 11;

   --reyes: 224, 219, 195;
   --doggett: 140, 119, 98;

/* GREEN */
   --peaks-green: 0, 145, 9;

/* YELLOW */
   --highlighter: 214, 184, 36;
   --post-it: 230, 223, 131;

/* RED */
   --red-room: 163, 0, 0;

/* THEME ASSIGNMENTS */
   --white-monochrome: var(--filing-cabinet);
   --pale-gray-monochrome: var(--reyes);
   --light-gray-monochrome: var(--manila-edge);
   --gray-monochrome: var(--ink-blot);
   --dark-gray-monochrome: var(--filing-cabinet);
   --black-monochrome: var(--printer-paper);
   --pale-accent: var(--cooper);
   --bright-accent: var(--doggett);
   --medium-accent: var(--scully);
   --dark-accent: var(--mulder);

   --swatch-topmenu-bg-color: var(--einhander-gun);
   --swatch-topmenu-border-color: var(--einhander-gun);

   --swatch-text-light: var(--believe-white);
   --swatch-text-dark: var(--ink-blot);
   --swatch-text-general: var(--swatch-text-light);

   --swatch-menubg-color: var(--filing-cabinet);
   --swatch-menubg-medium-color: var(--papers-edge);
   --swatch-menubg-medium-dark-color: var(--ink-blot);

   --swatch-menutxt-light-color: var(--believe-white);
   --swatch-menutxt-dark-color: var(--ink-blot);
   --swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);

   --swatch-text-secondary-color: var(--ink-blot);
   --swatch-text-tertiary-color: var(--believe-white);
   --swatch-important-text: var(--bright-accent);

   --swatch-background: var(--dark-desk);

   --header-gradient-color-top: var(--saucer-steel);
   --header-gradient-color-middle: var(--believe-grey);
   --header-gradient-color-bottom: var(--saucer-steel);
   --background-gradient-distance: 0rem;
   --diagonal-stripes: linear-gradient(transparent 0);

   --sidebar-transition-timing: 0.8s ease-in-out 0.1s;

   --hover-link-color: var(--highlighter);
   --newpage-color: var(--manila-folder);
   --link-color: var(--manila-folder);
   --visited-link-color: var(--grey-child);

   --rating-module-bg-color: var(--einhander-gun);
   --rating-module-button-plus-color: var(--peaks-green);
   --rating-module-button-cancel-color: var(--scully);
   --rating-module-bottom-border-color: var(--scully);
   --rating-module-text-hover-color: var(--swatch-text-tertiary-color);

   --toggle-button-bg: rgba(var(--ink-blot), 0);
   --toggle-border-color: rgb(var(--printer-paper));
   --toggle-icon-color: rgb(var(--believe-white));
   --toggle-roundness: 0%;

   --ui-button-bg: var(--another-grey);
   --ui-button-txt: var(--ink-blot);
   --ui-button-hover-bg: var(--skinner);
   --ui-button-hover-outline: var(--scully);
   --ui-button-hover-txt: var(--printer-paper);
}

#main-content {
   --ui-icon-color: var(--dead-wood);
   --ui-icon-bg: var(--papers-edge);
   --ui-icon-hover-color: var(--printer-paper);
   --ui-icon-hover-bg: var(--skinner);
}

#header {
   --swatch-headerh1-color: var(--win-white);
   --swatch-headerh2-color: var(--printer-paper);

   --search-icon-color: var(--filing-cabinet);
   --search-icon-hover-color: var(--believe-white);
   --search-icon-hover-bg-color: var(--skinner);
   --search-textbox-text-color: 0,0,0,0;

   --login-mobile-icon-color: var(--filing-cabinet);
   --login-mobile-icon-hover-color: var(--believe-white);
   --login-mobile-icon-hover-bg-color: var(--skinner);

   --search-icon-focus-color: var(--win-white);
   --search-icon-focus-bg-color: var(--fiic-blue);
   --search-focus-outline-color: var(--win-grey);
   --search-focus-textbox-bg-color: var(--win-white);
   --search-focus-textbox-text-color: var(--printer-paper);

   --login-line-divider-color: var(--mulder);
   --login-username-color: var(--filing-cabinet);
   --login-myaccount-color: var(--filing-cabinet);
   --login-myaccount-underline-color: var(--mulder);
   --login-myaccount-hover-color: var(--believe-white);
   --login-myaccount-hover-bg-color: var(--skinner);
   --login-arrow-color: var(--filing-cabinet);

   --login-dropdown-bg-color: var(--papers-edge);
   --login-dropdown-bg-image: var(--papers-edge);
   --login-dropdown-border-color: var(--win-border), 0.5;
   --login-dropdown-text-color: var(--faded-type);
   --login-dropdown-text-hover-color: var(--printer-paper);
   --login-dropdown-bg-hover-color: var(--skinner);
}

/* HEADER AND TOPBAR */

#header h1 a {
  text-shadow: none;
  height: 100%;
  width: 150%;
  color: transparent;

  background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/fiic-logo.png");
  margin: 0;
  margin-left: 3.3em;
  padding: 0;

  background-size: auto calc(var(--header-height-on-desktop) - 1rem);
  background-repeat: no-repeat;
  background-position: left center;
}

@media only screen and (max-width: 56.25rem) {
   #header {
      background-size: calc(var(--size) - 2rem), 100% var(--header-height-on-mobile);
      background-position: calc(var(--header-height-on-mobile) - 0 - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
   }

   #header h1 a {
      background-size: contain;
      position: relative;
      width: min(10em,65vw);
      margin-left: 7.25em;
   }
}

#header h1 a::before {
  text-shadow: none;
  color: transparent;
}

#header h2 {
  display: none;
}

#extra-div-1 {
   height: var(--header-height-on-desktop);
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/grid-bog.png");
   background-size: calc(var(--header-height-on-desktop) * 0.5);
   mix-blend-mode: overlay;
   opacity: 0.2;
}

#top-bar {
   --topmenu-category-color: var(--filing-cabinet);
   --topmenu-category-hover-color: var(--printer-paper);
   --topmenu-hover-border-color: var(--cooper);

   --mobile-topmenu-sidebar-button-color: var(--printer-paper);

   --dropdown-bg-color: var(--papers-edge);
   --dropdown-border-color: var(--win-border);
   --dropdown-links-color: var(--faded-type);
   --dropdown-links-hover-color: var(---printer-paper);
   --dropdown-links-hover-bg-color: var(--skinner);
}

/* BREADCRUMBS */

#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
    color: rgb(var(--win-white));
    text-decoration: none;
}

/* SCROLLBAR AND SIDEBAR */

html,body {
   scrollbar-color:
     rgb(var(--dark-track))
     rgb(var(--fiic-grey));
}

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

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

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
   background: rgb(var(--fiic-grey));
   border: rgb(var(--fiic-grey)) 1px solid;
   border-radius: 0px;
}

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

#side-bar {
   --sidebar-bg-color: var(--white-lodge);
   --sidebar-resources-bg-color: var(--win-border), 0.25;
   --sidebar-media-bg-color: var(--win-border), 0.25;

   --sideblock-heading-border-color: var(--fiic-blue);
   --sideblock-heading-bg-color: var(--fiic-blue);
   --sideblock-heading-text-color: var(--printer-paper);

   --sidebar-border-color: var(--dark-track), 0.08;
   --sidebar-subtest-color: var(--swatch-primary);

   --sidebar-links-text: var(--faded-type);
   --sidebar-links-hover-bg-color: var(--skinner);
   --sidebar-links-hover-text-color: var(--believe-white);
}

#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
   font-size: 0.9em;
   letter-spacing: .1em;
   font-family: var(--logs-text-font);
   margin-bottom: 0.25rem;
}

@media only screen and (max-width: 56.25rem) {
   #side-bar .heading p,
   #side-bar .side-block>.collapsible-block .collapsible-block-link {
      margin-bottom: 0.3rem;
   }
}

hr {
   background-color: rgb(var(--filing-cabinet));
   border-top: .0625rem solid rgb(var(--filing-cabinet));
}

.code {
   background-color: rgb(var(--another-grey));
}

blockquote, div.blockquote {
    border: .0625rem dashed rgba(var(--scully),1);
    color: rgb(var(--faded-type));

   --hover-link-color: var(--cooper);
   --newpage-color: var(--scully);
   --link-color: var(--scully);
   --visited-link-color: var(--ink-blot);
}

.blockquote p a,
.blockquote p sup a,
.logs,
.windows {
   --hover-link-color: var(--cooper);
   --newpage-color: var(--scully);
   --link-color: var(--scully);
   --visited-link-color: var(--ink-blot);
}

blockquote hr, div.blockquote hr {
   background-color: rgb(var(--faded-type));
   border-top: .0625rem solid rgb(var(--faded-type));
}

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

.scp-image-block .scp-image-caption {
   border-top: .0625rem outset rgba(var(--win-border),1);
   background-color: rgb(var(--skinner));
   color: rgb(var(--printer-paper));
   font-family: var(--printer-paper-font);
}

/* MAIN CONTENT */

.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
   filter: hue-rotate(0deg);
}

.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
   color: rgb(var(--ink-blot));
}

#main-content {
   --tabs-bg: var(--manila-folder);
   --tabs-txt: var(--ink-blot);
   --tabs-hover-bg: var(--manila-edge);
   --tabs-hover-txt: var(--dead-wood);
   --tabs-selected-bg: var(--manila-edge);
   --tabs-selected-txt: var(--ink-blot);
   --tabs-selected-outline: var(--manila-edge);
   --tabs-bottom-border-color: var(--manila-edge);

   --tabs-content-bg-color: var(--manila-body);
   --tabs-content-border-color: var(--manila-edge);

   --tables-header-bg: var(--fiic-blue);
   --tables-header-txt: var(--printer-paper);
   --tables-border: var(--win-border);
   --tables-body-txt: var(--ink-blot);
   --tables-body-bg: var(--white-lodge);

   --toc-directory-lines-color: var(--neon-blue);
   --toc-header-bg-color: var(--passive-blue);
   --toc-header-text-color: var(--lapd-badge);
   --toc-header-text-hover-color: var(--neon-blue);
   --toc-body-bg-color: var(--pkd-blaster);
   --toc-body-link-color: var(--tears-n-rain);
   --toc-body-link-hover-color: var(--neon-blue);
   --toc-body-hover-arrow-color: var(--neon-blue);

   --blockquote-bg-color: var(--win-border), 0.8;
   --blockquote-colorbar-color: var(--fiic-blue), 1;

   --footnotes-footer-colorbar-color: var(--doggett);
   --footnotes-footer-title-bg-color: var(--doggett);
   --footnotes-footer-title-text-color: var(--ink-blot);
   --footnotes-footer-bg-color: var(--manila-body);
   --footnotes-footer-num-color: var(--doggett);
   --footnotes-footer-num-hover-color: var(--dark-desk);
   --footnotes-footer-text-color: var(--faded-type);

   --pagetags-title-bg: var(--skinner);
   --pagetags-title-text: var(--believe-white);
   --pagetags-text-color: var(--filing-cabinet);
   --pagetags-text-hover-color: var(--dark-desk);
   --pagetags-text-hover-bg-color: var(--highlighter);
}

#page-content div.b-tables table.wiki-content-table th,
#page-content table.wiki-content-table th {
   font-family: var(--UI-font);
}

:root {
   --hoverblock-header-bg: var(--doggett);
   --hoverblock-header-txt: var(--ink-blot);
   --hoverblock-footer-txt: var(--dark-desk);
   --hoverblock-bg: var(--manila-body);
   --hoverblock-txt: var(--faded-type);

   --modal-bg: var(--white-lodge);
   --modal-body-text: var(--ink-blot);
   --modal-body-header-txt: var(--red-room);
   --modal-header-bg: var(--skinner);
   --modal-header-stripe: var(--fiic-blue);
   --modal-header-txt: var(--printer-paper);
 }

/* FOOTERS AND BELOW */

.page-source {
   background: rgb(var(--win-grey));
   color: rgb(var(--ink-blot));

   --hover-link-color: var(--coffee-ring);
   --newpage-color: var(--dead-wood);
   --link-color: var(--dead-wood);
   --visited-link-color: var(--light-desk);
}

#footer {
   --footer-bg-color: var(--einhander-gun);
   --footer-text-color: var(--filing-cabinet);
   --footer-link-color: var(--filing-cabinet);
   --footer-link-hover-color: var(--believe-white);
   --footer-link-hover-bg-color: var(--cooper);
}

.bibitems .title, .footnotes-footer .title {
   font-family: var(--manila-body-font);
}

.footnotes-footer .footnote-footer {
   font-family: var(--UI-font);
}

#license-area {
   --license-bg-color: var(--dark-desk);
   --license-text-color: var(--believe-white);
   --license-link-color: var(--printer-paper);
   --license-link-hover-color: var(--ink-blot);
   --license-link-hover-bg-color: var(--highlighter);
}

form#edit-page-form .wd-editor-toolbar-panel {
   background-color: rgb(var(--win-grey));
}

/* TOGGLE SIDEBAR (BHL) CHANGES */

@supports((display: -ms-grid) or (display: grid)) {
       @media only screen and (min-width: 769px) {
           #main-content::before {
               background: rgba(var(--saucer-steel), .55) 1px 1px repeat;
           }
        }
    }

/* CUSTOM DIVS */
.headblock-tabs {
   background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/manila-top.png");
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 100%;

   height: 3em;

   color: rgb(var(--faded-type));
   font-family: var(--manila-tabs-font);
   font-weight: bold;
   font-size: 0.8em;

   padding: 1em 0 0 1em;
   margin: 0em;
}

@supports((display: -ms-grid) or (display: grid)) {
       @media only screen and (max-width: 769px) {
            .headblock-tabs {
               background-size: 250%;      
               height: 1.9rem;
               font-size: 1em;
               padding: 1.5rem 0 0 1rem;
            }

            .headblock-tabs p{
               margin: 0em;
            }
        }
    }

.headblock {
   background-color: rgb(var(--manila-folder));
   background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/manila-texture.png");
   background-repeat: repeat;
   background-size: 100%;
   background-blend-mode: multiply;

   border: 2px solid white;
   border-color: rgb(var(--manila-edge));

   color: rgb(var(--faded-type));
   font-family: var(--manila-body-font);
   font-weight: 400;
   font-size: 1.1em;
   text-shadow:  0px 0 1px rgba(var(--faded-type), 0.5);

   padding: 1em 0.5em 1em 1em;
}

.headblock p {
   margin: 0em;
}

.genblock {
   background-color: rgb(var(--printer-paper));
   background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/paper-texture.png");
   background-repeat: repeat;
   background-size: 100%;

   color: rgb(var(--ink-blot));
   font-family: var(--printer-paper-font);
   border: 1px solid white;
   border-color: rgb(var(--papers-edge));

   padding: 1.5em 1em 1.5em 1em;
}

.ticker {
   padding: 10px 5px 1.1em 3.7em;

   font-family: var(--ticker-font);
   font-size: 110%;
   font-weight: 400;
   color: #000;

   background: repeat-y url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/tickerback.png");
   background-position: center top;
   background-size: 100%;

   border: 2px solid #D8D6CA;
   border-style: dashed solid dashed;
   border-width: medium 2px 0px;
}

.windows p,
.windows-box p,
.windows-slimbox p,
.windows-button p,
.windows-bar p {
   margin: 0em;
}

.windows-bar {
   background-color: rgb(var(--fiic-blue));
   color: rgb(var(--printer-paper));
   font-family: var(--windows-font);
   font-size: 16px;

   border: 3px outset rgb(207, 207, 207);
   border-bottom: 0px;

   margin: 0em;
   padding: 0.25em 0px 0px 0.5em;
}

.windows {
   background-color: rgb(var(--win-grey));

   color: rgb(var(--faded-type));
   font-family: var(--windows-font);
   font-size: 16px;
   border: 3px outset rgb(var(--win-border));
   border-top: 0px;

   padding: 0.3em 0.75em 0.2em 0.75em;
}

.windows hr {
   height: 0.125rem;
   margin: 0.3em 0px;
   border-top: 0px;
   background-color: rgb(var(--white-lodge));
}

.windows-box {
   background-color: rgb(var(--win-white));
   border: 3px inset rgb(var(--win-lborder));

   padding: 0.5em;
   margin: 0.3em 0px 0.3em 0px;
}

.windows-slimbox {
   background-color: rgb(var(--win-white));
   border: 2px inset rgb(var(--win-lborder));
   color: rgb(var(--ink-blot));

   padding: 0.15em;
}

.windows-button {
   background-color: rgb(var(--win-grey));
   border: 3px outset rgb(var(--win-border));

   padding: 0.3em;
}

.logs p,
.logs-header p,
table.dialog p {
   margin: 0em;
}

.logs {
   padding: 0px 0px 0.5em 0px;
   margin: auto;
   width: 95%;

   background-color: rgb(var(--win-grey));
   border: 3px outset rgb(var(--win-border));
   color: rgb(var(--one-more-grey));
   font-family: var(--logs-text-font);
}

.logs-header {
   padding: 0.5em 0px 0.5em 0px;
   text-align: center;
   font-size: 1.5em;

   background-color: rgb(var(--skinner));
   color: rgb(var(--believe-white));
   font-family: var(--logs-header-font);
}

.logs hr {
   background-color: rgb(var(--ink-blot));
}

table.dialog {
   border-collapse: collapse;
   font-family: var(--logs-text-font);
}

table.dialog th {
   border-right: 1px solid rgb(var(--ink-blot));
   color: rgb(var(--ink-blot));
   padding:  1em 1em 0em 1em;
}

table.dialog td {
   padding: 1em 0em 0em 1em;
   font-family: var(--logs-action-font);
}

table.dialog td.active {
   color: rgb(var(--ink-blot));
   font-family: var(--logs-dialogue-font);
}

.blockquote-alt {
   margin: .5em 1.25rem;
   padding: .825em 1.25em;
   border: .0625rem dashed rgba(var(--doggett), 1);
   background-color: rgba(var(--manila-body), 0.9);

   color: rgb(var(--dark-desk));
   font-weight: 400;
   font-family: var(--blockquote-alt-font);   

   --hover-link-color: var(--coffee-ring);
   --newpage-color: var(--dead-wood);
   --link-color: var(--dead-wood);
   --visited-link-color: var(--light-desk);
}

.blockquote-alt hr {
   background-color: rgb(var(--manila-edge));
   border-top: .0625rem solid rgb(var(--manila-edge));
}

.post-it-note {
   width: 50%;
   min-height: 20em;
   border: 2px solid rgba(var(--highlighter), 0.9);

   margin: auto;
   padding: 1em;

   background-color: rgb(var(--post-it));
   color: rgb(var(--ink-blot));
   font-family: var(--handwriting-font);
   font-weight: bold;
}