The I.M.B.H. Theme

This theme was created by scutoid studios and VivamusLudio, based on the Liminal theme by stephlynch and etoisle.

The icons for the options at the bottom of the page are from the Backrooms Chinese Wiki, licensed under CC-BY-SA-3.0. The theme's base is Black Highlighter by Woedenaz, licensed under CC-BY-SA-3.0.

To import this theme to your page, put the following text anywhere inside it:

[[include :backrooms-wiki:theme:nuliminal]]

Examples

This is the Image Block component.

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This empty tab has a really long name for some odd reason. I wonder why?

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

[[div class="darkblock"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

To add a title which looks like a page title, use:

[[div class="meta-title"]]

---

+ Theme Code

This is all of the theme code normally running on the site, except for the fact that the theme page also imports the user-flairs page to give fancy names to staff. This code doesn't do that so it can be imported by other branches, which will want to have their staff highlighted.

/* Remove Default Wikidot Styles */
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
 
 /* Base BHL Theme */ 
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
 
/* Fantasque Sans Mono Font */
@import url("https://backrooms-wiki.wikidot.com/component:fantasque-sans-mono/code/1");
 
/* Public Sans Font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
/* Fancy Forums */
@import url("https://backrooms-wiki.wikidot.com/component:forum-theme/code/1");
 
/* Mask Icons */
@import url("https://backrooms-wiki.wikidot.com/component:mask-icons/code/1");
 
/* Material Icons */
@import url(https://backrooms-wiki.wdfiles.com/component:material-icons/code/1);
 
/* Root Variables: When making a new theme, see: https://github.com/Nu-SCPTheme/Black-Highlighter/blob/master/src/css/parts/root.css */
 
:root {
    /* S-CSS-P */
    --theme-base: "black-highlighter";
    --theme-id: "nuliminal";
    --theme-name: "NuLiminal Theme";
 
    /* Header */
    --logo-image: url("http://backrooms-wiki.wikidot.com/local--files/theme:nuliminal/PrideLogo");
    --header-title: "The Backrooms";
    --header-subtitle: "You've been here before.";
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    /* Typefaces */
    --body-font: 'Public Sans', Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica", sans-serif;
    --UI-font: 'Public Sans', Arial, PTRootUI, -apple-system, system-ui, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue",
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --header-font: 'Fantasque Sans Mono', Courier New, Ubuntu Mono, Consolas, monospace;
    --title-font: var(--header-font);
    --mono-font: 'Fantasque Sans Mono', Recursive, Consolas, monaco, monospace;
 
    /* Colors */
    --white-monochrome: 252, 252, 252; /* ALTERED */
    --pale-gray-monochrome: 237, 233, 223; /* ALTERED */
    --light-pale-gray-monochrome: 237, 233, 223;
    --very-light-gray-monochrome: 220, 215, 210;
    --light-gray-monochrome: 165, 160, 155;
    --gray-monochrome: 72, 69, 60;
    --dark-gray-monochrome: 64, 63, 52;
    --black-monochrome: 25, 20, 16;
    --pale-accent: 230, 23, 68;
    --bright-accent: 140, 136, 126; 
    --medium-accent: 72, 69, 60;
    --dark-accent: 140, 136, 126;
    --alt-accent: 221, 102, 17;
 
    /* Liminal Variables */
    --header-text-shadow: 0px 2px 3px rgba(0,0,0,0.8);
    --header-text-shadow-hover: 0px 5px 3px rgba(0,0,0,0.3);
    --quote-shadow: 0 2px 4px rgba(var(--black-monochrome),0.25);
    --footer-message: var(--header-subtitle);
 
    --swatch-sidebar-collapsible-tab-bg: var(--swatch-primary);
 
   /* MOST THEMES SHOULDN'T CHANGE THIS: makes editing consistent across themes, adds programing ligatures */
    --editor-font: 'Fantasque Sans Mono', Recursive, Consolas, monaco, monospace;
 
    /* Swatches */
    --swatch-secondary-color: var(--white-monochrome);
    --swatch-menubg-color: var(--white-monochrome);
    --rating-module-bg-color: var(--swatch-menubg-color);
 
    --modal-header-bg: var(--swatch-primary), 0.9;
 
   --toc-body-bg-color: var(--white-monochrome);
 
    --gradient-header: linear-gradient(to top,
        rgba(var(--medium-accent)) 0%,
        rgba(var(--medium-accent), 0.90) 100%
    );
 
    --diagonal-stripes: transparent;
    --background-gradient-distance: 0;
    --scrollbar-width: 0.7rem;
    --swatch-background: var(--pale-gray-monochrome);
    --swatch-topmenu-border-color: var(--medium-accent);
 
     --sidebar-width-on-desktop: calc(var(--base-font-size) * (300 / 10));
     --body-width-on-desktop: 40.75rem;
}
 
/* Overflow Fix */
:root {
    width: 100vw;
    overflow-x: hidden;
}
 
/* Dots */
    /* Header Dots */
    #skrollr-body {
        background-image:
        radial-gradient(circle, rgb(var(--medium-accent)) 50%, transparent 0);
        background-repeat: repeat;
        background-size: 0.25em 0.25em;
        width: 100%;
        height: 7.5rem;
    }
 
    /* Content Dots */
    #container {
        background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0);
        background-size: 0.25em 0.25em;
        background-repeat: repeat;
        background-attachment: fixed;
    }
 
/* container wrap bug */
 
#container, #container-wrap, #container-wrap-wrap {
   width: 100vw;
}
 
/* Header Image */
#header {
    background-image: none;
    z-index: 30;
}
 
#header::before {
    content: "";
    position: absolute;
    height: 100%;
    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 Text */ 
#header h1 { width: 100%; }
 
#header h1 a, #header h1 a:before {
    width: fit-content;
    transition: 0.2s;
    position: relative; 
    bottom: 0;
    color: rgb(var(--swatch-headerh1-color));
}
 
#header h1 a:hover:before {
    text-shadow: var(--header-text-shadow-hover);
    bottom: 3px;
}
 
#header h1, #header h1 a {
    position: absolute;
    top: 1rem;
    margin: 0;
    display: flex;
    justify-content: center;
    z-index: 0;
    height: 1.5rem;
}
 
#header h2, #header h2 span, #header h2 span::before {
    position: absolute;
    top: 1.85rem;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    font-weight: bold;
}
 
#header h2 span::before { color: rgb(var(--swatch-headerh2-color)); }
 
#header h1 a::before, #header h2 span::before {
    text-shadow: var(--header-text-shadow);
}
 
/* Div Boxes */
.darkblock {
    color: rgb(var(--white-monochrome));
    background: rgb(var(--dark-gray-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
}
 
.lightblock {
    color: rgb(var(--black-monochrome));
    background: rgb(var(--white-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
}
 
/* Div Quotes */
 
.styled-quote {
    color: rgb(var(--black-monochrome));
    background: rgb(var(--white-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
    border-left: solid 6px rgb(var(--dark-gray-monochrome));
}
 
.dark-styled-quote {
    color: rgb(var(--white-monochrome));
    background: rgb(var(--gray-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
    border-left: solid 6px rgb(var(--dark-gray-monochrome));
}
 
/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5em;
    margin-left: 0;
}
 
/* Table of Contents */
#page-content #toc {
    --toc-header-bg-color: var(--gray-monochrome);
    --toc-body-bg-color: var(--pale-gray-monochrome);
}
 
/* Table */
#page-content table {
    box-shadow: var(--quote-shadow);
}
 
/* Max-Width Fix */
img, embed, video, object, iframe, table, dark#page-content div, #page-content div table {
    max-width: 100%;
}
 
div#footer:after {
    content: var(--footer-message);
    border-left: solid 1px;
    padding-left: 0.5em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    margin-left: 0.3em;
}
 
/* Horizontal Rule Fix */
hr {
    clear: none;
    display: flex;
}
 
.bibitems .bibitem:after, .footnotes-footer a[href*=javascript]:before {
    right: -20%;
    width: 140%;
}
 
/* Tab Gap */
.yui-navset .yui-nav {
    background: rgb(var(--tabs-bottom-border-color));
    column-gap: 4px;
}
 
.yui-navset {
    margin-top: 1rem;
}
 
/* Page Title */
.meta-title p {
    margin: 0;
}
 
/* printuser */
span.printuser img.small {
   transition: 0.5s;
   transition-timing-function: cubic-bezier (0,1,1,0);
}
 
span.printuser img.small:hover {
   transform: scale(2);
   transition-delay: 0.5s;
}
 
#avatar-hover-container {
   display: none;
}
 
/* Stop the unordered lists being in line with the text, this breaks SD banners! */
 
ul {
    padding-inline-start: 2.5rem;
}
 
/* Template options text fix */
form#edit-page-form #page-templates option, form#edit-post-form #page-templates option, form#new-post-form #page-templates option, form#new-thread-form #page-templates option {
    color: rgb(var(--swatch-menutxt-dark-color)); 
}
 
/* Message on Delete/Rename/Move */
 
#rename-option-rename::before, #rename-option-delete::before {
    content: "Reminder: Backrooms Wiki users can rename/move pages they own, but use this responsibly (preferably only if there is an error with the name). Only staff are allowed to delete pages, even your own pages: ask Backrooms Wiki staff and we will help you!";
    color: red;
    display: block;
    margin-top: 1rem;
}
 
/* MOBILE */
 
#page-content {
    max-width: var(--body-width-on-desktop);
}
 
@media only screen and (max-width: 56.25rem) {
#page-content {
    max-width: var(--body-width-on-mobile);
}
 
#side-bar {
    z-index: 55 !important;
}
}
 
.scp-image-caption { width: inherit !important; }
 
/* Fix Images */
 
.image-container.floatright {
   float: right;
   margin-left: 0.7em;
}
 
/* Fix Modals */
 
#odialog-container .content > h1 ~ table, #odialog-container .modal-body > h1 ~ table {
    grid-auto-rows: auto;
}
 
/* Editor Font */
 
#edit-page-textarea {
    font-family: var(--editor-font);
}
 
/* Make some variables editable at :root level */
 
#side-bar {
    --sideblock-heading-text-color: inherit;
    z-index: 55 !important;
}
 
/* Inline maths actually inline */
#MathJax_Message, .math-inline {
    display: inline;
}
 
/* Buttons */
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
    flex-basis: 5.5rem;
}
 
/* License Box */
#page-content .licensebox .collapsible-block-link {
    margin-left: .25em;
    padding: .25em;
    font-weight: 700;
    opacity: .5;
    color: rgb(var(--gray-monochrome));
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}
 
#page-content .licensebox .collapsible-block-link:hover {
     color: rgb(var(--dark-gray-monochrome));
}
 
/* Info */
#u-infobox {
   opacity: 0 !important;
   pointer-events: none;
   will-change: opacity;
   transition: 0.2s;
   display: flex;
   width: 100vw; height: 100vh;
   top: 0; left: 0;
   position: fixed;
   z-index: 20;
   background-color: rgba(var(--swatch-alternate-color),.5);
   justify-content: center; align-items: center;
}
 
#u-infobox:target {
   opacity: 1 !important;
   pointer-events: unset;
}
 
.infobox-title {
    --wght: 800;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    padding: 1.5ex 1.25rem;
    background-color: rgb(var(--modal-header-bg));
    background-image: linear-gradient(125deg,rgba(var(--modal-header-stripe),.75) 25%,transparent 25%,transparent 50%,rgba(var(--modal-header-stripe),.75) 50%,rgba(var(--modal-header-stripe),.75) 75%,transparent 75%,transparent 100%);
    background-size: 3rem 4.35rem;
    color: rgb(var(--modal-header-txt));
    font-family: var(--header-font);
    font-size: 1.5em;
    font-weight: var(--wght);
    line-height: 1ex;
    text-transform: uppercase;
}
 
.infobox {
    display: grid;
    width: 60vw;
    border: 0;
    background-color: rgb(var(--modal-bg));
    box-shadow: inset 0 0 0 .125rem rgba(var(--swatch-alternate-color),.25),.5rem .25rem 1rem 0 rgba(var(--swatch-alternate-color),.25);
    color: rgb(var(--modal-body-text));
}
 
.infobox-footer {
    width: 100%;
    margin: 1rem 0 1em;
    padding: 1rem 1rem 0 0;
    box-shadow: 0-.0625rem 0 0 rgba(var(--modal-header-stripe),.2);
    text-align: right;
}
 
.infobox-title p, .infobox-footer p {
   all: unset;
}
 
.infobox-body {
    display: grid;
    margin: 0 1rem;
    padding: 0;
}
 
/* lists not weird and insidey */
 
#page-content ul:not(.yui-nav) {
    padding-left: 1rem;
    list-style: disc;
    margin: 1rem 0;
}
 
/* Image Block */
:is(.image-caption, .scp-image-caption) {
    width: unset !important;
}
 
:is(div.image-block,div.scp-image-block) {
    align-items: stretch;
}
 
:is(div.image-block,div.scp-image-block) img.image {
    width: 100% !important;
    border: 0;
}
 
/* Footnote */
a.bibcite:before, a.footnoteref:before {
    content: "[";
}
 
a.bibcite:after, a.footnoteref:after {
    content: "]";
}
 
/* Scroll Behaviour */
html {
    scroll-behavior: smooth;
}
 
/* meta style 
 
this makes it harder for staff members to accidentally guff the SEO*/
 
#action-area > div[style="padding-left:3em;"] {
    width: 100%;
    margin: 0 auto;
    padding: 1em 0 !important;
    font-family: var(--mono-font);
}
 
#action-area h1 + p + h2 ~ div[style="padding-left:3em;"] > div:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6), :nth-of-type(7)) a {
    visibility: hidden !important;
  pointer-events: none;
}
 
#edit-meta-newtag-form a:nth-of-type(2) {
  display: none;
  pointer-events: none;
}

This theme was created by XRaggiX.

Enormous thanks to VivamusLudio, Br Miller, and Yrzd6for tech help!

To import this theme to your page, put the following text anywhere inside it:

[[include :backrooms-wiki:theme:IMBH]]

Examples:

Through history we shall learn.

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This empty tab has a really long name for some odd reason. I wonder why?

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

Foot¹
this text
is here
so you can
see how
everything looks
with different
formats^and
other_stuff
including links that do not
And links that do exist!

SURVIVAL DIFFICULTY:

Educational

• Safe & Secure.
• Constant Friendly Presence.
• Contained Threats.

Quotes and Blocks:

---

Blocks:

[[div class="block"]]

[[/div]]

---

[[div class="lightblock"]]

[[/div]]

---

[[div class="darkblock"]]

[[/div]]

---

Quote Blocks:

[[div class="styled-quote"]]

[[/div]]

---

[[div class="light-styled-quote"]]

[[/div]]

---

Logo Blocks:

[[div class="logoblock"]]

[[/div]]

---

[[div class="light-logoblock"]]

[[/div]]

---

[[div class="border-logoblock"]]

[[/div]]

---

[[div class="light-border-logoblock"]]

[[/div]]

---

Border Blocks:

[[div class="borderblock"]]

[[/div]]

---

[[div class="alt-borderblock"]]

[[/div]]

---

[[div class="light-borderblock"]]

[[/div]]

---

Title Blocks:

INSERT TEXT
[[div class="titleblock"]]
[[span class="titlebox"]]INSERT TEXT[[/span]]

[[/div]]

---

INSERT TEXT

[[div class="light-titleblock"]]
[[span class="light-titlebox"]]INSERT TEXT[[/span]]

[[/div]]

---

Other Blocks:

[[div class="featurebox"]]

[[/div]]

[[div class="featureflavor"]]

[[/div]]

[[div class="newsbox"]]

[[/div]]

[[div class="light-featurebox"]]

[[/div]]

[[div class="light-featureflavor"]]

[[/div]]

[[div class="light-newsbox"]]

[[/div]]

[[div class="dark-featurebox"]]

[[/div]]

[[div class="dark-featureflavor"]]

[[/div]]

[[div class="dark-newsbox"]]

[[/div]]

[[div class="yellow-featurebox"]]

[[/div]]

[[div class="yellow-featureflavor"]]

[[/div]]

[[div class="yellow-newsbox"]]

[[/div]]

+ Theme Code

@import url(https://backrooms-wiki.wdfiles.com/local--code/component%3Apatch/1);
 
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "IMBH";
    --theme-name: "IMBH";
 
    --logo-image: url("http://backrooms-sandbox-2.wikidot.com/local--files/xraggix/imbhlogov4.png");
    --header-height-on-desktop: 11rem;
    --header-title: "The I.M.B.H.";
    --header-subtitle: "History May Guide Us.";
 
    --body-font: 'EB Garamond', 'Georgia', serif;
    --header-font: 'Cormorant Garamond', 'Times New Roman', serif;
    --title-font: 'Montserrat', sans-serif;
    --mono-font: 'JetBrains Mono', monospace;
 
    --white-monochrome: 20, 17, 14;
    --pale-gray-monochrome: 48, 38, 32;
    --light-gray-monochrome: 48, 41, 35;
    --gray-monochrome: 75, 64, 55;
    --grey-monochrome:48, 41, 35;
    --black-monochrome: 228, 220, 205;
    --bright-accent: 145, 95, 35;
    --medium-accent: 115, 70, 25;
    --dark-accent: 90, 42, 14;
    --pale-accent:  228, 185, 140;
    --newpage-color 204, 102, 37;
    --alt-accent: 175, 120, 60;
    --legacy-accent: 185, 120, 50;
    --darker-legacy-accent: 85, 98, 120;
    --backrooms-yellow: 180, 130, 45;
 
    --swatch-text-secondary-color: var(--black-monochrome);
    --swatch-topmenu-border-color: 92, 74, 58;
    --swatch-topmenu-bg-color: 31, 25, 21;
 
    --link-color: 215, 125, 50;
    --hover-link-color: 240, 160, 80;
    --visited-link-color: 140, 90, 60;
 
    --background-gradient-distance: 0rem;
 
    --gradient-header: linear-gradient(to top,
      rgb(var(--legacy-accent)) 0%,
      rgb(var(--darker-legacy-accent)) 0%
   );
    --diagonal-stripes: linear-gradient(transparent 0);
}
 
#header {    
    --swatch-headerh1-color: 240, 230, 210;
    --swatch-headerh2-color: 240, 230, 210;
}
 
#container {
    background-color: #5a2a0e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' height='107' viewBox='0 0 77 107'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='stamp-collection' fill='%23916023' fill-opacity='0.29'%3E%3Cpath d='M46 101a5 5 0 0 1 5 5h5a5 5 0 0 1 10 0h5a5 5 0 0 1 5-5v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10v-5a5 5 0 0 1 0-10V6a5 5 0 0 1-5-5h-5a5 5 0 0 1-10 0h-5a5 5 0 0 1-10 0h-5a5 5 0 0 1-10 0h-5a5 5 0 0 1-10 0H6a5 5 0 0 1-5 5v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 0 10v5a5 5 0 0 1 5 5h5a5 5 0 0 1 10 0h5a5 5 0 0 1 10 0h5a5 5 0 0 1 5-5zm15-2a7 7 0 0 0-6.71 5h-1.58a7 7 0 0 0-13.42 0h-1.58a7 7 0 0 0-13.42 0h-1.58a7 7 0 0 0-13.42 0H7.71A7.01 7.01 0 0 0 3 99.29v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58a7 7 0 0 0 0-13.42v-1.58A7 7 0 0 0 3 9.29V7.71A7.02 7.02 0 0 0 7.71 3h1.58a7 7 0 0 0 13.42 0h1.58a7 7 0 0 0 13.42 0h1.58a7 7 0 0 0 13.42 0h1.58a7 7 0 0 0 13.42 0h1.58A7.02 7.02 0 0 0 74 7.71v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7 7 0 0 0 0 13.42v1.58a7.01 7.01 0 0 0-4.71 4.71h-1.58A7 7 0 0 0 61 99zM12 12h53v83H12V12zm51 81H14V14h49v79z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 6em;
}
 
#main-content{
    background:#1F1915;
    border: #5C4A3A solid 1px;
    box-shadow: 5px 8px 24px rgba(0, 0, 0, 0.65);
    margin-top: 2em;
    margin-bottom: 5em;
    padding: 1.3em;
}
 
#side-bar .side-block div a img {
    filter: grayscale(100%);
}
 
#side-bar .heading p {
    color: rgb(var(--legacy-accent));
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
    border-radius: 0em;
    -moz-border-radius: 0em;
    border: none;
}
 
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 {
    border: none;
}
 
#header, #top-bar {
    background-attachment: scroll;
}
 
#header {
    background-color: transparent
}
 
#header::before {
    content: "";
    position: absolute;
    height: 93%;
    width: 100%;
    left: 0;
    top: 0;
    background-image: var(--logo-image);
    background-size: auto 13rem;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
}
 
#header h1, #header h1 a {
    position: absolute;
    top: 1.9rem;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 0;
}
 
#header h2, #header h2 span, #header h2 span::before {
    position: absolute;
    top: 2.7rem;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
 
#header h1 a::before, #header h2 span::before {
    text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
h1, h2, h3, h4, h5, h6 {
    color: rgb(var(--legacy-accent));
}
 
table.wiki-content-table th {
    color: rgb(var(--black-monochrome));
}
 
#login-status {
    color: rgb(var(--legacy-accent));
}
 
#login-status a {
    color: rgb(var(--legacy-accent));
}
 
#search-top-box input.empty {
    color: rgb(var(--legacy-accent));
}
 
#search-top-box input.text {
    color: rgb(var(--legacy-accent));
}
 
a.newpage {
    background: transparent;
    text-decoration: none
}
 
#page-title {
    color: rgb(var(--legacy-accent));
}
 
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a {
    color: white;
 
}
 
#main-content a:not([href*="javascript"], .footnoteref, :has(.image)):is(:hover, :focus)::before {
    content: "> ";
}
 
  #page-title {
    animation-delay: 0s;
}
 
:root {
   --fade-in-delay: 0.1s;
}
 
body #content-wrap .yui-navset .yui-nav .selected a {
    color: unset !important;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
 
:is(.lightblock, .light-styled-quote, .light-logoblock, .light-border-logoblock, .light-borderblock, .light-titleblock) {
    --link-color: 255, 215, 115;
    --hover-link-color: 255, 240, 180;  
    --newpage-color: 255, 209, 220;
    --visited-link-color: 255, 209, 220;
}
 
:is(.styled-quote, .alt-borderblock, .light-featurebox, .light-featureflavor, .light-newsbox){
    --link-color: 255, 240, 160;
    --hover-link-color: 255, 255, 255;  
    --newpage-color: 255, 209, 220;
    --visited-link-color: 190, 245, 210;    
}
 
#page-content .licensebox .collapsible-block-link, #page-content .licensebox .collapsible-block-link:hover {
    color: rgb(var(--link-color));
}
 
#login-status #account-options ul li > a::before {
    background-color: rgb(var(--swatch-secondary-color));
}
 
.printuser a:first-of-type:hover::before {
    content: none;
}
 
.code {
    background-color: rgb(var(--swatch-tertiary-color));
}
 
.sd-container {
    --sd-text:255,255,255;
    --sd-border:var(--legacy-accent);
    --sd-bullets:var(--legacy-accent);
    --sd-symbol:var(--white-monochrome);
}
 
@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(0,30px);
    }
    to {
      opacity: 1;
      transform: translate(0,0);
    }
}
 
@media screen and (prefers-reduced-motion: no-preference) {
    #page-title, #breadcrumbs, #page-content > * {
      animation-name: fadeIn;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-fill-mode: backwards;
    }
}
 
@media only screen and (max-width: 56.25rem) {
    #header::before {
        background-size: auto 9rem;
        height: 99%;
    }
 
    #header h1, #header h1 a {
        top: 1rem
    }
 
    #header h2, #header h2 span, #header h2 span::before {
        top: 1.8rem;
    }
 
}
 
@media only screen and (min-width: 56.25rem) {
 
#extrac-div-2 {
    display: block;
    height: calc(1.875rem - 2px);
    width: 100%;
    position: absolute;
    top: calc(var(--header-height-on-desktop) + 1px);
    left: 0;
    background: #1F1915;
    border-top: #5C4A3A solid 1px;
    border-bottom: #5C4A3A solid 1px;
    box-shadow: 5px 8px 24px rgba(0, 0, 0, 0.65);
}
}
 
html {
  scrollbar-color: rgb(var(--bright-accent)) rgb(var(--grey-monochrome));
}
 
blockquote {
    box-shadow: 0.05rem 0.1rem 0.3rem rgba(90, 20, 20,.25);
}
 
.styled-quote {
    background-color:rgb(var(--bright-accent));
    border-left: 0.5rem solid rgba(var(--grey-monochrome));
    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);
}
 
.light-styled-quote {
    background-color:rgb(var(--darker-legacy-accent));
    border-left: 0.5rem solid rgba(var(--legacy-accent));
    color:rgb(var(--black-monochrome));
    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);
}
 
.darkblock {
    background-color:rgb(var(--white-monochrome));
    color:rgb(var(--black-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.block {
    background-color:rgb(var(--grey-monochrome));
    color:rgb(var(--black-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.lightblock {
    background-color:rgb(var(--darker-legacy-accent));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color: rgb(var(--black-monochrome));
}
 
.borderblock {
     background-color:rgb(var( --grey-monochrome));
     color:rgb(255, 255, 255);
     padding: 0.01rem 1rem;
     margin: 0.5rem 0 0.5rem 0.25rem;
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     border: solid 0.3rem rgb(var(--bright-accent));
 }
 
.alt-borderblock {
     background-color:rgb(var(--bright-accent));
     color:rgb(255, 255, 255);
     padding: 0.01rem 1rem;
     margin: 0.5rem 0 0.5rem 0.25rem;
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     border: solid 0.3rem rgb(var(--grey-monochrome));
 }
 
.light-borderblock {
     background-color:rgb(var( --darker-legacy-accent));
     color:rgb(255, 255, 255);
     padding: 0.01rem 1rem;
     margin: 0.5rem 0 0.5rem 0.25rem;
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     border: solid 0.3rem rgb(var(--legacy-accent));
 }
 
.border-logoblock{
     padding: 0.01rem 1rem;
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     color:rgb(255, 255, 255);
     margin: 0.5rem 0 0.5rem 0.25rem;
     display: block;
     position: relative;
     background-color: rgb(var(--grey-monochrome));
     border: solid 0.3rem rgb(var(--bright-accent));
}
 
.border-logoblock::after{
     content: "";
     float: center;
     border: solid 2px #0000;
     background: url(http://backrooms-sandbox-2.wikidot.com/local--files/xraggix/imbhlogov3.png) center/20% no-repeat;
     opacity: 0.25;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: absolute;
     z-index: 1;
     pointer-events: none;
}
 
 .light-border-logoblock{
     padding: 0.01rem 1rem;
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     color:rgb(255, 255, 255);
     margin: 0.5rem 0 0.5rem 0.25rem;
     display: block;
     position: relative;
     background-color: rgb(var(--darker-legacy-accent));
     border: solid 0.3rem rgb(var(--legacy-accent));
}
 
.light-border-logoblock::after{
     content: "";
     float: center;
     border: solid 2px #0000;
     background: url(http://backrooms-sandbox-2.wikidot.com/local--files/xraggix/imbhlogov3.png) center/20% no-repeat;
     opacity: 0.25;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: absolute;
     z-index: 1;
     pointer-events: none;
}
 
.logoblock{
     padding: 0.01rem 1rem;
     color:rgb(255, 255, 255);
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     margin: 0.5rem 0 0.5rem 0.25rem;
     display: block;
     position: relative;
     background-color: rgb(var(--grey-monochrome));
}
 
.logoblock::after{
     content: "";
     float: center;
     border: solid 2px #0000;
     background: url(http://backrooms-sandbox-2.wikidot.com/local--files/xraggix/imbhlogov3.png) center/20% no-repeat;
     opacity: 0.25;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: absolute;
     z-index: 1;
     pointer-events: none;
}
 
.light-logoblock{
     padding: 0.01rem 1rem;
     color:rgb(255, 255, 255);
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
     margin: 0.5rem 0 0.5rem 0.25rem;
     display: block;
     position: relative;
     background-color: rgb(var(--darker-legacy-accent));
}
 
.light-logoblock::after{
     content: "";
     float: center;
     border: solid 2px #0000;
     background: url(http://backrooms-sandbox-2.wikidot.com/local--files/xraggix/imbhlogov3.png) center/20% no-repeat;
     opacity: 0.25;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: absolute;
     z-index: 1;
     pointer-events: none;
}
 
.titleblock {
     background-color: rgb(var(--grey-monochrome));
     color:rgb(var(--black-monochrome));
     padding: 0.5rem 1rem 0.10rem;
     margin: 1.5rem 0rem 0.5rem 0rem;
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
     border: solid rgb(var(--bright-accent)) 2px;
}
 
.titlebox{
    color: rgb(var(--grey-monochrome));
    position: relative;
    top: -1.6rem;
    background-color: rgb(var(--bright-accent));
    padding: 0.25rem 1rem;
    line-height: 0.1rem;
}
 
.light-titleblock {
    background-color: rgb(var(--darker-legacy-accent));
    color:rgb(var(--black-monochrome));
    padding: 0.5rem 1rem 0.10rem;
    margin: 1.5rem 0rem 0.5rem 0rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
    border: solid rgb(var(--legacy-accent)) 2px;
}
 
.light-titlebox{
    color: rgb(var(--darker-legacy-accent));
    position: relative;
    top: -1.6rem;
    background-color: rgb(var(--legacy-accent));
    padding: 0.25rem 1rem;
    line-height: 0.1rem;
}
 
.border-block {
    background-color:rgb(var(--grey-monochrome));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--gray-monochrome));
 }
 
.featurebox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#2B231D;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #5C493B;
    box-sizing:border-box;
}
 
.featureflavor{
    padding:0 0.5rem;
    margin:0.5rem 0;
    background:#382E27;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #705948;
    box-sizing:border-box;
    transition:0.2s;
}
 
.newsbox{
    padding:1px 1rem;
    margin:1rem 0;
    background: linear-gradient(90deg, rgba(74,61,51,1) 0%, rgba(43,35,29,0) 100%);
    border-radius:0.8rem;
}
 
.light-featurebox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#4A1C16;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #D97736;
    box-sizing:border-box;
}
 
.light-featureflavor{
    padding:0 0.5rem;
    margin:0.5rem 0;
    background:#9E4722;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #33120E;
    box-sizing:border-box;
    transition:0.2s;
}
 
.light-newsbox{
    padding:1px 1rem;
    margin:1rem 0;
    background: linear-gradient(90deg, rgba(107,36,26,1) 0%, rgba(74,28,22,0) 100%);
    border-radius:0.8rem;
}
 
.dark-featurebox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#181B1E;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #8A857B;
    box-sizing:border-box;
}
 
.dark-featureflavor{
    padding:0 0.5rem;
    margin:0.5rem 0;
    background:#2B333D;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #14171A;
    box-sizing:border-box;
    transition:0.2s;
}
 
.dark-newsbox{
    padding:1px 1rem;
    margin:1rem 0;
    background: linear-gradient(90deg, rgba(62, 80, 100, 0.95) 0%, rgba(43, 51, 61, 0.2) 100%);
    border-radius:0.8rem;
}
 
.yellow-featurebox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#8C7027;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #EAE3D2;
    box-sizing:border-box;
}
 
.yellow-featureflavor{
    padding:0 0.5rem;
    margin:0.5rem 0;
    background:#A68530;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #EAE3D2;
    box-sizing:border-box;
    transition:0.2s;
}
 
.yellow-newsbox{
    padding:1px 1rem;
    margin:1rem 0;
    background: linear-gradient(90deg, rgba(140,112,39,1) 0%, rgba(115,89,30,0) 100%);
    border-radius:0.8rem;
}

---

‡ Licensing / Citation

Cite this page as:

"The I.M.B.H. Theme" by XRaggiX, from the Backrooms Wiki. Source: https://backrooms-wiki.wikidot.com/theme:imbh. Licensed under CC-BY-SA-3.0.

• • _
  + Embed citation as HTML- Embed citation as HTML

  "<a href="https://backrooms-wiki.wikidot.com/theme:imbh">The I.M.B.H. Theme</a>" by XRaggiX, from the <a href="http://backrooms-wiki.wikidot.com/">Backrooms Wiki</a>. Source: <a href="https://backrooms-wiki.wikidot.com/theme:imbh">https://backrooms-wiki.wikidot.com/theme:imbh</a>. Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA-3.0</a>.

---

Name: Craiova - Art Museum - Interior (28161212284).jpg
Author: Ștefan Jurcă
License: CC-BY-SA-2.0
Source Link: https://commons.wikimedia.org/wiki/File:Craiova_-_Art_Museum_-_Interior_%2828161212284%29.jpg

For more information about on-wiki content, visit the Licensing Master List.

Footnotes

1. note