@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=EB+Garamond&display=swap');
body {
hyphens: auto;
text-align: justify;
text-justify: inter-word;
}
:root{
--logo-image: url("http://backrooms-wiki.wdfiles.com/local--files/component%3Atheme/logo.svg");
--header-title: "The Backrooms";
--header-subtitle: "\"For those unfortunate.\"";
--body-font: 'EB Garamond', serif;
--UI-font: 'EB Garamond', serif;
--title-font: 'Cinzel Decorative', serif;
--header-font: 'Cinzel Decorative', serif;
--mono-font: 'EB Garamond', serif;
--light-background: 243, 235, 211;
--light-text: 26, 25, 24;
--light-accent: 220, 126, 39;
--gradient-header: linear-gradient( to bottom, rgb(var(--light-accent)) 0%, rgb(var(--light-background)) 100%);
/* Change these variables to change how the whole article looks! */
--ctv-background-color: var(--light-background); /* var(--ctv-background-color); */
--ctv-main-color: var(--light-text); /* var(--ctv-main-color); */
--ctv-accent-color: var(--light-accent); /* var(--ctv-accent-color); */
--ctv-dark-accent: var(--light-accent); /* var(--ctv-dark-accent); */
--ctv-text-color: var(--light-text); /* var(--ctv-text-color); */
--white-monochrome: var(--ctv-background-color); /* ALTERED */
--pale-gray-monochrome: var(--ctv-background-color); /* BG*/
--light-pale-gray-monochrome: var(--ctv-background-color);
--very-light-gray-monochrome: var(--ctv-background-color);
--light-gray-monochrome: var(--ctv-background-color);
--gray-monochrome: var(--ctv-background-color); /* sub header */
--dark-gray-monochrome: var(--ctv-background-color);
--black-monochrome: var(--ctv-background-color);
--border-monochrome: var(--ctv-accent-color);
--visited-link: var(--ctv-accent-color);
--pale-accent: var(--ctv-accent-color); /* links that do exist */
--bright-accent: var(--ctv-main-color); /* button hover, text hover, sidemenu collapsible, submenu hover */
--medium-accent: var( --pale-gray-monochrome); /* header */
--dark-accent: var(--ctv-background-color); /* 1st footer, header menu bg */
--alt-accent: var(--ctv-main-color); /* links that do not exist */
--text-monochrome: var(--ctv-text-color);
--visited-link-color: var(--ctv-dark-accent);
--swatch-border-color: var(--border-monochrome);
--swatch-menubg-color: var(--ctv-accent-color);
--swatch-menubg-light-color: var(--pale-gray-monochrome);
--swatch-menubg-medium-color: var(--light-gray-monochrome);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--dark-gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
--swatch-menutxt-dark-color: var(--text-monochrome);
--swatch-menutxt-light-color: var(--text-monochrome);
--swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
--swatch-secondary-color: var(--ctv-main-color);
--ui-button-bg: var(--gray-monochrome);
--ui-button-txt: var(--text-monochrome);
--ui-button-hover-bg: var(--gray-monochrome);
--ui-button-hover-txt: var(--text-monochrome);
--ui-button-hover-outline: var(--ctv-main-color);
/* codeblock */
--swatch-code-text-comment: var(--ctv-accent-color);
--swatch-code-text-quotes: var(--ctv-accent-color);
--swatch-code-text-string: var(--ctv-accent-color);
--swatch-code-text-identifier: var(--ctv-accent-color);
--swatch-code-text-reserved: var(--ctv-accent-color);
/* footnotes hover */
--hoverblock-bg: var(--ctv-background-color);
--hoverblock-txt: var(--text-monochrome);
--hoverblock-header-bg: var(--swatch-primary-darker);
--hoverblock-header-txt: var(--text-monochrome);
--hoverblock-footer-bg: var(--swatch-tertiary-color);
--hoverblock-footer-txt: var(--text-monochrome);
--swatch-text-dark: var(--text-monochrome);
--swatch-text-light: var(--text-monochrome);
--swatch-topmenu-border-color: var( --pale-gray-monochrome);
--swatch-topmenu-bg-color: var(--light-background);
--background-gradient-color: var(--light-background);
--login-username-color: 255, 255, 255;
--swatch-tertiary-color: var(--ctv-main-color);
--swatch-text-secondary-color: var(--ctv-background-color) !important;
}
#header::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: -0.5rem;
background-image: var(--logo-image);
background-size: auto 8rem;
background-position: left;
background-repeat: no-repeat;
opacity: 1;
}
#license-area {
--license-bg-color: var(--ctv-main-color);
--license-link-color: var(--ctv-accent-color);
--license-link-hover-color: var(--ctv-accent-color);
}
#footer {
--footer-link-color: var(--ctv-accent-color);
--footer-link-hover-color: var(--ctv-accent-color);
}
#header{
--login-myaccount-hover-bg-color: var(-ctv-main-color) !important;
}
#top-bar{
--topmenu-category-color: var(--ctv-main-color);
--topmenu-category-hover-color: var(--ctv-main-color);
--dropdown-links-color: var(--ctv-main-color);
--dropdown-links-hover-color: var(--ctv-background-color);
}
#skrollr-body {
background: linear-gradient( to bottom, rgb(var(--ctv-main-color)), rgba(0, 0, 0, 0));
height: 11rem;
}
#main-content {
--ui-icon-color: var(--ctv-main-color);
--ui-icon-bg: var(--ctv-background-color);
--ui-icon-hover-color: var(--ui-button-hover-bg);
--ui-icon-hover-bg: var(--ui-button-hover-bg);
/* Editor Buttons */
--editor-icon-color: var(--ctv-main-color);
--editor-icon-hover-color: var(--ctv-main-color);
--editor-icon-hover-bg: var(--ctv-accent-color);
--editor-icon-submenu-bg: var(--black-monochrome);
/* footnotes */
--footnotes-footer-bg-color: var(--ctv-background-color);
--footnotes-footer-colorbar-color: var(--ctv-accent-color);
--footnotes-footer-title-bg-color: var(--ctv-accent-color);
--footnotes-footer-title-text-color: var(--swatch-text-secondary-color);
--footnotes-footer-num-color: var(--pale-accent);
--footnotes-footer-num-hover-color: var(--bright-accent);
--footnotes-footer-text-color: var(--swatch-text-general);
--pagetags-text-color: var(--ctv-accent-color);
--modal-bg: var(--ctv-accent-color);
--tabs-bg: var(--ctv-background-color);
--tabs-hover-bg: var(--ctv-accent-color);
--tabs-selected-bg: var(--ctv-accent-color);
--tables-header-txt: var(--ctv-main-color);
--tables-header-bg: var(--ctv-accent-color);
}
.code, .page-source {
background-color: rgba(var(--ctv-main-color), 0.15);
}
#main-content::after {
height: 13rem;
border-radius: 0 0.6rem 0.6rem 0;
background-color: rgb(var(--gray-monochrome));
top: calc(50vh - 6.5rem);
background-image: url("http://nuliminal-test.wikidot.com/local--files/component:theme/sidebar-arrows.svg");
}
#page-content .licensebox .collapsible-block-link {
color: rbg(var(--ctv-accent-color));
}
#page-content .licensebox .collapsible-block-link:hover {
color: rbg(var(--ctv-accent-color));
}
.small-quote {
width: 80%;
max-width: 90%;
background-color:rgb(var(--dark-gray-monochrome));
border-left: 0.5rem solid rgba(var(--bright-accent));
color:linear-gradient(
to bottom,
rgb(var(--ctv-main-color)),
rgba(0, 0, 0, 0)
) 1 100%;
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset;
border-radius: 10px;
}
.small-quote a{
color: linear-gradient(
to bottom,
rgb(var(--ctv-main-color)),
rgba(0, 0, 0, 0)
) 1 100%;
}
.block {
background-color:rgb(var(--dark-gray-monochrome));
color:rgb(var(--text-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset;
border-radius: 10px;
}
.logoblock{
padding: 0.01rem 1rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset
color:rgb(var(--text-monochrome));
margin: 0.5rem 0 0.5rem 0.25rem;
display: block;
position: relative;
background-color: rgb(var(--dark-gray-monochrome));
border: solid 0.3rem rgb(var(--bright-accent));
border-radius: 10px;
}
.logoblock::after{
content: "";
float: center;
border: solid 2px #0000;
background: url(http://backrooms-wiki.wdfiles.com/local--files/component%3Atheme/logo.svg) center/25% no-repeat;
opacity: 0.25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
.titleblock {
background-color: rgb(var(--dark-gray-monochrome));
color:rgb(var(--text-monochrome));
padding: 0.5rem 1rem 0.10rem;
margin: 1.5rem 0rem 0.5rem 0rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset;
border: solid rgb(var(--bright-accent)) 4px;
border-radius: 10px;
}
.titlebox{
color: rgb(var(--ctv-background-color));
position: relative;
top: -1.6rem;
background-color: rgb(var(--bright-accent));
padding: 0.25rem 1rem;
line-height: 0.1rem;
}
.borderblock {
background-color:rgb(var(--dark-gray-monochrome));
color:rgb(var(--text-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset;
border: solid 0.3rem rgb(var(--bright-accent));
border-radius: 10px;
}
.block a {
color: rgb(var(--swatch-menubg-medium-color));
}
.master-quote {
text-align: center !important;
text-justify: none !important;
}
.master-quote {
font-family: 'Playfair Display', serif;
font-size: 25px;
font-style: italic;
margin: auto;
width: 70%;
max-width: 75%;
padding: 1rem;
color:rgb(var(--text-monochrome));
border-width: 10px;
border-style: solid;
border-image:
linear-gradient(
to bottom,
rgb(var(--ctv-main-color)),
rgba(0, 0, 0, 0)
) 1 100%;
}