/*
   Present Malice Theme
   [2021 Wikidot Theme]
   by JackalRelated
           and greatly inspired by Resident Evil (1996)

   Toggle Sidebar BHL by Woedenaz
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

:root {
   --theme-base: "black-highlighter";
   --theme-id: "present-malice";
   --theme-name: "Present Malice Theme";
 
   --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:present-malice/umbrella-scp.png");
   --header-title: "SCP FOUNDATION";
   --header-subtitle: "SECURE. CONTAIN. PROTECT.";

   --body-font: "DM Sans", sans-serif;
   --header-font: "Anton", sans-serif;
   --title-font: "Courier Prime", sans-serif;
   --mono-font: "Zilla Slab", serif;

   --umbrella-red: 143, 0, 0;
   --alternate-white: 240, 235, 235;
   --itchy-tasty: 126, 64, 38;
   --stars-blue: 0, 8, 84;
   --light-stars-blue: 82, 83, 102;
   --menu-blue: 220, 218, 235;
   --chris-blood: 185, 0, 0;
   --chris-green: 9, 112, 0;
   --jill-grey: 198, 205, 215;
   --barry-magnum: 230, 230, 230;
   --barry-jacket: 165, 51, 51;
   --weskers-shades: 20, 20, 20;

   --white-monochrome: var(--jill-grey);
   --pale-gray-monochrome: var(--barry-magnum);
   --light-gray-monochrome: var(--barry-jacket);
   --gray-monochrome: var(--weskers-shades);
   --dark-gray-monochrome: var(--menu-blue);
   --black-monochrome: var(--weskers-shades);
   --pale-accent: var(--barry-jacket);
   --bright-accent: var(--chris-blood);
   --medium-accent: var(--umbrella-red);
   --dark-accent: var(--itchy-tasty);
   
   --swatch-menubg-color: var(--light-stars-blue);
   --swatch-menutxt-light-color: var(--alternate-white);
   --swatch-menutxt-dark-color: var(--alternate-white);
   --swatch-menubg-medium-color: var(--itchy-tasty);
   --swatch-menubg-medium-dark-color: var(--weksers-shades);
   --swatch-text-light: var(--alternate-white);

   --rating-module-color: var(--umbrella-red);
   --rating-module-button-color: var(--light-stars-blue);
   --rating-module-text-color: var(--dark-monochrome);

   --swatch-headerh1-color: var(--umbrella-red);
   --swatch-headerh2-color: var(--alternate-white);
   --swatch-topmenu-border-color: var(--weskers-shades);
   --swatch-topmenu-bg-color: var(--weskers-shades);
   --swatch-primary: var(--umbrella-red);

   --header-gradient-color-bottom: var(--weskers-shades);
   --header-gradient-color-middle: var(--weskers-shades);
   --header-gradient-color-top: var(--weskers-shades);
   --background-gradient-distance: 0rem;
   --diagonal-stripes: linear-gradient(transparent 0);

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

   --hover-link-color: var(--umbrella-red);

   --toggle-button-bg: rgb(var(--weskers-shades));
   --toggle-border-color: rgb(var(--umbrella-red));
   --toggle-icon-color: rgb(var(--barry-magnum));
   --toggle-roundness: 0%;

}


/* HEADER AND TOPBAR */
#page-title {
  text-align: center;
}

#header h1 {
  font-weight: 400;
}

#header h1 a::before{
  color: rgb(var(--chris-blood));
}

#header h2 {
  text-indent: -0.2em;
}

#header-extra-div-1 {
   --drop-shadow: none;
   filter: drop-shadow(0rem 0rem 0rem var(--drop-shadow));
}

@media only screen and (max-width: 768px) {
    #header h2 {
        text-indent: 0em;
    }
}

#top-bar div.mobile-top-bar>ul>li>ul>li, #top-bar div.top-bar>ul>li>ul>li{
  background: rgb(var(--stars-blue));
} 

#top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:hover {
   background: rgb(var(--stars-blue));
}

#top-bar div.mobile-top-bar>ul>li>ul>li:hover, #top-bar div.top-bar>ul>li>ul>li:hover {
    background: rgb(var(--umbrella-red));
}

#login-status {
   color: rgb(var(--chris-blood));
}
 
#login-status ul a{
   background-color: rgb(var(--weskers-shades));
   color: rgb(var(--chris-blood));
}
 
#account-options {
   background-color: rgb(var(--weskers-shades));
   color: rgb(var(--chris-blood));
}

#search-top-box input.empty{
    color: rgb(var(--stars-blue));
    background: rgb(var(--light-stars-blue));
}

#search-top-box input{
    background: rgb(var(--stars-blue));
}

#search-top-box-input:focus, #search-top-box-input:hover {
    background: rgb(var(--stars-blue));
    color: rgb(var(--alternate-white));
}

#search-top-box-form input[type=submit] {
    background: rgb(var(--umbrella-red));
}

#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    background: rgb(var(--chris-blood));
}

/* MISC. */
.page-rate-widget-box{
  background-color: rgb(var(--alternate-white));
}

hr {
   background-color: rgb(0, 0, 0, 0);
}


/* SCROLLBAR AND SIDEBAR */

html,body {
  scrollbar-color: 
    rgb(var(--umbrella-red)) 
    rgb(var(--weskers-shades));
}

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

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

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgb(var(--umbrella-red));
  border: rgb(var(--weskers-shades)) 1px solid;
  border-radius: 0px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--chris-blood));
}
 
#side-bar .heading {
    background: rgb(var(--umbrella-red));
}

#side-bar .side-block.media,
#side-bar .side-block.resources {
    background-color: rgba(var(--stars-blue), .25);
}

.owindow .button-bar a{
    background-color: rgb(var(--umbrella-red));
    border: 1px solid rgb(var(--weskers-shades));
}

.owindow .button-bar a:hover{
    background-color: rgb(var(--stars-blue));
    border: 1px solid rgb(var(--weskers-shades));
}
 

/* TABLES / TABS(YUINAVS) */
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
   filter: hue-rotate(0deg);
   color: rgb(var(--alternate-white));
}
 
.yui-navset .yui-content {
   background-color: rgb(var(--alternate-white));
   border-color: rgb(var(--weskers-shades));
}

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

table.wiki-content-table th, table.wiki-content-table tr {
    border: .0625rem solid rgba(var(--menu-blue),.25)!important;
}

table.wiki-content-table td {
    border: 1px solid #141414;
}

table.wiki-content-table {
    background-color: rgba(var(--menu-blue), .5);
}

table.form td div.sub, form div.sub {
    color: rgb(var(--umbrella-red));
}


/* FOOTERS AND BELOW */
#footer {
    color: rgb(var(--chris-blood, 66, 66, 72));
    background: rgb(var(--jill-grey, 100, 3, 15));
}

.footnotes-footer{
   color: rgb(var(--weskers-shades));
   background-color: rgba(var(--menu-blue), .5);
}

div#page-options-bottom-2>a, div#page-options-bottom>a {
   color: rgb(var(--alternate-white));
   background-color: rgb(var(--umbrella-red));
   border: .125rem solid rgba(var(--weskers-shades),1)
}

div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, 
div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
  background-color: rgb(var(--stars-blue));
}

.page-source {
    background: rgb(var(--barry-magnum));
}

form#edit-page-form {
    background-color: rgba(var(--menu-blue), 1);
}

.change-textarea-size a {
    background-color: rgba(var(--chris-green));
}

#lock-info, div.note, input.checkbox, input.text, textarea {
    scrollbar-color: rgba(var(--umbrella-red), 1) rgba(var(--weskers-shades), 1);
    border: .0625rem solid rgba(var(--swatch-border-color),.25);
    background-color: rgb(var(--alternate-white));
    color: rgb(var(--swatch-text-general));
    font-family: var(--body-font);
}

div.buttons.alignleft>input {
    background-color: rgb(var(--umbrella-red));
}


/* TOGGLE SIDEBAR (BHL) CHANGES */

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

    #side-bar::-webkit-scrollbar-track,
    #side-bar:hover::-webkit-scrollbar-track {
        background-color: rgba(var(--weskers-shades), 0);
    }
 
    #side-bar::-webkit-scrollbar-thumb {
        background-color: rgb(var(--stars-blue));
    }

    #side-bar:hover::-webkit-scrollbar-thumb {
        background-color: rgb(var(--chris-blood));
    } 
}