@import url('https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poller+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist&display=swap');
:root {
--logo-image: url(http://backrooms-sandbox-2.wikidot.com/local--files/deepdepths/heart);
--header-title: "BLOODSHOT";
--header-subtitle: "Enter the Depths of my Heart";
--header-height-on-desktop: 11rem;
--swatch-text-general: 245, 245, 245; /* white-ish */
--black-monochrome: 171, 35, 40;
--swatch-secondary-color: 178, 15, 90;
--light-gray-monochrome: 171, 35, 40;
--pale-gray-monochrome: var(--swatch-text-general);
--dark-gray-monochrome: 171, 35, 40;
--dark-accent: 171, 35, 40;
--bright-accent: 171, 35, 40;
--tabs-selected-txt: 151, 30, 32;
--swatch-background: 10, 0, 3;
--swatch-primary: 198, 100, 145;
--swatch-primary-darker: 255, 176, 210;
--dark-gray-monochrome: var(--swatch-primary-darker);
--swatch-menubg-dark-color: 151, 23, 32;
--rating-module-text-color: var(--swatch-text-general);
--rating-module-button-plus-color: var(--swatch-text-general);
--rating-module-button-color: var(--swatch-text-general);
--rating-module-bg-color: var(--dark-accent);
--swatch-menubg-color: 76, 0, 51;
--swatch-menubg-hover-color: 171, 35, 40;
--swatch-topmenu-bg-color: var(--swatch-menubg-medium-dark-color);
--swatch-topmenu-border-color: var(--swatch-menubg-black-color);
--swatch-primary-darkest: 213, 89, 132;
--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
--swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
--sidebar-links-text: 251, 229, 229;
--main-color: 238, 69, 64;
--link-color: 243, 87, 98;
--hover-link-color: var(--link-color));
--visited-link-color: 223, 60, 87;
--body-font: 'Urbanist', monospace;
--header-font: 'Poller One', monospace;
--sec-header-font: 'Tilt Warp', monospace;
--title-font: 'Poiret One', monospace;
--mono-font: 'Nova Mono', monospace;
--hoverblock-header-bg: var(--swatch-menubg-color);
}
#top-bar {
--dropdown-bg-color: var(--light-gray-monochrome), 0.9;
}
#main-content {
--footnotes-footer-bg-color: var(--swatch-secondary-color);
--footnotes-footer-num-color: var(--swatch-text-general);
--pagetags-title-text: var(--swatch-text-general);
}
#license-area {
--license-bg-color: var(--light-gray-monochrome);
}
hr {
border: transparent;
height: 2px;
background-color: rgb(var(--main-color));
}
#page-title::before,
.meta-title::before {
content: "";
flex-grow: 1;
height: 0.0625rem;
margin: auto 1.25rem auto auto;
background: rgb(var(--swatch-tertiary-color));
}
#page-title {
align-items: center;
text-align: center;
border-color: rgb(var(--main-color));
}
#header h2 span::before {
font-family: var(--sec-header-font);
}
blockquote {
box-shadow: 0px 0px 1px 1px rgb(var(--swatch-text-general));
}
blockquote hr {
background-color: rgb(var(--swatch-primary-darker));
}
body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
background: rgb(var(--swatch-text-general));
}
#top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:hover {
background-color: rgb(var(--light-gray-monochrome));
}
#header::before {
background-size: auto 9rem;
opacity: 1;
}
#search-top-box {
margin-top: -1.50rem;
}
div#container-wrap {
background: url("http://backrooms-sandbox-2.wikidot.com/local--files/deepdepths/top"), rgb(62, 0, 35);
background-repeat: repeat-x;
background-size: auto 11.25rem, 100vw calc(100vh - 150px);
}
#header h1 a::before, #header h2 span::before {
color: rgb(var(--main-color));
}
@media only screen and (min-width: 769px) {
#main-content::after {
background: none;
border: none;
}
#main-content::before {
background: rgb(var(--light-gray-monochrome))
border: none;
}
}
#edit-page-textarea, #lock-info, #edit-page-comments {
background-color: rgb(var(--swatch-menubg-color));
}
#top-bar div.mobile-top-bar>ul>li.sfhover>a:after, #top-bar div.mobile-top-bar>ul>li.sfhover>a:before, #top-bar div.mobile-top-bar>ul>li:hover>a:after, #top-bar div.mobile-top-bar>ul>li:hover>a:before, #top-bar div.top-bar>ul>li.sfhover>a:after, #top-bar div.top-bar>ul>li.sfhover>a:before, #top-bar div.top-bar>ul>li:hover>a:after, #top-bar div.top-bar>ul>li:hover>a:before {
background-color: rgb(var(--light-gray-monochrome));
}
div#page-options-bottom-2>a, div#page-options-bottom>a, 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(--swatch-primary-darkest));
}
.lightblock, .darkblock, .styled-quote, .logoblock, .titleblock, .titlebox {
color: rgb(var(--swatch-text-general));
}
.lightblock, .darkblock, .styled-quote, .logoblock {
margin: 0.5rem 0 0.5rem 0.25rem;
}
.styled-quote, .lightblock, .logoblock {
background-color: rgba(var(--swatch-primary-darker), 0.7);
}
.styled-quote {
border-left: 0.5rem solid rgb(var(--light-gray-monochrome));
}
.lightblock hr, .logoblock hr, .styled-quote hr {
background-color: rgb(var(--light-gray-monochrome));
}
.darkblock {
background-color: rgba(var(--light-gray-monochrome), 0.7);
}
.darkblock hr {
background-color: rgb(var(--swatch-text-general));
}
#header h1, #header h1 span, #header h1 span::before {
color: rgb(224, 20, 76);
}
#header h2, #header h2 span, #header h2 span::before {
top: 2.5rem;
}
#page-title {
border-color: rgb(var(--swatch-text-general));
color: rgb(var(--swatch-text-general))!important;
font-size: 2rem;;
}
#footer {
background-color: rgb(var(--swatch-menubg-color));
}
.yui-navset .yui-nav a:hover
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:focus-within,
.yui-navset .yui-nav .selected,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a:active {
font-weight: bold;
color: rgb(var(--tabs-selected-txt));
}
#main-content div.collapsible-block a,
#main-content div.collapsible-block a:visited,
#main-content div.collapsible-block a:hover,
#main-content div.collapsible-block a:active,
#main-content div.collapsible-block a:focus-within {
padding: 5px;
background-color: rgb(var(--swatch-primary));
align-items: center;
justify-content: center;
text-align: center;
margin: 0 0.4em 0 0.2em;
color: rgb(var(--swatch-text-general));
box-shadow: 0.2em 0.2em 0 0 rgb(var(--swatch-secondary-color));
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
border: 0.1rem solid rgb(var(--swatch-secondary-color));
border-radius: 5px;
}
table.wiki-content-table tr {
background-color: rgb(var(--swatch-menubg-color));
}
.scp-image-block.block-right {
background: rgb(var(--swatch-primary-darker));
border: 1px solid rgb(var(--swatch-secondary-color));
}
.logoblock{
padding: 0.01rem 1rem;
display: block;
position: relative;
}
.logoblock::after{
content: "";
float: center;
border: solid 2px #0000;
background: var(--logo-image) center/25% no-repeat;
opacity: 0.25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
.titleblock {
background-color: rgba(var(--dark-gray-monochrome), 0.7);
padding: 0.5rem 1rem 0.10rem;
margin: 1.5rem 0rem 0.5rem 0rem;
border: solid rgb(var(--bright-accent)) 2px;
}
.titlebox{
position: relative;
top: -1.6rem;
background-color: rgb(var(--bright-accent));
padding: 0.25rem 1rem;
line-height: 0.1rem;
}
.code {
background-color: rgb(var(--swatch-primary-darker));
}