@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');

:root {
    /*
    Basic Variables
    */

    /*Theme Name*/
    --theme-base: "black-highlighter";
    --theme-id: "4chan-theme";
    --theme-name: "4chan Theme";

    /*Header*/
        /* Placeholders */
    --logo-image: url("placeholder");
    --header-title: " ";
    --header-subtitle: " ";

        /* Fonts and colors */
    --body-font: 'Arsenal', sans-serif;
    --header-font: 'Kanit', sans-serif;
    --title-font: 'Neucha', cursive;
    --mono-font: 'Space Mono', monospace;

    --white-monochrome: 0, 0, 0;
    --pale-gray-monochrome: 237, 124, 26;

    --light-gray-monochrome: 237, 198, 26;
    --gray-monochrome: 0, 0, 0;
    --black-monochrome: 255, 255, 255;
    --bright-accent: 237, 198, 26;
    --medium-accent: 237, 198, 26;
    --dark-accent: 237, 198, 26;
    --pale-accent: 237, 198, 26;
    --thing: 237, 198, 26; /* selected tab background */
    --niewiem: 0, 0, 0; /* niewiem - body background */
    --block-gray: 90, 90, 90;
    --block-lightgray: 125, 125, 125;

    --swatch-topmenu-border-color: var(--niewiem);

    --link-color: 171, 171, 171;
    --hover-link-color: 52, 52, 92;

    --background-gradient-distance: 0rem;

    --gradient-header: linear-gradient(to top, rgba(var(--niewiem)) 0%, rgba(var(--niewiem), 0.90) 100%);
    --diagonal-stripes: linear-gradient(transparent 0);
}

/*
Selectors and Classes
*/
/*
div#page-options-bottom-2>a, div#page-options-bottom>a,
div#page-options-bottom,
div#page-info,
*/
#login-status {
display: none;
}

#top-bar ul,
#top-bar {
    display: none;
}

#search-top-box {
display: none;
}

/*Title of the Page*/

#page-title {
    text: align-center;
    border-color: var(--niewiem);
    border-color: var(--ct_col_page-title-border);
    color: var(--dark-accent);
    color: #af0a0f;
    font-weight: normal;
}

#skrollr-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("https://i.imgur.com/LoJ2w0C.png");
    background-repeat: repeat-x;
    background-size:  inherit;
}

#container {
   background-image: rgb(var(--niewiem))!important;
}

#header, #top-bar {
   background-attachment: scroll;
}

#header {
   background-image: none;
   height: 0px;
}

#header::before {
   content: " ";
   position: absolute;
   height: 120%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}

#header h1, #header h1 a{
   --header-title: " ‎‎‎";
   font-size: 2.5rem;
   position: absolute;
   top: 0.05rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
   color: rgb(var(--black-monochrome));
   text-align: center;
}

#page-title::after, .meta-title::after, #page-title::before, .meta-title::before {
    content: " ";
    flex-grow: 1;
    height: 0.0625rem;
    background: rgb(var(--niewiem));
   height: 200px;
}

#header::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0.05rem;
    background-image: var(--logo-image);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
    opacity: 0.8;
    pointer-events: none;
}

#header h1 a::before {
    text-shadow: .003rem 0.01rem 0.01rem #0c0c0c;
    line-height: 1;
    text-align: left;
    color: black;
    width: 1090px;
    height: 7px;
    font-size: 0.5rem;

}

#header h2 span::before {
    text-shadow: .003rem 0.01rem 0.01rem #0c0c0c;
    line-height: 1;
    text-align: left;
    color: black;
    width: 80px;
    height: 7px;
    font-size: 0.5rem;

}

h1 {
    font-size: 2rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}

h2 {
    font-size: 1.8rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}

h3 {
    font-size: 1.6rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}

h4 {
    font-size: 1.4rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}

h5 {
    font-size: 1.2rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}

h6 {
    font-size: 1rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}

a.newpage {
   background: transparent;
   text-decoration: none
}

a.newpage {
   color: rgb(var(--newpage-color))
}

hr {
   background: rgb(var(--light-gray-monochrome));
   border: none;
   border: 1px solid rgb(var(--light-gray-monochrome));
}

blockquote {
   background: rgb(var(--pale-gray-monochrome), .33);
   border: none;
}

.lightblock {
   background: rgba(var(--block-lightgray), .33)
}

.lightblock a {
color: rgb(var(--swatch-menubg-medium-color));
}

.lightblock > hr, .darkblock > hr, .styled-quote > hr, .dark-styled-quote > hr, blockquote > hr {
   background: rgb(var(--black-monochrome));
   border: none;
   border: 1px solid rgb(var(--black-monochrome));
}

.darkblock {
   color: white;
   background: rgba(var(--block-gray), .33)
}

.styled-quote {
   border: none;
}

.dark-styled-quote {
   background: rgb(191, 83, 0);
   color: white;
   border: none;
}

.styled-quote > h1, .styled-quote > h2, .styled-quote > h3, .styled-quote > h4, .styled-quote > h5, .styled-quote > h6, .dark-styled-quote > h1, .dark-styled-quote > h2, .dark-styled-quote > h3, .dark-styled-quote > h4, .dark-styled-quote > h5, .dark-styled-quote > h6, blockquote > h1, blockquote > h2, blockquote > h3, blockquote > h4, blockquote > h5, blockquote > h6 {
   color: rgb(var(--black-monochrome));
}

#container {
   background-image: unset;
}

#top-bar ul,
#top-bar {
    display: none;
}

#search-top-box {
display: none;
}

#side-bar {
    margin-top: 120px;
    top: 0;
}

#side-bar .heading p {
   text-shadow: none;
   color: white;
}

#lock-timer {
   color: red;
}

.yui-navset .yui-content {
   background: rgb(var(--white-monochrome));
}

.yui-navset {
   border: 3px solid rgb(var(--dark-accent));
   border-radius: 3px;
}

.da-header {
   background: linear-gradient(grey, black);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 160px;
   font-family: 'Russo One', sans-serif;
   font-size: 80px;
}

.da {
   position: relative;
   top: -80px;
   left: 70px;
   background: -webkit-linear-gradient(#eee, #333);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}