Greystyle

Info

---

Greystyle by Greyve
For more by me, check out the Greyve Page. Thanks for visiting!

---

Dark Mode

Light Mode

---

Information

▼ Interview Transcript

Interview Transcript

Begin Log

███

What is this?

Greyve

Greystyle. Next question?

███

No, I meant this transcript. Don't you find it…I don't know, pretentious?

Greyve

I mean, it's literally called Greystyle.

███ shrugs.

███

Fair enough.

Greyve

So…next question?

███

Right. What's this theme based on?

Greyve

It's mainly forked from Woedenaz's Penumbra BHL, which is itself a port of EstrellaYoshte's Penumbra Theme.

███

What sets it apart from Penumbra?

Greyve

It's functionally quite similar, but you can probably tell it's quite visually distinct. There's a ton of minor changes to the overall site interface, and I also added a few custom formats like this transcript.

███

Cool. Why'd you make this?

Greyve

Honestly? Felt left out. I mean, everybody has a personal theme— just look at Placestyle, or Blankstyle, or Flopstyle—

███

But you haven't even written anything in like two years.

Greyve

That's kinda the point. It's sunk cost fallacy— I mean, do you have any idea how long it takes to navigate the source code for BHL? I figured spending all that time on a theme would give me a good enough reason to use it.

███

Fair enough. So I assume you'll be updating this regularly?

Greyve

That's the idea. The whole point is to consolidate the CSS formatting for use in my personal articles, creating a theme that satisfies my, uh, particular aesthetic idiosyncrasies. If you also want to use it, that'd be pretty cool! Just remember that it's a BHL theme, so it's incompatible with other base themes.

███

What are your "particular aesthetic idiosyncracies"?

Greyve

Mostly minimalism. This theme pretty much has a four color palette, and I've removed nearly every line that isn't inherent to Wikidot itself and doesn't serve some functional purpose.

███

That just sounds like Basalt with extra steps.

Greyve

Pretty much. I'm still waiting for Liryn to port Foxtrot into Basalt so I can keep the Penumbra header format.

███

Right. Now then, how do you actually use this?

End Log

For those without the patience to indulge my metafictional inclinations Greystyle is a visual theme created by Greyve for use in his articles. It is essentially a light variant of Woedenaz's Penumbra BHL with several personal stylistic changes.

Note that Greystyle is incompatible with Sigma-9 and Basalt.

---

Usage

Use the following code at the top of your page to apply this theme:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:greystyle]]

---

Examples

Bone--white-monochrome(252, 252, 252)

Blood--accent-color(140, 0, 0)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Smoke--light-gray-monochrome(238, 238, 238)

Ash--gray-monochrome(56, 49, 49)

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

Iron--pale-gray-monochrome(196, 196, 196)

Rust--accent-color(140, 0, 0)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Charcoal--dark-gray-monochrome(38, 28, 28)

Ink--black-monochrome(14, 14, 14)

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

The header and title fonts are Josefin Sans.
The body font is Oxygen.
The monospace font is Fira Code.

Use ----- to create horizontal rules.

---

This is an image block.

Use between one and six + at the start of the line to create headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Open

This is a collapsible.

Tab

This is a tab¹.

• This
• is
• a
• bulleted
• list.

Long Tab Which Also Has A Long Name

This is a long tab.This is a better footnote..

It does not contain a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a punchline.

This is a blockquote.

Use > at the start of each line or [[div class="blockquote"]] to create these.

This	is
a	table

Footnotes

1. This is a footnote.

---

Custom

Use [[div class="floatbox"]] to create these.

Use [[span class="label"]] to create these.

Use [[span class="redaction"]] to create these.

Use [[span class="memetic"]] to create these.

Use [[div class="notation"]] to create these.

Use [[div class="jotting"]] to create these.

Use [[div class="modal"]] to create these.

Use [[div class="document"]] to create these. It is not recommended to nest these inside other divs.

This is a grey table.
Use [[div class="table0"]] to create these.

This is a green table.
Use [[div class="table1"]] to create these.

This is a blue table.
Use [[div class="table2"]] to create these.

This is a yellow table.
Use [[div class="table3"]] to create these.

This is an orange table.
Use [[div class="table4"]] to create these.

This is a red table.
Use [[div class="table5"]] to create these.

This is a purple table.
Use [[div class="table6"]] to create these.

Use [[div class="overwatch-memo"]] to create these.

Use [[div class="overwatch-memo"]] to create these.

Use [[div class="raisa-memo"]] to create these.

Use the following code to create these:

[[div class="DIV CLASS shadow"]]
CONTENT
[[/div]]

Headline

Use the following code to create these:

[[div class="headline"]]
HEADLINE CONTENT
[[div class="DIV CLASS"]]
DIV CONTENT
[[/div]]
[[/div]]

Use the following code to create these:

[[div class="DIV CLASS logo#"]]
CONTENT
[[/div]]

logo1, logo2, and logo3 are available by default. Use the following code to change the logos, add a filter, or adjust sizing:

:root {
--logo1-bg: url("URL HERE");
--logo2-bg: url("URL HERE");
--logo3-bg: url("URL HERE");
--logo-bg-filter: FILTER;
--logo-bg-size: SIZE;
}

Use "[[div class="translucent"]]" to create these.

Proposal Title

Subtitle

Date
Author
Department
Division

---

Use the following code to create these:

[[div class="DIV CLASS"]]
[[div class="proposal-logo#"]]
[[/div]]
[[div class="proposal-title"]]
TITLE CONTENT
[[/div]]
[[div class="proposal-subtitle"]]
SUBTITLE CONTENT
[[/div]]
[[div class="proposal-author"]]
AUTHOR CONTENT
[[/div]]
-----
PROPOSAL CONTENT
[[/div]]

proposal-logo1, proposal-logo2, and proposal-logo3 are available by default. Use the following code to change the logos, add a filter, or adjust sizing:

:root {
--proposal-logo-1: url("URL 1");
--proposal-logo2: url("URL 2");
--proposal1-logo3: url("URL 3");
--proposal-logo-filter: FILTER;
--proposal-logo-size: SIZE;
}

Transcript

Use the following code to create these:

[[div class="headline"]]
HEADLINE CONTENT
[[div class="DIV CLASS"]]
[[div class="flank"]]
FLANK CONTENT
[[/div]]
[[div class="transcript"]]
TRANSCRIPT CONTENT
[[/div]]
[[div class="flank"]]
FLANK CONTENT
[[/div]]
[[/div]]
[[/div]]

Begin Log

Speaker

Use [[div class="di"]] to create dialogue.

Speaker

Use [[div class="sp"]] to create speakers.

Speaker

Use [[div class="ac"]] to create action. It is recommended to use an empty [[div class="sp"]] before.

End Log

This is a linkbox.

It is also a shameless self-advertisement.

Use [[div class="linkbox"]] to create them.

This is a light mode switcher. It contains content unique to light mode.

This is a dark mode switcher. It contains content unique to dark mode.

Use the following code to create these:

[[div class="mode1-changer"]]
LIGHT MODE CONTENT
[[/div]]
[[div class="mode2-changer"]]
DARK MODE CONTENT
[[/div]]

---

Code

▼ Show code

/*
Greystyle
[2023 Wikidot Theme]
Created by Greyve
 
Forked from:
* Penumbra BHL by Woedenaz
 
Inspiration from:
* ADMONITION Theme by Liryn and Placeholder McD
* Basalt Theme by Liryn and Placeholder McD
* Black Highlighter Theme by Croquembouche and Woedenaz
* BLANKSTYLE CSS by HarryBlank and Placeholder McD
* Flopstyle: DARK by Lt Flops
* Paperstack Theme by EstrellaYoshte
* Penumbra by EstrellaYosthe
* Penumbra BHL by Woedenaz
* PLACESTYLE CSS by Placeholder McD
* Redtape Theme by Rounderhouse
* SYNTECH Theme by Greyve
* Twin Files Theme by JackalRelated
 
Components from:
* Centered BHL Header  by Woedenaz
* Toggle BHL Sidebar by Woedenaz
* BetterFootnotes by EstrellaYoshte
* ACS Animation by EstrellaYoshte
*/
 
/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 
:root {
/* INTEGRATION */
    --theme-base: "black-highlighter";
    --theme-id: "greystyle";
    --theme-name: "Greystyle";
 
/* FONTS */
    --body-font: 'Oxygen', sans-serif;
    --header-font: 'Josefin Sans', sans-serif;
    --title-font: 'Josefin Sans', sans-serif;
    --mono-font: 'Fira Code', monospace;
    --ui-font: var(--body-font);
 
/* COLORS */
    /* Primary Colors */
    --white-monochrome: 252, 252, 252;
    --light-gray-monochrome: 238, 238, 238;
    --gray-monochrome: 56, 49, 49;
 
    --pale-gray-monochrome: 196, 196, 196;
    --dark-gray-monochrome: 28, 28, 28;
    --black-monochrome: 14, 14, 14;
 
    --accent-color: 140, 0, 0;
 
    --pale-accent: var(--accent-color);
    --bright-accent: var(--accent-color);
    --medium-accent: var(--accent-color);
    --dark-accent: var(--accent-color);
    --alt-accent: var(--accent-color);
 
    /* Custom Variable Colors */
    --bg-color1: var(--white-monochrome);
    --bg-color2: var(--light-gray-monochrome);
    --bg-color3: var(--accent-color);
    --bg-color4: var(--gray-monochrome);
 
    --txt-color1: var(--gray-monochrome);
    --txt-color2: var(--white-monochrome);
    --txt-color3: var(--accent-color);
    --txt-color4: var(--light-gray-monochrome);
 
    /* Secondary and Tertiary Colors */
    --swatch-primary: var(--accent-color);
    --swatch-primary-darker: var(--accent-color);
    --swatch-primary-darkest: var(--accent-color);
    --swatch-border-color: var(--dark-gray-monochrome);
    --swatch-secondary-color: var(--accent-color);
    --swatch-tertiary-color: var(--accent-color);
    --swatch-alternate-color: var(--alt-accent);
 
    /* Background Color */
    --background-color: var(--bg-color1);
    --background-gradient-color: var(--bg-color1);
 
    /* Text Colors */
    --swatch-text-general: var(--txt-color1);
    --swatch-text-light: var(--txt-color2);
    --swatch-text-dark: var(--txt-color1);
    --swatch-important-text: var(--txt-color3);
 
    --link-color: var(--txt-color3);
    --hover-link-color: var(--txt-color3);
 
    /* Menu Colors */
    --swatch-menutxt-general-color: var(--txt-color1);
    --swatch-menutxt-dark-color: var(--txt-color1);
    --swatch-menutxt-light-color: var(--txt-color2);
 
    --swatch-menubg-color: var(--bg-color1);
    --swatch-menubg-light-color: var(--bg-color3);
    --swatch-menubg-medium-color: var(--bg-color3);
    --swatch-menubg-medium-dark-color: var(--bg-color3);
    --swatch-menubg-dark-color: var(--bg-color3);
    --swatch-menubg-black-color:var(--bg-color4);
    --swatch-menubg-hover-color:var(--bg-color2);
 
    --swatch-background: var(--bg-color1);
    --swatch-headerh1-color: var(--bg-color3);
    --swatch-headerh2-color: var(--bg-color3);
 
    /* ACS Colors */
    --one-color: 76, 160, 108;
    --two-color: 67, 135, 190;
    --three-color: 245, 211, 1;
    --four-color: 233, 107, 40;
    --five-color: 197, 38, 50;
    --six-color: 98, 60, 122;
 
/* COMPONENTS */
    /* UI */
    --ui-button-txt: var(--txt-color1);
    --ui-button-bg: var(--bg-color2);
    --ui-button-hover-txt: var(--txt-color2);
    --ui-button-hover-bg: var(--bg-color3);
    --ui-button-hover-outline: transparent;
 
    /* Header */
    --logo-image: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --header-title: "SCP FOUNDATION";
    --header-subtitle: "SECURE, CONTAIN, PROTECT";
    --header-h1-font-size: calc(2rem + (.025 * (100vw - 20rem)));
    --header-h2-font-size: calc(var(--base-font-size) * 1.25);
 
    --down-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26' overflow='visible' xml:space='preserve'%3E%3Cpath d='m15,26 15-26H0'/%3E%3C/svg%3E");
    --right-arrow-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' overflow='visible' xml:space='preserve'%3E%3Cpath d='m26,15 -26,15 V0'/%3E%3C/svg%3E");
 
    --header-gradient-color-bottom: var(--bg-color1);
    --header-gradient-color-middle: var(--bg-color1);
    --header-gradient-color-top: var(--bg-color1);
    --diagonal-stripes: unset;
 
    --swatch-topmenu-border-color: var(--bg-color1);
    --swatch-topmenu-bg-color: var(--bg-color1);
 
    /* Toggle Sidebar */
    --sidebar-transition-timing: .7s ease-in-out .1s;
    --toggle-button-bg: rgb(var(--bg-color3));
    --toggle-border-color: transparent;
    --toggle-icon-color: rgb(var(--txt-color2));
    --toggle-roundness: 0;
 
    /* Rating Module */
    --rating-module-button-color: var(--bg-color2);
    --rating-module-button-cancel-color: var(--bg-color4);
    --rating-module-button-credit-color: var(--bg-color4);
    --rating-module-text-color: var(--txt-color1);
    --rating-module-text-hover-color: var(--txt-color2);
 
    /* Footnote Hoverbox */
    --hoverblock-bg: var(--bg-color2);
    --hoverblock-txt: var(--txt-color1);
    --hoverblock-header-bg: var(--bg-color3));
    --hoverblock-header-txt: var(--txt-color2);
    --hoverblock-footer-bg: var(--bg-color2);
    --hoverblock-footer-txt: var(--txt-color1);
 
    /* Modal */
    --modal-bg: var(--bg-color1);
    --modal-body-text: var(--txt-color1);
    --modal-body-header-txt: var(--txt-color1);
    --modal-header-txt: var(--txt-color2);
    --modal-header-bg: var(--bg-color3);
    --modal-header-stripe: var(--bg-color3);
 
    /* BetterFootnotes */
    --fnColor: rgb(var(--txt-color3));
    --posX: calc(50% + var(--body-width-on-desktop) / 2 + 2.5rem);
}
 
/* HEADER*/
#header {
    --swatch-headerh1-color: var(--txt-color1);
    --swatch-headerh2-color: var(--txt-color1);
 
    --search-icon-color: var(--txt-color1);
    --search-icon-hover-color: var(--txt-color2);
    --search-icon-hover-bg-color: var(--bg-color3);
 
    --search-icon-focus-color: var(--txt-color2);
    --search-icon-focus-bg-color: var(--bg-color3);
    --search-focus-outline-color: transparent;
    --search-focus-textbox-bg-color: var(--bg-color2);
    --search-focus-textbox-text-color: var(--txt-color1);
 
    --login-username-color: var(--txt-color1);
    --login-line-divider-color: var(--txt-color1);
    --login-myaccount-color: var(--txt-color1);
    --login-myaccount-hover-color: var(--txt-color2);
    --login-myaccount-underline-color: var(--bg-color3);
    --login-myaccount-hover-bg-color: var(--bg-color3);
 
    --login-dropdown-text-color: var(--txt-color1);
    --login-dropdown-bg-color: var(--bg-color2);
    --login-dropdown-bg-image: var(--bg-color2);
    --login-dropdown-border-color: transparent;
    --login-dropdown-text-hover-color: var(--txt-color2);
    --login-dropdown-bg-hover-color: var(--bg-color3);
}
 
/* Logo Changes */
/* Use https://codepen.io/sosuke/pen/Pjoqqp to filter the image color from black. */
:root {
    --logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(25%);
}
 
#header::before {
    filter: var(--logo-filter);
}
 
/* Outline Correction */
#header h1 a::before {
    content: "";
}
 
#header h2 span::before {
    content: "";
}
 
/* Position Correction */
#header h1,
#header h1 a,
#header h1 a::before {
    top: -.25rem;
}
 
/* Login Arrow */
#login-status #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton:hover::before {
    --clip-path: polygon(30% 30%, 70% 30%, 50% 65%);
}
 
#login-status #account-options li>a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#login-status #account-options li>a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* Mobile Corrections */
@media only screen and (max-width:56.25rem) {
    :root {
        --body-width-on-desktop: 100vw;
        --header-h1-font-size: calc(2rem + (.02 * (100vw - 20rem)));
        --header-h2-font-size: calc(var(--base-font-size) * 1.25);
    }
}
 
/* SELECTION */
::-moz-selection {
    background: rgba(var(--bg-color3), 1);
    color: rgb(var(--txt-color2));
    text-shadow: none;
    }
 
::selection {
    background: rgba(var(--bg-color3), 1);
    color: rgb(var(--txt-color2));
    text-shadow: none;
    }
 
/* TOPBAR */
#top-bar {
    --topmenu-category-color: var(--txt-color1);
    --topmenu-category-hover-color: var(--txt-color2);
    --topmenu-category-hover-bg: var(--bg-color3);
    --topmenu-hover-border-color: transparent;
 
    --mobile-topmenu-sidebar-button-color: var(--bg-color3);
 
    --dropdown-bg-color: var(--bg-color2);
    --dropdown-border-color: transparent;
    --dropdown-links-color: var(--txt-color1);
    --dropdown-links-hover-color: var(--txt-color2);
    --dropdown-links-hover-bg-color: var(--bg-color3);
 
    --topbar-height-on-desktop: 2rem;
    --topbar-height-on-mobile: 2rem;
}
 
#header div[class*=top-bar]>ul>li>ul li>a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#header div[class*=top-bar]>ul>li>ul li>a:active:before,
#header div[class*=top-bar]>ul>li>ul li>a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* SIDEBAR */
#side-bar {
    --sidebar-bg-color: var(--bg-color1);
    --sidebar-resources-bg-color: var(--bg-color2);
    --sidebar-media-bg-color: var(--bg-color2);
 
    --sideblock-heading-border-color: transparent;
 
    --sidebar-border-color: var(--bg-color1);
 
    --sidebar-links-text: var(--txt-color1);
    --sidebar-links-hover-bg-color: var(--bg-color3);
    --sidebar-links-hover-text-color: var(--txt-color2);
}
 
#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
    text-transform: none;
    text-align: left;
    font-size: .95rem;
    text-indent: 0;
}
 
/* Background Changes */
@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #main-content::before {
            background: rgba(var(--bg-color2), .5) 1px 1px repeat;
            backdrop-filter: blur(.1rem);
            }
        }
    }
 
/* BREADCRUMBS */
#breadcrumbs a:before,
#breadcrumbs a:visited:before,
.pseudocrumbs a:before,
.pseudocrumbs a:visited:before {
    padding: 0;
    transform: skew(0deg);
    color: rgb(var(--txt-color3));
    box-shadow: inset 0 -.125rem 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1), color 300ms cubic-bezier(.4, 0, .2, 1), padding 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
}
 
#breadcrumbs a:active:before,
#breadcrumbs a:hover:before,
.pseudocrumbs a:active:before,
.pseudocrumbs a:hover:before {
    padding: 0;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}
 
/* SCROLLBAR*/
html,
body {
    scrollbar-color: rgb(var(--bg-color3)) rgb(var(--bg-color2));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 16px;
    background: transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgb(var(--bg-color2));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--bg-color3));
}
 
/* TITLE */
#page-title::before,
.meta-title::before {
        content: none;
    }
 
#page-title::after,
.meta-title::after{
height: .125rem;
}
 
/* CONTENT*/
#main-content {
    /* UI */
    --ui-icon-color: var(--txt-color1);
    --ui-icon-bg: var(--bg-color2);
    --ui-icon-hover-color: var(--txt-color2);
    --ui-icon-hover-bg: var(--bg-color3);
 
    /* Table of Contents */
    --toc-header-bg-color: var(--bg-color3);
    --toc-header-text-color: var(--txt-color2);
    --toc-header-text-hover-color: var(--txt-color2);
    --toc-body-bg-color: var(--bg-color2);
    --toc-directory-lines-color: var(--bg-color2);
    --toc-body-link-color: var(--txt-color1);
    --toc-body-link-hover-color: var(--txt-color3);
    --toc-body-hover-arrow-color: var(--txt-color3);
 
    /* Tabs */
    --tabs-bg: var(--bg-color2);
    --tabs-txt: var(--txt-color1);
    --tabs-hover-bg: var(--bg-color3);
    --tabs-hover-txt: var(--txt-color2);
    --tabs-selected-bg: var(--bg-color3);
    --tabs-selected-txt: var(--txt-color2);
    --tabs-selected-outline: var(--bg-color3);
    --tabs-bottom-border-color: var(--bg-color3);
    --tabs-content-bg-color: var(--bg-color2);
    --tabs-content-border-color: var(--bg-color2);
 
    /* Footnote Block */
    --footnotes-footer-bg-color: var(--bg-color2);
    --footnotes-footer-colorbar-color: var(--bg-color3);
    --footnotes-footer-title-bg-color: var(--bg-color3);
    --footnotes-footer-title-text-color: var(--txt-color2);
    --footnotes-footer-num-color: var(--txt-color3);
    --footnotes-footer-num-hover-color: var(--txt-color3);
 
    /* Editor*/
    --editor-icon-color: var(--txt-color1);
    --editor-icon-bg: var(--bg-color1);
    --editor-icon-hover-color: var(--txt-color2);
    --editor-icon-hover-bg: var(--bg-color3);
    --editor-icon-submenu-bg: var(--bg-color3);
 
    /* Tags */
    --pagetags-title-bg: var(--bg-color3);
    --pagetags-title-text: var(--txt-color2);
    --pagetags-text-color: var(--txt-color1);
    --pagetags-text-hover-color: var(--txt-color2);
    --pagetags-text-hover-bg-color: var(--bg-color3);
}
 
/* RATING MODULE */
#page-content .rate-box-with-credit-button, .page-rate-widget-box {
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
/* Credit */
#page-content .rate-box-with-credit-button>.creditButton>p>a:after {
    background-color: rgb(var(--bg-color3));
}
 
/* POPUP */
div.odialog-shader{
    background-color: rgba(var(--bg-color3), .5) 1px 1px repeat;
    backdrop-filter: blur(.1rem);
}
 
#odialog-container div.owindow {
    box-shadow: none;
}
 
/* Header */
.owindow .modal-header {
    background-color: rgb(var(--bg-color2));
}
 
.owindow .title {
    color: var(--txt-color2);
    background-color: rgb(var(--bg-color3));
    border: none;
}
 
/* Body */
#odialog-container .content h1,
#odialog-container .modal-body h1 {
    box-shadow: none;
}
 
/* Footer */
#odialog-container .modal-footer {
    box-shadow: none;
}
 
/* Button Correction */
#odialog-container .title.modal-header :not(.page-rate-widget-box) :not(#search-top-box-form) > a.btn {
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:active,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:hover,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:focus-within {
    color: rgb(var(--txt-color2));
    background-color: rgb(var(--bg-color3));
    border: none;
}
 
/* DETAILS */
/* Watch */
div.page-watch-options a {
    padding: 0.15em;
    text-decoration: none !important;
    box-shadow: inset 0 -0.125em 0 0 rgba(var(--bg-color3), 1) !important;
    transition: box-shadow 300ms cubic-bezier(.4, .0, .2, 1), color 300ms cubic-bezier(.4, .0, .2, 1), padding 300ms cubic-bezier(.4, .0, .2, 1), margin 300ms cubic-bezier(.4, .0, .2, 1) !important;
}
 
div.page-watch-options a:hover {
    padding: .3em .25em .2em .25em !important;
    text-decoration: none !important;
    color: rgb(var(--txt-color2)) !important;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1) !important;
}
 
/* Revision */
#page-info {
    margin: .25em;
    font-family: var(--body-font) !important;
    font-size: .75rem !important;
}
 
div#page-info .odate {
    --MONO: 0;
    font-family: var(--body-font);
    font-size: .75rem;
}
 
/* TAGS*/
.page-tags span a {
    padding: .15em;
    color: rgb(var(--txt-color1));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 -.125em 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, .0, .2, 1), color 300ms cubic-bezier(.4, .0, .2, 1), padding 300ms cubic-bezier(.4, .0, .2, 1), margin 300ms cubic-bezier(.4, .0, .2, 1);
}
 
.page-tags span a:hover {
    padding: .3em .25em .2em .25em;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}
 
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):before,
#main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]):before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):active:before,
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* ACTION AREA */
#action-area > p {
    background-color: rgb(var(--bg-color2)) !important;
    box-shadow: none !important;
}
 
#action-area a[onclick*=PageRateModule],
#action-area a.action-area-close,
table.page-history tr td.optionstd a,
body.print-body #print-options a,
#site-tools-box ul.nav li a,
#action-area h1+p+h2~div[style="padding-left:3em;"] > div a {
    border: none;
    box-shadow: none;
}
 
/* EDITOR */
/* Title */
#action-area h1:after {
    height: .125rem;
}
 
/* Border */
form#edit-page-form:not(.data-form),
form#edit-page-form .wd-editor-toolbar-panel {
    box-shadow: none;
}
 
/* Title */
form#edit-page-form #edit-page-title {
    background-color: rgb(var(--bg-color2));
}
 
form#edit-page-form #edit-page-title:focus-visible {
    background-color: rgb(var(--bg-color1));
    border: none;
}
 
/* Text Area */
form#edit-page-form #edit-page-textarea {
    border: none;
}
 
form#edit-page-form #edit-page-textarea:focus {
    border: none;
}
 
form#edit-page-form #wd-editor-toolbar-panel+div {
    box-shadow: none;
}
 
/* Help */
form#edit-page-form .edit-help-34 {
    background-color: rgb(var(--bg-color2));
}
 
/* Size Buttons */
form#edit-page-form .change-textarea-size {
    grid-gap: 0em;
    gap: 0em;
    background-color: rgb(var(--bg-color2));
}
 
form#edit-page-form .change-textarea-size a:active,
form#edit-page-form .change-textarea-size a:hover{
    border: .125rem solid rgb(var(--bg-color3));
}
 
/* Edit Comments */
form#edit-page-form #edit-page-comments {
    background-color: rgb(var(--bg-color2));
}
 
form#edit-page-form #edit-page-comments:focus-visible {
    background-color: rgb(var(--bg-color1));
    border: none;
}
 
/* HISTORY */
/* Per Page */
select#h-perpage {
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
/* Pager */
#action-area .pager span.current:not(:last-of-type)::before {
    display: none;
}
 
.pager .current {
    color: rgb(var(--txt-color2));
}
 
/* List*/
#revision-list .page-history tr:first-child {
    display: none;
}
 
table.page-history tr:nth-of-type(odd) {
    background-color: rgb(var(--bg-color2));
}
 
/* SOURCE */
.page-source {
    border: none;
    background-color: rgb(var(--bg-color2));
}
 
/* FOOTER */
/* Footer */
#footer {
    --footer-bg-color: var(--bg-color2);
    --footer-text-color: var(--txt-color1);
    --footer-link-color: var(--txt-color1);
    --footer-link-hover-color: var(--txt-color2);
    --footer-link-hover-bg-color: var(--bg-color3);
}
 
#footer a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#footer a:active:before,
#footer a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* Buttons */
:not(.page-rate-widget-box):not(#search-top-box-form)>.btn,
:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input {
    border: none !important;
    box-shadow: none !important;
}
 
#odialog-container div.owindow {
    box-shadow: none;
}
 
/* License Area */
#license-area {
    --license-bg-color: var(--bg-color2);
    --license-text-color: var(--txt-color1);
    --license-link-color: var(--txt-color1);
    --license-link-hover-color: var(--txt-color2);
    --license-link-hover-bg-color: var(--bg-color3);
}
 
#license-area a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#license-area a:active:before,
#license-area a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* COMPONENTS */
/* Table of Contents */
#page-content div#toc {
    box-shadow: none;
}
 
/* Horizontal Rule */
hr {
        height: .125rem;
        margin: 1.25rem 0;
        background-color: rgb(var(--bg-color3));
        border-top: none;
}
 
/* Link */
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(#toc #toc-list a):not(#toc #toc-list a:visited):not(.fa.fa-info):not(.linkbox a):not(#action-area .btn):not(#rename-option-rename a):not(.danger-diamond a) {
    padding: .15em;
    margin: -.15em;
    color: rgb(var(--txt-color1));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 -.125rem 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1), color 300ms cubic-bezier(.4, 0, .2, 1), padding 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover:not(#toc #toc-list a):not(#toc #toc-list a:visited):not(.fa.fa-info):not(.linkbox a):not(#action-area .btn):hover:not(#rename-option-rename a):hover:not(.danger-diamond a):hover {
    padding: .3em .25em .2em .25em;
    margin: -.25em;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}
 
/* Collapsible */
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
    background: rgb(var(--bg-color2));
    transition: background .25s linear;
}
 
#page-content .collapsible-block-link {
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: rgb(var(--txt-color1));
    font-weight: 700;
}
 
#page-content .collapsible-block-link:hover {
    color: rgb(var(--txt-color2));
}
 
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {
    background: rgb(var(--bg-color3));
}
 
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0rem -.25rem 0rem 0rem rgb(var(--bg-color3));
}
 
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    margin-top: .75rem;
    margin-bottom: .75rem;
}
 
/* Image Block */
.scp-image-block {
    box-sizing: border-box;
    border: none;
    bottom-border: none;
    box-shadow: none;
}
 
:is(div.image-block, div.scp-image-block) {
    box-shadow: none;
}
 
:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
}
 
.block-right:is(div.image-block,div.scp-image-block) {
    margin: 1.25em 0 1.25em 1.25em;
}
 
.block-center:is(div.image-block,div.scp-image-block) {
    margin: 1.25em auto;
}
 
@media only screen and (max-width: 600px) {
    .scp-image-block {
        float: none;
        margin: 1.25rem auto;
    }
}
 
/* BetterFootnotes */
.fnnum::after {
    padding: .125rem;
}
 
.fncon {
    left: var(--posX);
    background: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
    padding: 1rem;
    width: 12rem;
}
 
.fncon::before {
    color: rgb(var(--txt-color2));
}
 
@media only screen and (max-width: 58.125rem) {
    .fncon {
        position: fixed;
        bottom: 1.25rem;
        left: calc(27.125vw - 3.125rem);
        width: 75%;
        transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.4, 0, .2, 1) var(--fnLinger), visibility 0.01s linear var(--fnInteract);
    }
 
    .fnnum:hover + .fncon, .fncon:hover {
        left: 27.125vw;
        transition: opacity 0.15s linear, left var(--fnTransition)  cubic-bezier(.4, 0, .2, 1);
    }
}
 
/* STANDARD */
/* Blockquote */
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
}
 
/* Code */
.code {
    margin: 1.25em;
    padding: .825em 1.75em .825em 1.25em;
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3));
}
 
.hl-code,
.hl-identifier,
.hl-brackets {
    color: rgb(var(--txt-color1));
}
 
.hl-var {
    color: rgb(76, 160, 108);
}
 
.hl-reserved {
    color: rgb(67, 135, 190);
}
 
.hl-number,
.hl-string {
    color: rgb(197, 38, 50);
}
 
.hl-quotes,
.hl-special {
    color: rgb(98, 60, 122);
}
 
/* Table */
 #page-content .wiki-content-table tbody tr th {
    padding: .4rem;
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
    border: .125rem solid rgb(var(--bg-color3)) !important;
}
 
 #page-content .wiki-content-table tbody tr td {
    padding: .8rem;
    line-height: 1.5;
    color: rgb(var(--txt-color1));
    background: rgb(var(--bg-color1));
    border: .125rem solid rgb(var(--bg-color3)) !important;
}
 
/* CUSTOM */
/* Label */
.label {
    padding: .125em;
    color: rgb(var(--txt-color2));
    white-space: nowrap;
    background: rgb(var(--bg-color3));
}
 
/* Memetic */
.memetic{
    filter: blur(.25rem);
}
 
/* Redaction */
.redaction{
    padding: .15em 0;
    color: rgb(var(--txt-color1));
    text-decoration: none;
    background-color: rgb(var(--txt-color1));
    transition: background-color 300ms cubic-bezier(.4, .0, .2, 1);
}
 
.redaction:hover {
    text-decoration: none;
    background-color: transparent;
}
 
/* Notation*/
.notation {
    margin: 1.25em;
    padding: .825em 1.75em .825em 1.25em;
    background-color: rgb(var(--bg-color1));
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3));
}
 
/* Jotting */
.jotting {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: 1px dashed rgb(var(--txt-color1));
}
 
/* Modal*/
.modal {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}
 
/* Translucent*/
.translucent{
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgba(var(--bg-color2), .5);
    backdrop-filter: blur(.1rem);
}
 
/* Floatbox */
/* Adapted from Basalt */
#page-content div.floatbox {
    float: right;
    max-width: calc(var(--body-width-on-desktop)/2.5);
    box-sizing: border-box;
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
@media only screen and (max-width: 600px) {
    #page-content div:is(.floatbox) {
    float: none;
    width: 100%;
    margin: 1.25em;
    }
}
 
/* Document */
/* Adapted from Basalt */
.document {
    display: block;
    position: relative;
    max-width: 45rem;
    margin: 1.25em 1.25em 2.25em 1.25em;
    padding: 1.25em;
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 10px rgba(var(--bg-color4), .5);
}
 
.document::before {
    top: 5px;
    left: -5px;
    transform: rotate(-2.5deg);
}
 
.document::after {
    top: 2.5px;
    right: -2.5px;
    transform: rotate(1.25deg);
}
 
.document::before,
.document::after {
    content: "";
    position: absolute;
    z-index: -1;
    height: 98%;
    width: 98%;
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 10px rgba(var(--bg-color4), .5);
}
 
@media only screen and (max-width: 1020px) {
.document::before,
.document::after {
        display: none;
    }
}
 
/* Table Color */
/* Adapted from BLANKSTYLE CSS */
:root {
    --table0-bg-color: 56, 49, 49;
    --table1-bg-color: var(--one-color);
    --table2-bg-color: var(--two-color);
    --table3-bg-color: var(--three-color);
    --table4-bg-color: var(--four-color);
    --table5-bg-color: var(--five-color);
    --table6-bg-color: var(--six-color);
 
    --table0-txt-color: var(--white-monochrome);
    --table1-txt-color: var(--white-monochrome);
    --table2-txt-color: var(--white-monochrome);
    --table3-txt-color: var(--gray-monochrome);
    --table4-txt-color: var(--white-monochrome);
    --table5-txt-color: var(--white-monochrome);
    --table6-txt-color: var(--white-monochrome);
}
 
.table0 {
    --bg-color3: var(--table0-bg-color);
    --txt-color2: var(--table0-txt-color);
}
 
.table1 {
    --bg-color3: var(--table1-bg-color);
    --txt-color2: var(--table1-txt-color);
}
 
.table2 {
    --bg-color3: var(--table2-bg-color);
    --txt-color2: var(--table2-txt-color);
}
 
.table3 {
    --bg-color3: var(--table3-bg-color);
    --txt-color2: var(--table3-txt-color);
}
 
.table4 {
    --bg-color3: var(--table4-bg-color);
    --txt-color2: var(--table4-txt-color);
}
 
.table5 {
    --bg-color3: var(--table5-bg-color);
    --txt-color2: var(--table5-txt-color);
}
 
.table6 {
    --bg-color3: var(--table6-bg-color);
    --txt-color2: var(--table6-txt-color);
}
 
/* Memo */
/* Adapted from Basalt*/
:root {
    --memo-txt-color: var(--txt-color1);
    --memo-logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(20%);
    --memo-size: 5rem;
}
 
div[class$="-memo"] {
    color: rgb(var(--memo-txt-color));
    min-height: var(--memo-size);
    margin: 2.25rem auto;
    padding: 1.25rem;
    text-align: center;
    background: rgb(var(--memo-bg-color));
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    backdrop-filter: blur(.1rem);
}
 
div[class$="-memo"]::before{
    color: rgb(var(--memo-txt-color));
    z-index: 2;
    content: var(--memo-header);
    display: flex;
    flex-direction: column;
    margin: 0 auto 1.25rem auto;
    padding-top: .5em;
    font-family: var(--UI-font);
    font-weight: 700;
    font-size: 1.25em;
    text-align: center;
}
 
div[class$="-memo"]::after{
    content: "";
    position: absolute;
    height: 15rem;
    width: 15rem;
    top: 50%;
    left: 50%;
    margin-top: -7.5rem;
    margin-left: -7.5rem;
    min-height: var(--memo-size);
    background: var(--memo-logo);
    filter: var(--memo-logo-filter);
    background-size: calc(1.5 * var(--memo-size));
    background-repeat: no-repeat;
    background-position: center center;
}
 
div[class$="-memo"] > * {
    position: relative;
    z-index: 2;
}
 
.overwatch-memo {
    --memo-header: "Overwatch Command Directive";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/o5-logo.svg);
    --memo-bg-color: 252, 217, 217;
}
 
.ethics-memo {
    --memo-header: "Ethics Committee Memorandum";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/ec-logo.svg);
    --memo-bg-color: 217, 231, 252;
}
 
.raisa-memo {
    --memo-header: "Records and Information Security Administration Notice";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/raisa-logo.svg);
    --memo-bg-color: 252, 245, 196;
}
 
/* Shadow */
.shadow {
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}
 
.blockquote.shadow {
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}
 
.notation.shadow,
.code.shadow {
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3)), 0 0 5px rgba(var(--bg-color4), .5);
}
 
/* Headline */
.headline {
    padding: 0;
    margin: .5rem 1.25rem;
    background: none;
    border: none;
}
 
.headline > p {
    --wght: 700;
    font-size: 1.5em;
    font-family: var(--title-font);
    text-align: center;
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
    padding: .5rem 1.25rem;
    margin: 0;
}
 
.headline > div {
    position: relative;
    padding: .5rem 1.25rem;
    border-top: none;
    margin: 0;
}
 
/* Logo */
:root {
    --logo1-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --logo2-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --logo3-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
 
    --logo-bg-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(20%);
    --logo-bg-size: 15rem;
}
 
.logo1,
.logo2,
.logo3 {
    position: relative;
}
 
.logo1::after,
.logo2::after,
.logo3::after {
    content: "";
    position: absolute;
    height: 40vw;
    width: 40vw;
    top: 50%;
    left: 50%;
    margin-top: -20vw;
    margin-left: -20vw;
    min-height: 15rem;
    filter: var(--logo-bg-filter);
}
 
.logo1 > *,
.logo2 > *,
.logo3 > * {
    position: relative;
    z-index: 2;
}
 
.logo1::after {
    background: var(--logo1-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.logo2::after {
    background: var(--logo2-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.logo3::after {
    background: var(--logo3-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
/* Proposal */
:root {
    --proposal-logo1: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --proposal-logo2: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --proposal1-logo3: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
 
    --proposal-logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%);
    --proposal-logo-size: 15rem;
}
 
.proposal-logo1,
.proposal-logo2,
.proposal-logo3 {
    min-height: 15rem;
    filter: var(--proposal-logo-filter);
}
 
.proposal-logo1 {
    background: var(--proposal-logo1);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.proposal-logo2 {
    background: var(--proposal-logo2);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.proposal-logo3 {
    background: var(--proposal-logo3);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.proposal-title {
    font-size: 2em;
}
 
.proposal-subtitle {
    font-size: 1.5em;
}
 
.proposal-title,
.proposal-subtitle {
    position: relative;
    margin: .5rem 1.25rem;
    margin-bottom: 0;
    padding: .5rem 1.25rem;
    padding-bottom: 0;
    --wght: 700;
    font-family: var(--title-font);
    text-align: center;
    color: rgb(var(--txt-color1));
}
 
.proposal-title p,
.proposal-subtitle p {
    margin: 0;
}
 
.proposal-author {
font-style: italic;
text-align: right;
}
 
/* Transcript */
.flank {
    --wght: 700;
    text-align: center;
}
 
.flank p {
    margin: 0;
}
 
.transcript {
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: rgb(var(--txt-color1));
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-auto-rows: minmax(1em, auto);
}
 
.transcript p {
    margin: 0;
}
 
.sp {
    border-right: 1px solid rgb(var(--txt-color1));
    padding: .825em .825em 0 .825em;
    --wght: 700;
    text-align: right;
}
 
.di {
    padding: .825em 0 0 .825em;
}
 
.ac {
    padding: .825em 0 0 .825em;
    font-style: italic;
}
 
/* Mobile Correction */
@media only screen and (max-width: 56.25rem) {
    .transcript {
        display: inline;
    }
 
    .transcript::after {
        content: "\000a";
        white-space: pre;
    }
 
    .transcript .sp,
    .transcript .di,
    .transcript .ac {
        display: inline;
        padding: 0;
        margin: 0;
    }
 
    .sp::before,
    .di::before,
    .ac::before {
        content: "\000a";
        white-space: pre;
    }
 
    .sp {
        float: left;
        width: fit-content;
        border-right: none;
    }
 
    .sp p::after {
        content: ":\00a0"
    }
}
 
/* Linkbox*/
.linkbox {
    display: block;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin: .75rem auto;
    background: rgb(var(--bg-color2));
    transition: background .25s linear;
}
 
.linkbox p {
    margin: 0;
}
 
.linkbox a {
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: rgb(var(--txt-color1));
    font-weight: 700;
}
 
.linkbox:hover {
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
}
 
.linkbox a:hover {
    color: rgb(var(--txt-color2));
}
 
/* Mode Changer */
:root {
    --mode1-display: inline;
    --mode2-display: none;
}
 
.mode1-changer {
    display: var(--mode1-display);
}
 
.mode2-changer {
    display: var(--mode2-display);
}
 
/* Member Changer */
.member-changer {
    display: inline;
    padding: 0 !important;
    margin: 0 !important;
}
 
.member-changer > .site-member {
    display: inline;
    padding: 0;
    margin: 0;
}
 
.member-changer .site-member:nth-child(2) {
    display: none;
}

/* DARK */
:root {
    /* Primary Colors */
    --accent-color: 197, 38, 50;
 
    --bg-color1: var(--black-monochrome);
    --bg-color2: var(--dark-gray-monochrome);
    --bg-color3: var(--accent-color);
    --bg-color4: var(--black-monochrome);
 
    --txt-color1: var(--pale-gray-monochrome);
    --txt-color2: var(--pale-gray-monochrome);
    --txt-color3: var(--accent-color);
    --txt-color4: var(--black-monochrome);
 
    /* Logo Changes */
    --logo-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%) opacity(25%);
 
    /* Fixing the Text Color in a Single Dark Mode Theme Square */
    --swatch-text-dark: var(--black-monochrome);
 
    /* Color Table */
    --table0-txt-color: var(--pale-gray-monochrome);
    --table1-txt-color: var(--pale-gray-monochrome);
    --table2-txt-color: var(--pale-gray-monochrome);
    --table3-txt-color: var(--black-monochrome);
    --table4-txt-color: var(--pale-gray-monochrome);
    --table5-txt-color: var(--pale-gray-monochrome);
    --table6-txt-color: var(--pale-gray-monochrome);
 
    /* Logo Background */
    --logo-bg-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%) opacity(25%);
 
    /* Proposal Logo */
    --proposal-logo-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%);
 
    /* Memo */
    --memo-txt-color: var(--txt-color4);
    --memo-logo-filter: invert(0%) sepia(55%) saturate(3607%) hue-rotate(44deg) brightness(94%) contrast(89%) opacity(25%);
 
    /* Mode Changer */
    --mode1-display: none;
    --mode2-display: inline;
}
 
/* Document */
.document {
    background-color: rgb(var(--bg-color2));
}
 
.document::before,
.document::after {
    background-color: rgb(var(--bg-color2));

/* WIDE */
#main-content {
    --body-width-on-desktop: 60vw;
    --header-width-on-desktop: 60vw;
}
 
@media only screen and (max-width: 78.75rem) {
    .fncon {
        position: fixed;
        bottom: 1.25rem;
        left: calc(20vw - 3.125rem);
            width: 75%;
        transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.4, 0, .2, 1) var(--fnLinger), visibility 0.01s linear var(--fnInteract);
    }
 
    .fnnum:hover + .fncon, .fncon:hover {
        left: 20vw;
        transition: opacity 0.15s linear, left var(--fnTransition)  cubic-bezier(.4, 0, .2, 1);
    }
}

/* HIDE TITLE */
#page-title {
    display: none !important;
}

---

+ Show component code

:root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        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,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }

+ Show component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @supports (-webkit-hyphens:none) { 
            #side-bar {
                transition:
                    left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                padding-right: 0;
                background-color: rgb(0, 0, 0, 0);
                pointer-events: all;
                overflow-x: visible;
                overflow-y: visible;
                z-index: 999;
            }
 
            #side-bar::-webkit-scrollbar {
                opacity: 0;
                -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            }
 
            #side-bar .close-menu::before {
                z-index: 999;
            }
 
            #side-bar .close-menu::after {
                z-index: 998;
            }
 
            #side-bar:hover .close-menu::before,
            #side-bar:hover .close-menu::after {
                opacity: 0;
            }
 
            #side-bar:hover {
                left: 0;
                background-color: rgba(var(--swatch-menubg-color), 1);
                padding-right: 0;
            }
 
            #side-bar:hover::-webkit-scrollbar {
                opacity: 1;
            }
 
            #side-bar:hover~#main-content::before {
                width: calc(100% - var(--sidebar-width-on-desktop));
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}