Flopstyle: DARK

Link to article: Flopstyle: DARK.

/* DOCUMENTATION */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/documentation.css);

 :root {
     --header-title: "FLOPSTYLE: DARK";
     --header-subtitle: "SUBVERSIVE CSS PHILOSOPHY";
     --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png) !important;
}

/* BACK TO TOP */
 span.top {
    display: flex;

    font-size: 1.05rem;
}

 span.top a {
    margin: .4rem auto -.4rem;
    padding: 5px 9px 5px 8px !important;

    color: var(--alphaColor);
    background: var(--accentColor);
    border: 0 !important;
    border-radius: 50%;

    font-weight: bold;
}

 span.top a:hover {
    color: var(--keyColor);
}

 .code.terminal.variant,
 .code.terminal-subvariant {
    text-align: center;
}

 .code.terminal.variant p,
 .code.terminal.subvariant p {
    text-align: left;
}

 .code.terminal.variant p {
    padding: 0;
}

 div.bookshelf {
    display: flex;
    flex-flow: column wrap;
    gap: 0 1rem;
    justify-content: center;
}

 div.bookshelf > * {
    flex-basis: 0;
}

 div.bookshelf > * > .image-container {
    padding: 0 0 .5rem;
}

 @media (min-width: 768px) {
     .code.terminal.variant p {
    	padding: 0 7rem;
    }

     div.bookshelf {
    	flex-flow: row wrap;
    }

     div.bookshelf > * {
    	flex: 1 20.5rem;
    }
}

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/1);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/2);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/3);

@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/inferno.css);

@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/maple.css);

@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/plastic.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/prairie.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/seafoam.css);

@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/threshold.css);

@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/vanguard.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witch.css);

/* BOOK OF ASHES */
 :root {
    --accentColor: hsl(360, 65%, 65%);
    --accentColorLite: hsla(360, 65%, 75%, .5);
    --hue: 360deg;

    --bgColor: hsl(360, 6%, 21%);
    --fgColor: hsl(360, 8%, 15%);
}

 #header h1 a::after {
    content: "BOOK OF ASHES";
}

/* BOOK OF LIGHT */
 :root {
    --accentColor: hsl(45, 50%, 50%);
    --accentColorLite: hsla(45, 50%, 60%, .5);
    --hue: 45deg;

    --bgColor: hsl(45, 1.5%, 21%);
    --fgColor: hsl(45, 2%, 15%);
}

 #header h1 a::after {
    content: "BOOK OF LIGHT";
}

/* NOTES FROM THE GREEN YONDER */
 :root {
    --accentColor: hsl(135, 55%, 55%);
    --accentColorLite: hsla(135, 55%, 65%, .5);
    --hue: 135deg;

    --bgColor: hsl(135, 3%, 21%);
    --fgColor: hsl(135, 4%, 15%);
}

 #header h1 a::after {
    content: "THE GREEN YONDER";
    margin-top: -2.25em;

    font-size: 1.15rem;
}

/* LOOSE THREADS */
 :root {
    --accentColor: hsl(225, 65%, 65%);
    --accentColorLite: hsla(225, 65%, 75%, .5);
    --hue: 225deg;

    --bgColor: hsl(225, 6%, 21%);
    --fgColor: hsl(225, 8%, 15%);
}

 #header h1 a::after {
    content: "LOOSE THREADS";
}

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/galaxias.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/pedagogy.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/chthonian.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/monster.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/rhizome.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/syzygy.css);

@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witching-hour.css);

@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/peenumbra.css);

```
display: none
```
```
width: 200px; padding: 2.5rem
```
```
padding-bottom: 1rem
```

background: var(--accentColor); border-color: hsl(325, 88%, 81%)

background: var(--accentColorLite); border-color: hsla(325, 88%, 91%, .5)

background: var(--bgColor); border-color: hsl(222, 62%, 63%)

```
font-family: var(--header-font)
```
```
font-family: var(--body-font)
```

background: var(--accentColor); border-color: hsl(325, 88%, 81%)

background: var(--accentColor); border-color: hsl(325, 88%, 81%)

```
outline-color: hsl(215, 30%, 21%)
```
```
outline-width: 3px
```
```
outline-width: 3px
```
```
outline-width: 3px
```
```
outline-width: 3px
```
```
outline-color: hsl(216, 33%, 40%)
```
```
outline-color: hsl(215, 73%, 63%)
```
```
outline-color: hsl(0, 94%, 6%)
```
```
outline-color: hsl(285, 20%, 9%)
```
```
outline-color: hsl(345, 6%, 10%)
```
```
outline-color: hsl(220, 20%, 10%)
```

outline-color: hsl(60, 77%, 82%); filter: brightness(.95) opacity(.95) saturate(.95)

```
font-family: var(--mono-font)
```
```
letter-spacing: .3rem
```
```
font-variant: all-small-caps
```
```
font-variant: all-small-caps
```
```
overflow: hidden
```
```
font-size: 85%
```
```
text-indent: 0
```
```
font-size: 125%
```
```
font-size: 125%
```
```
font-family: var(--mono-font)
```
```
text-align: left
```
```
text-align: left
```
```
font-family: var(--mono-font)
```

font-family: var(--script-font); font-size: 1.3rem

```
limit
```
```
anchor
```
```
authorbox
```
```
tableb
```
```
bt
```
```
bb
```
```
flavorbox
```
```
flavorbox
```
```
sml
```
```
limit
```
```
anchor
```
```
sidebox
```
```
table1
```
```
tableb
```
```
flavorbox
```
```
meta-title
```
```
DARK-title
```
```
pseudocrumbs
```
```
templateInfo
```
```
templateInfo
```
```
templateInfo
```
```
templateInfo
```
```
templateInfo
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templatePadding
```
```
terminal-span
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
pointer
```
```
pointer
```
```
fnnum
```
```
fncon
```
```
bt
```
```
bb
```
```
tableb
```
```
templateInfo
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templatePadding
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
tableb
```
```
templateInfo
```
```
templateInfo
```
```
tb
```
```
templateInfo
```
```
templateMargin
```
```
templateInfo
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
col_box
```
```
col_box
```
```
bt
```
```
bb
```
```
bt
```
```
bb
```
```
col_box
```
```
wt
```
```
templateInfo
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templateMargin
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
col_box
```
```
col_box
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templateMargin
```
```
templatePadding
```
```
code
```
```
terminal
```
```
tableb
```
```
templateInfo
```
```
templateMargin
```
```
bt
```
```
bb
```
```
table1
```
```
bt
```
```
bb
```
```
table1
```
```
templateInfo
```
```
bt
```
```
bh
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
centered
```
```
templateInfo
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
pointer
```
```
pointer
```
```
pointer
```
```
templateInfo
```
```
templateMargin
```
```
bt
```
```
bb
```
```
table1
```
```
table1
```
```
code
```
```
terminal
```
```
pointer
```
```
pointer
```
```
pointer
```
```
table1
```
```
table1
```
```
table1
```
```
table1
```
```
templateInfo
```
```
bt
```
```
bh
```
```
code
```
```
terminal
```
```
pointer
```
```
pointer
```
```
pointer
```
```
justified
```
```
limit
```
```
anchor
```
```
sidecontainer
```
```
limit
```
```
anchor
```
```
sidecontainer
```
```
limit
```
```
anchor
```
```
sidecontainer
```
```
templateInfo
```
```
templateMargin
```
```
templateInfo
```
```
templateInfo
```
```
templateMargin
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
bookshelf
```
```
demo
```
```
code
```
```
terminal
```
```
subvariant
```
```
demo
```
```
code
```
```
terminal
```
```
subvariant
```
```
demo
```
```
code
```
```
terminal
```
```
subvariant
```
```
demo
```
```
code
```
```
terminal
```
```
subvariant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
demo
```
```
code
```
```
terminal
```
```
variant
```
```
templateInfo
```
```
code
```
```
FL_parent
```
```
FL_child
```
```
FL_child
```
```
templateInfo
```
```
centered
```
```
templateInfo
```
```
templateSetup
```
```
templateInfo
```
```
templateSetup
```
```
bt
```
```
bb
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templateSetup
```
```
bt
```
```
bb
```
```
help
```
```
templateInfo
```
```
templateSetup
```
```
bt
```
```
bb
```
```
fnnum
```
```
fncon
```
```
bt
```
```
bb
```
```
templateInfo
```
```
templateSetup
```
```
code
```
```
terminal
```
```
imagediv
```
```
imagediv
```
```
centered
```
```
tableb
```
```
tableb
```
```
table1
```
```
table1
```
```
table1
```
```
table2
```
```
table2
```
```
table2
```
```
table3
```
```
table3
```
```
table3
```
```
table4
```
```
table4
```
```
table4
```
```
table5
```
```
table5
```
```
table5
```
```
table6
```
```
table6
```
```
table6
```
```
table0
```
```
table0
```
```
table0
```
```
table1
```
```
table1
```
```
table2
```
```
table2
```
```
table3
```
```
table3
```
```
table4
```
```
table4
```
```
table5
```
```
table5
```
```
table6
```
```
table6
```
```
table0
```
```
table0
```
```
templateInfo
```
```
content-warning
```
```
content-warning
```
```
centered
```
```
classification-header
```
```
classification-header
```
```
ethics-header
```
```
ethics-header
```
```
miscomm-header
```
```
miscomm-header
```
```
oracle-header
```
```
oracle-header
```
```
overwatch-header
```
```
overwatch-header
```
```
raisa-header
```
```
raisa-header
```
```
warning-header
```
```
warning-header
```
```
log-header
```
```
log-header
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
dashed
```
```
blockquote
```
```
dashed
```
```
blockquote
```
```
classic
```
```
blockquote
```
```
classic
```
```
blockquote
```
```
classic
```
```
curved
```
```
blockquote
```
```
classic
```
```
curved
```
```
blockquote
```
```
lightweight
```
```
blockquote
```
```
lightweight
```
```
blockquote
```
```
simple
```
```
blockquote
```
```
simple
```
```
blockquote
```
```
simple
```
```
larger
```
```
blockquote
```
```
simple
```
```
larger
```
```
darkbox
```
```
darkbox
```
```
lightbox
```
```
lightbox
```
```
report-box
```
```
report-box
```
```
report-box
```
```
red-tint
```
```
report-box
```
```
red-tint
```
```
report-box
```
```
orange-tint
```
```
report-box
```
```
orange-tint
```
```
report-box
```
```
yellow-tint
```
```
report-box
```
```
yellow-tint
```
```
report-box
```
```
green-tint
```
```
report-box
```
```
green-tint
```
```
report-box
```
```
cyan-tint
```
```
report-box
```
```
cyan-tint
```
```
report-box
```
```
blue-tint
```
```
report-box
```
```
blue-tint
```
```
report-box
```
```
magenta-tint
```
```
report-box
```
```
magenta-tint
```
```
report-box
```
```
grey-tint
```
```
report-box
```
```
grey-tint
```
```
overwatch-box
```
```
overwatch-box
```
```
page-source
```
```
page-source
```
```
narration
```
```
justified
```
```
indented
```
```
narration
```
```
justified
```
```
indented
```
```
journal
```
```
journal
```
```
highlighter
```
```
highlighter
```
```
journal
```
```
text-container-wrap
```
```
text-container
```
```
sent
```
```
text
```
```
recv
```
```
text
```
```
sent
```
```
text
```
```
recv
```
```
text
```
```
sent
```
```
text
```
```
recv
```
```
text
```
```
sent
```
```
text
```
```
text
```
```
recv
```
```
text
```
```
text
```
```
sent
```
```
text
```
```
hazard-box
```
```
hazard-box-6
```
```
hazard-box-image
```
```
hazard-box-image-6
```
```
hazard-box-text
```
```
code
```
```
terminal
```
```
pointer
```
```
pointer
```
```
pointer
```
```
centered
```
```
centered
```
```
centered
```
```
justified
```
```
justified
```
```
indented
```
```
indented
```
```
end-mark
```
```
end-mark
```
```
rev-red
```
```
rev-red
```
```
rev-yellow
```
```
rev-yellow
```
```
rev-green
```
```
rev-green
```
```
rev-blue
```
```
rev-blue
```
```
terminal-span
```
```
terminal-span
```
```
terminal-span
```
```
terminal-span
```
```
bt
```
```
bt
```
```
bt
```
```
bb
```
```
bt
```
```
bb
```
```
bt
```
```
bh
```
```
bt
```
```
bh
```
```
tb
```
```
tb
```
```
tb
```
```
bb
```
```
tb
```
```
bb
```
```
fancyhr
```
```
fancyhr
```
```
fancyborder
```
```
fancyborder
```
```
lite-heading
```
```
lite-heading
```
```
lite-heading
```
```
lite-heading
```
```
image-showcase
```
```
image-showcase
```
```
scene-break
```
```
scene-break
```
```
scene-break
```
```
icon-tint
```
```
scene-break
```
```
icon-tint
```
```
code
```
```
terminal
```
```
listPagesNav
```
```
listPagesNav-next
```
```
listPagesNav
```
```
listPagesNav-next
```
```
listPagesNav
```
```
listPagesNav-next
```
```
listPagesNav-prev
```
```
listPagesNav
```
```
listPagesNav-next
```
```
listPagesNav-prev
```
```
fade-away
```
```
fade-away
```
```
whiteout
```
```
whiteout
```
```
footing
```
```
footing
```
```
related-flex
```
```
related
```
```
related-flex
```
```
related
```
```
series-nav
```
```
series-nav
```
```
templateInfo
```
```
centered
```
```
top
```
```
tb
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```

[[div class="limit"]]
  [[div class="anchor"]]
    [[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]Byㅤ[[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

[[iftags +theme]]
      [[div class="flavorbox"]]
This is a working example of the {{authorbox}}. Consult the [#Sideboxes Sideboxes] subsection for further info.
      [[/div]]
      [[div class="flavorbox sml"]]
[[collapsible folded="no" show="Unfold" hide="Fold"]]
= **Navigation**
**I.** [#What What Is This?]
**II.** [#How How to Use]
@@   @@**1.** [#Cmpts Preloaded Components]
@@   @@**2.** [#CVars Custom Variables]
@@   @@**3.** [#FlopsHdr Flops Header]
@@   @@**4.** [#Sideboxes Sideboxes]
@@   @@**5.** [#Misc Misc. Changeable Portions]
@@   @@**6.** [#TVars Theme Variants]
**III.** [#GenFrmt Example Formatting (GENERAL)]
**IV.** [#AdvFrmt Example Formatting (ADVANCED)]
[[/collapsible]]
      [[/div]]
[[/iftags]]
    [[/div]]
  [[/div]]
[[/div]]

[[iftags +theme]]
[[module CSS]]
/* DOCUMENTATION */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/documentation.css);

 :root {
     --header-title: "FLOPSTYLE: DARK";
     --header-subtitle: "SUBVERSIVE CSS PHILOSOPHY";
     --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png) !important;
}

/* BACK TO TOP */
 span.top {
    display: flex;

    font-size: 1.05rem;
}

 span.top a {
    margin: .4rem auto -.4rem;
    padding: 5px 9px 5px 8px !important;

    color: var(--alphaColor);
    background: var(--accentColor);
    border: 0 !important;
    border-radius: 50%;

    font-weight: bold;
}

 span.top a:hover {
    color: var(--keyColor);
}
[[/module]]

[[div style="display: none"]]
[[include :scp-wiki:component:image-block
|name=alt_logo_tyrian.png
|caption=.]]
[[/div]]

[[div class="limit"]]
  [[div class="anchor"]]
    [[div class="sidebox table1 tableb"]]
||~ Flopstyle: DARK ||
||= Whoever gave me the power to fork Penumbra made a grave mistake. ||

||~ [[image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/scp_foundation_logo.png]] ||

      [[div class="flavorbox"]]
This is a working example of the {{sidebox}}.
      [[/div]]
= ⮤ This is a {{flavorbox}} ⮥

= Consult the [#Sideboxes Sideboxes] subsection for further info.
    [[/div]]
  [[/div]]
[[/div]]

[[# BTT]]

[[div class="meta-title"]]
Flopstyle: [[span class="DARK-title"]]DARK[[/span]]
[[/div]]
[[div class="pseudocrumbs"]]
[[[sigma-9-themes|Sigma-9 Themes]]] >> Flopstyle: DARK
[[/div]]

[[=image alt_logo_tyrian.png style="width: 200px; padding: 2.5rem"]]

= **Rating**
[[module Rate]]

= **Rating + Info Module**
[[include :scp-wiki:info:start]]
+++++* [[[floppyphoenix|If you liked this, check out my Author Page!]]]
[[include :scp-wiki:info:end]]

= **Standalone Info Module**
[[include :scp-wiki:info:start-standalone]]
[[include :scp-wiki:info:end-standalone]]

@@ @@

[[div class="templateInfo"]]
[[# What]]
+* What Is This?
----
This is a theme created by [[*user Lt Flops]]. It is intended for widespread use in any article in which dark mode or night mode are preferred.

Only use this if you understand what you're doing.

This theme is **__incompatible__** with **Black Highlighter**, **BASALT**, and **Sigma+**.
[[/div]]
[[div class="templateInfo"]]
[[collapsible show="CREDIT INFORMATION" hide="CREDIT INFORMATION"]]
Flopstyle: DARK is a fork of the following themes:

* [[[theme:flopstyle|]]] [[size 80%]]by [[user Lt Flops]][[/size]]
* [[[theme:penumbra|]]] [[size 80%]]by [[user EstrellaYoshte]][[/size]]

Major credit to [[user JackalRelated]], who created the [*https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png theme] [*https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png logo] ([*https://creativecommons.org/licenses/by-sa/3.0/ CC BY-SA 3.0]).

Last but not least, thank you to [[user stormbreath]], who reviewed the entire theme, and [[user Croquembouche]], who gave his input in a couple of areas.
[[/collapsible]]
[[/div]]
[[div class="templateInfo"]]
+++++* >> [[[/forum/t-14594014/theme:flopstyle-dark#post-5253227|PATCH NOTES]]] <<
[[/div]]

@@ @@

[[div class="templateInfo"]]
[[# How]]
+* How to Use
+++* The Essential Information
----
= Please read this introductory section before setting up Flopstyle: DARK on your page.
[[/div]]
[[div class="templateInfo"]]
@@      @@[[span class="bt bb"]]STEP 1. INCLUDE THEME[[/span]] Copy this syntax and paste it onto the top of your page:

[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo templatePadding"]]
@@      @@[[span class="terminal-span"]][OPTIONAL][[/span]] [[span class="bt bb"]]STEP 2. ADD BYLINE[[/span]] Copy this syntax and paste it directly beneath the rating module -- like so:

[[div class="code terminal" style="padding-bottom: 1rem"]]
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|Rate##**##var(--c-keyword)|]]##**

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"byline"##**##var(--c-keyword)|]]##**
**##var(--c-builtin)|@@[[span]]@@##** by authorLink **##var(--c-builtin)|@@[[/span]]@@##**[[span class="pointer"]](A)[[/span]]
**##var(--c-builtin)|@@[[span]]@@##** # **##var(--c-builtin)|@@[[/span]]@@##**[[span class="pointer"]](B)[[/span]]
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

@@      @@**2. (A)** Replace {{authorLink}} with the name of the author/any co-authors, and a link/links to the relevant author pages.

@@      @@**2. (B)** Replace {{#}} with the estimated time (in **minutes**) it would take a reader to finish your article. To estimate your article's reading time, you can copy the article text and paste it into the [*https://niram.org/read/ Read-o-Meter] tool, then round **up** or **down** to the nearest minute.[[span class="fnnum"]].[[/span]][[span class="fncon"]][[span class="bt bb"]]DISCLAIMER[[/span]] Read-o-Meter does not record or store your data.[[/span]]

@@      @@[[size 120%]]‼️[[/size]] Make sure there are no spaces between the lines containing the spans, otherwise this won't work as intended!

[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://i.imgur.com/hCGnFsp.png
|caption=,,An example of Step 2 in action.,,
|width=200px
|align=center
]]
[[/div]]
[[/div]]
[[div class="templateInfo"]]
@@      @@[[span class="bt bb"]]STEP 3. SET PAGE-TITLE[[/span]] Copy this syntax and paste it where you want to signal the beginning of your article:

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"meta-title"##**##var(--c-keyword)|]]##**
Your Title Here
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

For accessibility reasons, you **must** do this on every page that uses Flopstyle: DARK.
[[/div]]
[[div class="templateInfo templatePadding"]]
@@      @@[[span class="bt bb"]]STEP 4. SET [wikipedia:Breadcrumb_navigation BREADCRUMB NAVIGATION][[/span]] Copy this syntax and paste it directly beneath the page-title:

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"pseudocrumbs"##**##var(--c-keyword)|]]##**
@@[[[parent-page-url1|1st Parent Page Title]]] » Child Page Title@@
@@[[[parent-page-url2|2nd Parent Page Title]]] » Child Page Title@@
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

@@      @@[[size 120%]]‼️[[/size]] If you are creating an article that requires the use of [[[listpages-magic-and-you|ListPages]]], not to worry -- you can still [[[listpages-magic-and-you#toc20|parent your fragments]]] as usual, but you must do so the traditional way. Functionality takes precedence over form in this instance.

[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://i.imgur.com/uKmDCe1.png
|caption=,,An example of Steps 3 and 4 in action.,,
|width=100%
|align=center
]]
[[/div]]
[[/div]]
[[div class="templateInfo"]]
Now... If the basic aesthetics are all you want from Flopstyle: DARK, you are free to grab that code and skedaddle! But if you keep scrolling, I can show you how deep this rabbit hole goes.
[[/div]]

@@ @@
@@ @@
@@ @@

[[div class="templateInfo"]]
= [[span class="tb"]]Flopstyle: DARK was designed with the following components in mind...[[/span]]
[[/div]]

@@ @@
@@ @@
@@ @@

[[div class="templateInfo templateMargin"]]
[[# Cmpts]]
+++* 1. Preloaded Components
----
This theme comes prepackaged with the following six components:

@@      @@**1.1.** [[[component:acs-animation|ACS Animation]]] [[size 80%]]by [[user EstrellaYoshte]][[/size]]
@@      @@**1.2.** [[[component:betterfootnotes|BetterFootnotes]]] [[size 80%]]by [[user EstrellaYoshte]][[/size]]
@@      @@**1.3.** [[[component:croqstyle|Croqstyle CSS]]] [[size 80%]]by [[user Croquembouche]][[/size]]
@@      @@**1.4.** [[[component:fade-in|Fade In]]] (set at {{speed=1}}) [[size 80%]]by [[user Croquembouche]][[/size]]
@@      @@**1.5.** [[[component:text-style|Text Style]]] [[size 80%]]by [[user JaonHax]][[/size]]
@@      @@**1.6.** [[[component:toggle-sidebar|Toggle Sidebar]]] [[size 80%]]by [[user EstrellaYoshte]][[/size]]
[[/div]]
[[div class="templateInfo"]]
[[# CVars]]
+++* 2. Custom Variables
++++++* (Only change these if you understand what you're doing)
----
All variable changes must be wrapped/encased in a CSS module, {{[[module CSS]]}}. All the ones listed must also be wrapped/encased in a {{:root}} selector.

@@      @@[[span class="bt bb"]]2.1. COLORS[[/span]] You can change a variety of theme colors as you see fit. Simply copy any of the following variables (but only the ones you need) and edit them as necessary:

[[div class="code terminal"]]
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|CSS##**##var(--c-keyword)|]]##**
@@ @@##var(--c-symbol)|:root##{
[[/div]]
[[div class="code terminal"]]
@@   @@##var(--c-comment)|@@/* -- COLORS -- */@@##
@@     @@##var(--c-builtin)|@@--@@accentColor##: ##var(--c-value)|accent_color##;
@@     @@##var(--c-builtin)|@@--@@accentColorLite##: ##var(--c-value)|lighter_accent_color##;
@@     @@##var(--c-builtin)|@@--@@hue##: ##var(--c-value)|hue##;
[!--@@     @@##var(--c-builtin)|@@--@@textColor##: ##var(--c-value)|text_color##;
@@     @@##var(--c-builtin)|@@--@@fgColor##: ##var(--c-value)|foreground_color##;
@@     @@##var(--c-builtin)|@@--@@bgColor##: ##var(--c-value)|background_color##;--]

##var(--c-comment)|/* Defaults (Do not copy):##
##var(--c-comment)|@@ *   @@__accentColor:__## [[span class="col_box" style="background: var(--accentColor); border-color: hsl(325, 88%, 81%)"]]
[[/span]] **Bright Tyrian pink** hsl(325, 80%, 60%)##var(--c-comment)|.##
##var(--c-comment)|@@ *   @@__accentColorLite:__## [[span class="col_box" style="background: var(--accentColorLite); border-color: hsla(325, 88%, 91%, .5)"]]
[[/span]] **Soft Tyrian pink** hsla(325, 80%, 70%, .5)##var(--c-comment)|.##
##var(--c-comment)|@@ *   @@__hue:__## 325deg##var(--c-comment)|.##
##var(--c-comment)|@@**/@@##
[[/div]]

{{accentColor}} is the most extensively used page variable. Among all other variables, changing the accentColor is typically the only alteration that users of this theme will tend to make.

When you change {{accentColor}}, you must also change two other variables:

@@      @@**2.1. (A)** {{accentColorLite}}[[span class="bt bb"]][[size 0%]]:[[/size]][[/span]] This must have **higher** lightness and **lower** alpha value than your accentColor. I recommend a lightness of **at least 10% more** than your chosen accentColor's, and an alpha value of **0.5**
@@      @@**2.1. (B)** {{hue}}[[span class="bt bb"]][[size 0%]]:[[/size]][[/span]] This must match your chosen accentColor's hue.

To select the color of your choice, I recommend the [*https://hslpicker.com/ HSL Color Picker]. **HSL** is a human-friendly color system which stands for **H**ue, **S**aturation, **L**ightness. It can be expanded to HSL**A**, which includes the **A**lpha value (opacity).

To confirm that your chosen {{accentColor}} meets [*https://www.w3.org/TR/WCAG/#contrast-minimum Web Content Accessibility Guidelines (WCAG)], check its [*https://contrast-finder.tanaguru.com/ Contrast Ratio]. Insert [[span class="col_box" style="background: var(--bgColor); border-color: hsl(222, 62%, 63%)"]]
[[/span]] [[span class="wt"]]**hsl(222, 12%, 21%)**[[/span]] into the "Background" field, and your chosen {{accentColor}} into the "Text color" field. WCAG requires a contrast ratio of **3 or higher** for heading text.
[[/div]]
[[div class="templateInfo"]]
@@      @@[[span class="bt bb"]]2.2. LOGO AND FONTS[[/span]] You can change the logo, fonts, etc.:

[[div class="code terminal"]]
@@   @@##var(--c-comment)|@@/* -- LOGO -- */@@##
@@     @@##var(--c-builtin)|@@--@@lgurl##: ##var(--c-builtin)|url##(##var(--c-string)|@@URL_HERE@@##);
[[/div]]
[[div class="code terminal"]]
@@   @@##var(--c-comment)|@@/* -- FONTS -- */@@##
@@     @@##var(--c-builtin)|@@--@@header-font##: ##var(--c-string)|"yourFont", sans-serif##;
@@     @@##var(--c-builtin)|@@--@@body-font##: ##var(--c-string)|"yourFont", sans-serif##;

##var(--c-comment)|/* Defaults (Do not copy):##
##var(--c-comment)|@@ *   @@[[span style="font-family: var(--header-font)"]]__header-font:__ Montserrat, sans-serif[[/span]]##
##var(--c-comment)|@@ *   @@[[span style="font-family: var(--body-font)"]]__body-font:__ Inter, sans-serif[[/span]]##
##var(--c-comment)|@@**/@@##
[[/div]]
[[/div]]
[[div class="templateInfo templateMargin"]]
@@      @@[[span class="bt bb"]]2.3. HEADER TITLES[[/span]] You can also change the title, subtitle, title color, and subtitle color:

[[div class="code terminal"]]
@@   @@##var(--c-comment)|@@/* -- TITLES -- */@@##
@@     @@##var(--c-builtin)|@@--@@header-title##: ##var(--c-value)|"TITLE"##;
@@     @@##var(--c-builtin)|@@--@@header-subtitle##: ##var(--c-value)|"SUBTITLE"##;
@@     @@##var(--c-builtin)|@@--@@titleColor##: ##var(--c-value)|title_colour##;
@@     @@##var(--c-builtin)|@@--@@subtitleColor##: ##var(--c-value)|subtitle_colour##;

##var(--c-comment)|/* Defaults (Do not copy):##
##var(--c-comment)|@@ *   @@__titleColor:__## [[span class="col_box" style="background: var(--accentColor); border-color: hsl(325, 88%, 81%)"]]
[[/span]] **Bright Tyrian pink** hsl(325, 80%, 60%)##var(--c-comment)|.##
##var(--c-comment)|@@ *   @@__subtitleColor:__## [[span class="col_box" style="background: var(--accentColor); border-color: hsl(325, 88%, 81%)"]]
[[/span]] **Bright Tyrian pink** hsl(325, 80%, 60%)##var(--c-comment)|.##
##var(--c-comment)|@@**/@@##
[[/div]]
[[div class="code terminal"]]
}
**##var(--c-keyword)|[[/module]]##**
[[/div]]
[[/div]]
[[div class="templateInfo templateMargin templatePadding"]]
[[# FlopsHdr]]
+++* 3. [[[component:flops-header|Flops Header]]]
----
Flopstyle: DARK provides for a dark mode-friendly version of Flops Header:

[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:component:flops-header##
**##var(--c-keyword)||####var(--c-builtin)|item####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|containment####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|level####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|security####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption-bg-color####var(--c-keyword)|=##**
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://i.imgur.com/cGbnRpP.png
|caption=,,An example of the Flops Header in action.,,
|width=100%
|align=center
]]
[[/div]]
[[/div]]
[[div class="templateInfo templateMargin"]]
[[# Sideboxes]]
+++* 4. Sideboxes
----
Sideboxes are built-in components that come in two types:

* [[span class="bt bb"]]Type-A[[/span]] {{authorbox}} and [[span class="table1"]]{{sidebox}}[[/span]]
* [[span class="bt bb"]]Type-B[[/span]] {{sidecontainer}}

Usage instructions vary depending on the type.

* The {{authorbox}} and [[span class="table1"]]{{sidebox}}[[/span]] do not display on screens of {{width=1280px}} and smaller, which includes mobile screens. They can be set up to display page and author information.
* The {{sidecontainer}} collapses into the page edge on screens of {{width=1280px}} and smaller. On those screens, you can access it by tapping your finger or hovering your cursor over it. It can be set up to display additional narrative information.

Consider these conditions before setting up these items -- a sizable percentage of SCP Wiki users browse via mobile devices.
[[/div]]
[[div class="templateInfo"]]
++++* [[span class="bt bh"]]Type-A[[/span]] Authorbox and Sidebox
++++++* (See Top Left and Top Right)
----
= ,,//Adapted from [[[theme:penumbra|Penumbra Theme]]] by [[user EstrellaYoshte]]//,,

By default, the {{authorbox}} is **opt-out**.  It comes preloaded on all pages that include Flopstyle: DARK. If you wish to //remove// it, replace this:

[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##**##var(--c-keyword)|]]##**
[[/div]]

With this:

[[div class="code terminal centered"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|style####var(--c-operator)|=####var(--c-string)|"display: none;"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
@@      @@[[span class="bt bb"]]ALTERNATIVE 1[[/span]] After removing the {{authorbox}}, you can //replace// it with a custom version that displays any information you desire. This functionality can be especially useful for co-authored, rewritten, or translated pages. For your reference, this is the code that creates the {{authorbox}}:

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"anchor"##**##var(--c-keyword)|]]##**[[span class="pointer"]]Sets authorbox's sticky position.[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"authorbox tableb"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|ListPages## ##var(--c-builtin)|name####var(--c-operator)|=####var(--c-string)|"="##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|%%title%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||=## ##var(--c-keyword)|[[span##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"bt bb"##**##var(--c-keyword)|]]##** By **##var(--c-keyword)|@@[[/span]]@@##** ##var(--c-symbol)|%%created_by_linked%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|Published on %%created_at|%d %b %Y%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|[[/module]]##**

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"flavorbox"##**##var(--c-keyword)|]]##**[[span class="pointer"]]Creates authorbox's flavorbox.[[/span]]
Desired {{flavor}} text here.
**##var(--c-keyword)|@@[[/div]]@@##**

**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**[[span class="pointer"]]Sets the end limit of the anchor.[[/span]]
[[/div]]

By default, the {{authorbox}} makes use of ListPages to automate the metadata displayed. You could theoretically copy the ListPages module inside the {{authorbox}} and paste it onto //any// Wiki page, and these fields would populate in a way unique to that page. You may, of course, change any of these fields as desired.

You may also edit your custom {{authorbox}} to display flavor text tailored to your page, such as a note to readers.

**REMEMBER** -- Using the {{flavorbox}} is optional. But it is the only div block you should use inside an {{authorbox}}.
[[/div]]
[[div class="templateInfo templateMargin"]]
@@      @@[[span class="bt bb"]]ALTERNATIVE 2[[/span]] If you want, you can move the {{authorbox}} to the right-hand side of the page by swapping it out for the [[span class="table1"]]{{sidebox}}[[/span]]. To create a [[span class="table1"]]{{sidebox}}[[/span]], copy this syntax and paste it inside a CSS module at the top of your page:

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"anchor"##**##var(--c-keyword)|]]##**[[span class="pointer"]]Sets sidebox's sticky position.[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"sidebox tableb"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|ListPages## ##var(--c-builtin)|name####var(--c-operator)|=####var(--c-string)|"="##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|%%title%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||=## ##var(--c-keyword)|[[span##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"bt bb"##**##var(--c-keyword)|]]##** By **##var(--c-keyword)|@@[[/span]]@@##** ##var(--c-symbol)|%%created_by_linked%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|Published on %%created_at|%d %b %Y%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|[[/module]]##**

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"flavorbox"##**##var(--c-keyword)|]]##**[[span class="pointer"]]Creates sidebox's flavorbox.[[/span]]
Desired {{flavor}} text here.
**##var(--c-keyword)|@@[[/div]]@@##**

**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**[[span class="pointer"]]Sets the end limit of the anchor.[[/span]]
[[/div]]

If you are planning to insert any {{sidecontainers}} onto your page, I strongly recommend using the {{authorbox}} instead of the [[span class="table1"]]{{sidebox}}[[/span]]. The reason being, when the [[span class="table1"]]{{sidebox}}[[/span]] and {{sidecontainer}} appear in tandem, they will overlap and become visually messy. This has the potential to be very confusing for readers. So, it's better staying on the safe side.

You can configure a [[span class="table1"]]{{sidebox}}[[/span]] to convey the same info as an {{authorbox}}. Or -- like with the one I showcase here -- you can add a snappy article tagline and unique icon.

Like any other table, you can also apply a unique tint -- e.g., the current green, as achieved with [[span class="table1"]]{{table1}}[[/span]]. Consult the **Table Formatting** collapsible under the [#GenFrmt Example Formatting (GENERAL)] section for further info.
[[/div]]
[[div class="templateInfo"]]
++++* [[span class="bt bh"]]Type-B[[/span]] Sidecontainer
++++++* (See Below)
----
= ,,//Courtesy of [[user Woedenaz]]//,,

The {{sidecontainer}} is **opt-in**. It is set up like this:

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"limit"##**##var(--c-keyword)|]]##**[[span class="pointer"]]Sets the start limit of the anchor.[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"anchor"##**##var(--c-keyword)|]]##**[[span class="pointer"]]Sets sidecontainer's sticky position.[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"sidecontainer"##**##var(--c-keyword)|]]##**
Desired {{sidecontainer}} text here.
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
Text that the {{sidecontainer}} associates with.
**##var(--c-keyword)|@@[[/div]]@@##**[[span class="pointer"]]Sets the end limit of the anchor.[[/span]]
[[/div]]

I recommend inserting a manual line break after {{sidecontainer}}-associated text. You can achieve this by encasing a space with two sets of {{@@}} (one on each side). The {{sidecontainer}} will appear alongside this text as you scroll past.
[[/div]]

@@ @@

[[collapsible hideLocation="both" show="Show Example" hide="Hide Example"]]

  [[div class="justified"]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidecontainer"]]
With finesse, it is possible
[[/div]]
[[/div]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
[[/div]]
----
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidecontainer"]]
to have multiple sidecontainers,
[[/div]]
[[/div]]

Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.

Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.
[[/div]]
----
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidecontainer"]]
which act like this.
[[/div]]
[[/div]]

Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.

Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.
[[/div]]
  [[/div]]

@@ @@

[[/collapsible]]

@@ @@

[[div class="templateInfo templateMargin"]]
**REMEMBER** -- Without a {{limit}} div, the {{anchor}} will remain present across the entire page content once you scroll past its starting position.
[[/div]]
[[div class="templateInfo"]]
[[# Misc]]
+++* 5. Miscellaneous Changeable Portions
----
If necessary, you can also edit any of these CSS properties to better suit your page.
[[/div]]
[[div class="templateInfo templateMargin"]]
+++++* Change Logo Opacity
----
[[div class="code terminal"]]
@@ @@##var(--c-symbol)|#extra-div-1##{
@@     @@##var(--c-builtin)|filter##: ##var(--c-builtin)|opacity##(##var(--c-value)|number_percentage##);
}
[[/div]]

= Default opacity = **33%**
[[/div]]
[[div class="templateInfo"]]
[[# TVars]]
+++* 6. Theme Variants
----
If you insert a different variable into the theme include block, you can apply a prefabricated theme variant to your page.
[[/div]]

[[module CSS]]
 .code.terminal.variant,
 .code.terminal-subvariant {
    text-align: center;
}

 .code.terminal.variant p,
 .code.terminal.subvariant p {
    text-align: left;
}

 .code.terminal.variant p {
    padding: 0;
}

 div.bookshelf {
    display: flex;
    flex-flow: column wrap;
    gap: 0 1rem;
    justify-content: center;
}

 div.bookshelf > * {
    flex-basis: 0;
}

 div.bookshelf > * > .image-container {
    padding: 0 0 .5rem;
}

 @media (min-width: 768px) {
     .code.terminal.variant p {
    	padding: 0 7rem;
    }

     div.bookshelf {
    	flex-flow: row wrap;
    }

     div.bookshelf > * {
    	flex: 1 20.5rem;
    }
}
[[/module]]

@@ @@

[[=]]
[[collapsible hideLocation="both" show="Show Metafoundation Variants" hide="Hide Metafoundation Variants"]]

[[div class="templateInfo"]]
+++++* INFERNO Variant
----
,,//For the "[[[from-120-s-archives-hub|From 120's Archives]]]" Canon//,,
  [[=image https://i.postimg.cc/T3DxS93t/INFERNO-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|inferno=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* MAPLE Variant
----
,,//For the "[[[on-guard-43-hub|On Guard 43]]]" Canon//,,
  [[=image https://i.postimg.cc/Bbb9C5zc/MAPLE-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|maple=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* PLASTIC Variant
----
,,//For the "[[[the-s-c-plastics-hub|S & C Plastics]]]" Canon//,,
  [[=image https://i.postimg.cc/X7TSw-Ckd/PLASTIC-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|plastic=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* PRAIRIE Variant
----
,,//For the forthcoming "The Way It Goes" Canon//,,
  [[=image https://i.postimg.cc/FH3tGHTq/PRAIRIE-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|prairie=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* SEAFOAM Variant
----
,,//For the Series "[[[the-fishing-council-hub|The Fishing Council]]]"//,,
  [[=image https://i.postimg.cc/PqQgsFsQ/SEAFOAM-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|seafoam=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* THRESHOLD Variant
----
,,//For the "[[[no-return-hub|No Return]]]" Canon -- Threshold Branch//,,
  [[=image https://i.postimg.cc/PxfBtzds/THRESHOLD-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|threshold=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* VANGUARD Variant
----
,,//For the "[[[no-return-hub|No Return]]]" Canon -- Vanguard Branch//,,
  [[=image https://i.postimg.cc/xTNBTdVC/VANGUARD-Variant.png class="demo" style="outline-color: hsl(215, 30%, 21%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|vanguard=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[/collapsible]]


[[collapsible hideLocation="both" show="Show WITCH Variants" hide="Hide WITCH Variants"]]

[[div class="templateInfo"]]
+++++* WITCH Variant
----
= ,,//For the "Weaving Imperceptible Threads" Continuity//,,
  [[=image https://i.postimg.cc/SQvwhM53/WITCH-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##**##var(--c-keyword)|]]##**
  [[/div]]

= Use any one of these modifiers to access a subvariant of the WITCH theme.

  [[div class="bookshelf"]]
    [[div]]
++++++* BOOK OF ASHES
----
      [[=image https://i.postimg.cc/RF9vwH9X/ASHES-Subvariant.png class="demo" style="outline-width: 3px"]]
      [[div class="code terminal subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|ashes=a##**##var(--c-keyword)|]]##**
      [[/div]]
    [[/div]]

    [[div]]
++++++* BOOK OF LIGHT
----
      [[=image https://i.postimg.cc/MGJw8Qcq/LIGHT-Subvariant.png class="demo" style="outline-width: 3px"]]
      [[div class="code terminal subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|light=a##**##var(--c-keyword)|]]##**
      [[/div]]
    [[/div]]

    [[div]]
++++++* BOOK OF VELDT
----
      [[=image https://i.postimg.cc/0jF3dTDP/VELDT-Subvariant.png class="demo" style="outline-width: 3px"]]
      [[div class="code terminal subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|veldt=a##**##var(--c-keyword)|]]##**
      [[/div]]
    [[/div]]

    [[div]]
++++++* LOOSE THREADS
----
      [[=image https://i.postimg.cc/G2qnYgXm/LOOSE-THREADS-Subvariant.png class="demo" style="outline-width: 3px"]]
      [[div class="code terminal subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|loose-threads=a##**##var(--c-keyword)|]]##**
      [[/div]]
    [[/div]]
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* GALAXIAS Variant
----
,,//For the Department of Lactic Anomalies//,,
  [[=image https://i.postimg.cc/X7h3Qh4Z/GALAXIAS-Variant.png class="demo" style="outline-color: hsl(216, 33%, 40%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|galaxias=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* PEDAGOGY Variant
----
,,//For The International Center for the Study of Unified Thaumatology//,,
  [[=image https://i.postimg.cc/5yjyY4Wk/PEDAGOGY-Variant.png class="demo" style="outline-color: hsl(215, 73%, 63%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|pedagogy=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[/collapsible]]


[[collapsible hideLocation="both" show="Show Other Variants" hide="Hide Other Variants"]]

[[div class="templateInfo"]]
+++++* CHTHONIAN Variant
----
,,//For the "[[[pieklo-cycow-hub|Cyców's Hell]]]" Canon//,,
  [[=image https://i.postimg.cc/KzNxf88F/CHTHONIAN-Variant.png class="demo" style="outline-color: hsl(0, 94%, 6%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|chthonian=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* MONSTER Variant
----
,,//For Halloween// 🎃,,
  [[=image https://i.postimg.cc/HnNGvcDG/MONSTER-Variant.png class="demo" style="outline-color: hsl(285, 20%, 9%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|monster=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* RHIZOME Variant
----
,,//For Site-89//,,
  [[=image https://i.postimg.cc/sXfHpLM2/RHIZOME-Variant.png class="demo"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|rhizome=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* SYZYGY Variant
----
,,//For the Three Moons Initiative//,,
  [[=image https://i.postimg.cc/fbcCHSky/SYZYGY-Variant.png class="demo" style="outline-color: hsl(345, 6%, 10%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|syzygy=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* WITCHING HOUR Variant
----
,,//For the "[[[nightfall-hub|NIGHTFALL]]]" Canon//,,
  [[=image https://i.postimg.cc/QdLwBrjq/WITCHING-HOUR-Variant.png class="demo" style="outline-color: hsl(220, 20%, 10%)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witching-hour=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[div class="templateInfo"]]
+++++* PEENUMBRA Variant
----
,,//Joke Variant//,,
  [[=image https://i.postimg.cc/qBDdvYtm/PEENUMBRA-Variant.png class="demo" style="outline-color: hsl(60, 77%, 82%); filter: brightness(.95) opacity(.95) saturate(.95)"]]
  [[div class="code terminal variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|peenumbra=a##**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]

[[/collapsible]]
[[/=]]

@@ @@

[[div class="templateInfo"]]
[[# GenFrmt]]
+* Example Formatting [GENERAL]
----
[[/div]]

@@ @@

[[collapsible hideLocation="both" show="Show General Formatting" hide="Hide General Formatting"]]

+ L1 Heading
++ L2 Heading
+++ L3 Heading
++++ L4 Heading
+++++ L5 Heading
++++++ L6 Heading

= **bold** | //italic// | __underline__ | --strikethrough-- | [[span style="font-family: var(--mono-font)"]]teletype[[/span]] | ^^superscript^^,,subscript,,

= Type 4 hyphens {{[[span style="letter-spacing: .3rem"]]@@----@@[[/span]]}} to create a horizontal rule.
----
[[toc]]

[[div class="code"]]
@@ fake code selector{@@
@@     fake code property: fake code value;@@
@@}@@
[[/div]]

[https://scp-wiki.wikidot.com/# A link] ([https://google.com A link you probably visited])

# numbered list
# list item
# list item

* bulleted list
* list item
* list item

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab This empty tab has a really long name for some odd reason. I wonder why? It is very strange.]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

[[/collapsible]]

[[collapsible hideLocation="both" show="Show Image Formatting" hide="Hide Image Formatting"]]

= ,,//Image Blocks//,,
[[div class="FL_parent"]]
  [[div class="FL_child"]]
[[include :scp-wiki:component:image-block
|name=alt_logo_tyrian.png
|caption=Standard Image Block
|width=150px
|align=center
]]
  [[/div]]
  [[div class="FL_child"]]
[[include :snippets:bs-image
|image=alt_logo_tyrian.png
|heading=Bootstrap Image Box
|caption=Fancy, Customizable Image Block
|link=/local--files/theme:flopstyle-dark/alt_logo_tyrian.png
|alt=Logo of Flopstyle: DARK.
|width=150px
|float=middle
|kind=primary
]]
  [[/div]]
[[/div]]
----
[[div class="templateInfo centered"]]
++* Bootstrap Image Box
----
As an alternative to the Standard Image Block, Flopstyle: DARK makes use of a modified version of the "Bootstrap Image Box" by [[*user Timothy Foster]], which is hosted on the Wikidot Snippets site. You can view its documentation [*https://snippets.wikidot.com/code:bootstrap-image-box here].

Here is a brief overview:
[[/div]]
@@ @@
[[div class="templateInfo templateSetup"]]
++++* Setup Instructions
[[/div]]
[[div class="templateInfo templateSetup"]]
= [[span class="bt bb"]]STEP 1[[/span]] Copy and paste this onto your page:

[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:snippets:bs-image##
**##var(--c-keyword)||####var(--c-builtin)|image####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|heading####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|caption####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|link####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|alt####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|width####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|float####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|kind####var(--c-keyword)|=##**
**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo templateSetup"]]
= [[span class="bt bb"]]STEP 2[[/span]] Consult this short guide:
[[/div]]
[[div_ class="help"]]
> [[span style="font-variant: all-small-caps"]]START OF INCLUDE BLOCK[[/span]] ↦
> 
> Image File **(//Required!//)** ↦
> 
> Title of Image ↦
> 
> Description of Image ↦
> 
> Image URL ↦
> 
> Alt-Text **(//See Below//)** ↦
> 
> Number & Unit ↦
> 
> Where the Image Block Sits ↦
> 
> Image Block Color **(//Try These Out!//)** ↦ **Primary Recommended**
> 
> [[span style="font-variant: all-small-caps"]]END OF INCLUDE BLOCK[[/span]] ↦
> 

> [[include :snippets:bs-image
> 
> |image={{filename.png}}
> 
> |heading=**Title**
> 
> |caption=**Descriptive Text**
> 
> |link={{linkna.me}}/{{none}}
> 
> |alt=**Alternative Text**
> 
> |width={{length}}
> 
> |float={{left}}/{{middle}}/{{right}}
> 
> |kind={{primary}}/{{warning}}/{{danger}}/{{info}}/{{success}}/{{none}}
> 
> ]]
> 
[[/div]]
[[div class="templateInfo templateSetup"]]
= [[span class="bt bb"]]STEP 3[[/span]] Fill in all fields after each = sign.
[[/div]]
----
= ,,//Alternative Text (Alt-Text)//,,
For accessibility reasons, I strongly recommend the use of **alt-text** in your images. If you need a detailed understanding of alt-text and its relation to accessibility, I recommend [*https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/ this article written by The Big Hack].

The gist is: When you set up an image, chances are that some readers -- like those with visual impairment or blindness -- won't be able to view it. What alt-text does is provide a concise descriptor of said image that a screen reader can easily parse. Alt-text will also appear if the image file/link becomes unavailable.

To set up alt-text for an image, all you need to include is the {{alt}} field inside a **Bootstrap Image Box** or **[*https://www.wikidot.com/doc-wiki-syntax:images Wiki Syntax-inserted image]**.[[span class="fnnum"]].[[/span]][[span class="fncon"]][[span class="bt bb"]]NOTICE[[/span]] The Standard Image Block does not support alt-text[[/span]]

A demonstration:

[[div class="templateInfo templateSetup"]]
  [[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:snippets:bs-image##
**##var(--c-keyword)||####var(--c-builtin)|image####var(--c-keyword)|=##**Larry_the_cat.jpg
**##var(--c-keyword)||####var(--c-builtin)|heading####var(--c-keyword)|=##**Larry the Cat
**##var(--c-keyword)||####var(--c-builtin)|caption####var(--c-keyword)|=##**He is very soft.
**##var(--c-keyword)||####var(--c-builtin)|link####var(--c-keyword)|=##**@@/local--files/theme:flopstyle-dark/Larry_the_cat.jpg@@
**##var(--c-keyword)||####var(--c-builtin)|alt####var(--c-keyword)|=##Larry, a beige cat, sits alert in the yard.**
**##var(--c-keyword)||####var(--c-builtin)|width####var(--c-keyword)|=##**300px
**##var(--c-keyword)||####var(--c-builtin)|float####var(--c-keyword)|=##**middle
**##var(--c-keyword)||####var(--c-builtin)|kind####var(--c-keyword)|=##**primary
**##var(--c-keyword)|]]##**
  [[/div]]
[[/div]]
[[include :snippets:bs-image
|image=Larry_the_cat.jpg
|heading=Larry the Cat
|caption=He is very soft.
|link=/local--files/theme:flopstyle-dark/Larry_the_cat.jpg
|alt=Larry, a beige cat, sits alert in the yard.
|width=300px
|float=middle
|kind=primary
]]

= Pay attention to the {{alt}} field. That's what a screen reader will convey to its user.
----
[[=]]
,,//Imagediv//,,
,,//Cribbed from [[[theme:blankstyle|BLANKSTYLE CSS]]] by [[user Placeholder McD]] & [[user HarryBlank]]//,,

[[div style="overflow: hidden"]]
[[div class="imagediv"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:classic/base_image_frame.png]]

{{@@[[div class="imagediv"]]@@}}
{{@@[[=image URL_HERE]]@@}}
{{@@[[/div]]@@}}
[[/div]]
[[/div]]
[[/=]]

[[/collapsible]]

[[collapsible hideLocation="both" show="Show Table Formatting" hide="Hide Table Formatting"]]

[[div class="centered"]]

,,//Standard Tables//,,
[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png
|caption=Image block broken by {{tableb}} div.
|width=125px
|align=right
]]
[[/div]]

||~ header ||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content || cell-content ||

[[div class="tableb"]]
||||~ A table, with very cool hcell styling ||
||= Whose cells have been separated ||= by the {{tableb}} div! ||
[[/div]]

@@ @@
----
,,//ACS-Colored Tables//,,
,,//Cribbed from [[[theme:blankstyle|BLANKSTYLE CSS]]] by [[user Placeholder McD]] & [[user HarryBlank]]//,,
[[div class="table1"]]
||~ This is a GREEN table; ||
||= it is fun to test. ||
[[/div]]

[[span class="table1"]]{{@@[[div class="table1"]]@@}}[[/span]]

[[div class="table2"]]
||~ This is a BLUE table; ||
||= it, too, is fun to test. ||
[[/div]]

[[span class="table2"]]{{@@[[div class="table2"]]@@}}[[/span]]

[[div class="table3"]]
||~ This is a YELLOW table; ||
||= it, too, is fun to test. ||
[[/div]]

[[span class="table3"]]{{@@[[div class="table3"]]@@}}[[/span]]

[[div class="table4"]]
||~ This is an ORANGE table; ||
||= it, too, is fun to test. ||
[[/div]]

[[span class="table4"]]{{@@[[div class="table4"]]@@}}[[/span]]

[[div class="table5"]]
||~ This is a RED table; ||
||= it's not so fun to test. ||
[[/div]]

[[span class="table5"]]{{@@[[div class="table5"]]@@}}[[/span]]

[[div class="table6"]]
||~ This is a VIOLET table; ||
||= it //is// the test. ||
[[/div]]

[[span class="table6"]]{{@@[[div class="table6"]]@@}}[[/span]]

[[div class="table0"]]
||~ This is a WHITE table; ||
||= there is no test. ||
[[/div]]

[[span class="table0"]]{{@@[[div class="table0"]]@@}}[[/span]]

Combine numbered table spans and bold text to create colored bold text:

[[span class="table1"]] **GREEN** [[/span]]
@@[[span class="table1"]] **GREEN** [[/span]]@@

[[span class="table2"]] **BLUE** [[/span]]
@@[[span class="table2"]] **BLUE** [[/span]]@@

[[span class="table3"]] **YELLOW** [[/span]]
@@[[span class="table3"]] **YELLOW** [[/span]]@@

[[span class="table4"]] **ORANGE** [[/span]]
@@[[span class="table4"]] **ORANGE** [[/span]]@@

[[span class="table5"]] **RED** [[/span]]
@@[[span class="table5"]] **RED** [[/span]]@@

[[span class="table6"]] **VIOLET** [[/span]]
@@[[span class="table6"]] **VIOLET** [[/span]]@@

[[span class="table0"]] **WHITE** [[/span]]
@@[[span class="table0"]] **WHITE** [[/span]]@@

[[/div]]

[[/collapsible]]

@@ @@

[[div class="templateInfo"]]
[[# AdvFrmt]]
+* Example Formatting [ADVANCED]
----
[[/div]]

@@ @@

[[collapsible hideLocation="both" show="Show Content Warning Header" hide="Hide Content Warning Header"]]

Because of the special nature of this header (it is not for aesthetic use; instead, it has significant utility for the author and readers both), it has been isolated from the other div blocks.
----
A {{Content Warning}} is a notice placed before the beginning of an article to warn readers about the potentially disturbing content that it contains. This type of notice will then (briefly) list the topics of concern that are present in the article.

= **SEE ALSO** -- [[[adult-content-warning-guide|Adult Content Warning Guide]]].

[[div class="content-warning"]]
This **[SCP / GOI Format / Tale / Artwork / Hub]** contains **[potentially disturbing content]** that may be harmful to some readers.

{{@@[[div class="content-warning"]]@@}}
[[/div]]

[[/collapsible]]

[[collapsible hideLocation="both" show="Show Custom Div Blocks" hide="Hide Custom Div Blocks"]]

[[note]]
+++* Each div block example contains:
[[<]]
* Div appearance.
* Usage syntax.
* Some may also include a summary of intended use.
[[/<]]
[[/note]]

[[note]]
💡 **REMEMBER** -- enclose every div with {{@@[[/div]]@@}}.
[[/note]]

[[div class="centered"]]

[[div class="classification-header"]]
Most sincerely,
Jean Karlyle Aktus, Director, USINBL Site-81

{{@@[[div class="classification-header"]]@@}}
[[/div]]
[[div class="ethics-header"]]
Signed,
Odongo Tejani, Chairman, Ethics Committee

{{@@[[div class="ethics-header"]]@@}}
[[/div]]
[[div class="miscomm-header"]]
-- Eli Forkley, Director, DoMc

{{@@[[div class="miscomm-header"]]@@}}
[[/div]]
[[div class="oracle-header"]]
-- Kazuo Natsumi, Punt-againdist, Bodacious Assembly

{{@@[[div class="oracle-header"]]@@}}
[[/div]]
[[div class="overwatch-header"]]
-- ~ --

BY UNANIMOUS ASSENT OF THE OVERSEERS

{{@@[[div class="overwatch-header"]]@@}}
[[/div]]
[[div class="raisa-header"]]
-- Maria Jones, Director, RAISA

{{@@[[div class="raisa-header"]]@@}}
[[/div]]
[[div class="warning-header"]]
You are now breathing manually.

{{@@[[div class="warning-header"]]@@}}
[[/div]]
[[div class="log-header"]]
+++* LOG HEADER
//For Use Above Interview/Incident/Exploration Logs//
----
{{@@[[div class="log-header"]]@@}}
@@+++* Heading@@
@@----@@
Text
{{@@[[/div]]@@}}
[[/div]]
----
[[div class="blockquote"]]
Quote Block

{{@@[[div class="blockquote"]]@@}}
[[/div]]

[[div class="blockquote"]]
> Nested Quote Block
[[/div]]

[[div class="blockquote dashed"]]
Alternative Quote Block 1 -- Dashed

{{@@[[div class="blockquote dashed"]]@@}}
[[/div]]
[[div class="blockquote classic"]]
Alternative Quote Block 2 -- Classic

{{@@[[div class="blockquote classic"]]@@}}
[[/div]]
[[div class="blockquote classic curved"]]
Alternative Quote Block 3 -- Classic Curved

{{@@[[div class="blockquote classic curved"]]@@}}
[[/div]]
[[div class="blockquote lightweight"]]
Alternative Quote Block 4 -- Lightweight

{{@@[[div class="blockquote lightweight"]]@@}}
[[/div]]
[[div class="blockquote simple"]]
Alternative Quote Block 5 -- Simple

{{@@[[div class="blockquote simple"]]@@}}
[[/div]]
[[div class="blockquote simple larger"]]
Larger Quote Size

[[span style="font-size: 85%"]]{{@@[[div class="blockquote simple larger"]]@@}}[[/span]]

The "larger" class can also be applied to Darkbox, Lightbox, and Report Box divs, and their variations.
[[/div]]
[[div class="darkbox"]]
Darkbox

{{@@[[div class="darkbox"]]@@}}
[[/div]]
[[div class="lightbox"]]
Lightbox

{{@@[[div class="lightbox"]]@@}}
[[/div]]
[[div class="report-box"]]
+++* REPORT BOX
//For Internal Documents//
----
{{@@[[div class="report-box"]]@@}}
@@+++* Heading@@
@@----@@
Text
{{@@[[/div]]@@}}
[[/div]]

//Report Block Variations//

[[div class="report-box red-tint"]]
+++* Red
[[/div]]

{{@@[[div class="report-box red-tint"]]@@}}

[[div class="report-box orange-tint"]]
+++* Orange
[[/div]]

{{@@[[div class="report-box orange-tint"]]@@}}

[[div class="report-box yellow-tint"]]
+++* Yellow
[[/div]]

{{@@[[div class="report-box yellow-tint"]]@@}}

[[div class="report-box green-tint"]]
+++* Green
[[/div]]

{{@@[[div class="report-box green-tint"]]@@}}

[[div class="report-box cyan-tint"]]
+++* Cyan
[[/div]]

{{@@[[div class="report-box cyan-tint"]]@@}}

[[div class="report-box blue-tint"]]
+++* Blue
[[/div]]

{{@@[[div class="report-box blue-tint"]]@@}}

[[div class="report-box magenta-tint"]]
+++* Magenta
[[/div]]

{{@@[[div class="report-box magenta-tint"]]@@}}

[[div class="report-box grey-tint"]]
+++* Grey
[[/div]]

{{@@[[div class="report-box grey-tint"]]@@}}

[[div class="overwatch-box"]]
Overwatch Box

{{@@[[div class="overwatch-box"]]@@}}
[[/div]]
[[div class="page-source"]]
Page Source

{{@@[[div class="page-source"]]@@}}
[[/div]]
[[div class="narration justified"]]
= [[span style="text-indent: 0"]]Narration Block[[/span]]

[[div class="indented"]]
//Lorem ipsum dolor sit amet, quis habeo facilisi eum an. Habeo denique consequuntur nec at, id his agam inciderint. Ex veri doming disputationi quo, error clita eruditi ei quo. Melius labitur comprehensam pro cu. Ut dico veritus assueverit sed.//

//Duo justo vitae dicant cu, ut his vitae appetere eloquentiam. Repudiare consequat ei eum, ex eam vocibus denique iracundia. Vix vocent minimum sensibus in, ad quando phaedrum intellegam sed. Fastidii argumentum ne vel, ad sint errem.//
[[/div]]

= {{@@[[div class="narration justified indented"]]@@}}
[[/div]]
[[div class="journal"]]
**Journal Block**
@@ @@
{{@@[[div class="journal"]]@@}}
@@ @@
[[span class="highlighter"]] Highlighted Text. [[/span]]
@@ @@
{{@@[[span class="highlighter"]]@@}}
[[/div]]
[[div class="journal"]]
__**Note:__** This div limits the creation of a double line-break. To achieve one, do the following:
@@ @@
[[<]]
1. At the end of each line of text, press enter.
2. In that new line, encase a space with two sets of {{@@}} (one set per side).
3. Press enter again and continue writing.
[[/<]]
[[/div]]
----
[[div class="text-container-wrap"]]
[[module ListUsers users="."]]
+++ %%title%%
[[/module]]
[[div class="text-container"]]

[[div class="sent"]]
[[span class="text"]]This is the Text Style div by JaonHax.[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]Really?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]Yup.[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]But, how do you use it?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]][[[component:text-style|We have a guide.]]][[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]][[[component:text-style|A guide?]]] Is this a link?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]You bet![[/span]]
[[span class="text"]]Please consult the guide -- it tells you exactly how to set this up.[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]Set us up...[[/span]]
[[span class="text" style="font-size: 125%"]]😳[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text" style="font-size: 125%"]]😳[[/span]]
[[/div]]

[[/div]]
[[/div]]
----
[[div class="hazard-box hazard-box-6"]]

[[div class="hazard-box-image"]]
[[div class="hazard-box-image-6"]]
[[image https://i.imgur.com/QQcBcvK.png]]
[[/div]]
[[/div]]
[[div class="hazard-box-text"]]
+++* NARRATIVOHAZARD WARNING

The file you wish to access, “[[span style="font-family: var(--mono-font)"]]**SCP-████**[[/span]],” describes an unpredictable narrativic anomaly intersecting with multiple subnarrative layers. Narrativic inoculation is required, as this document contains several embedded narrativohazards. Personnel without inoculation against such anomalies may experience a narrative paraphrasing event.

Are you sure you wish to continue?
[[/div]]

[[/div]]

[[<]]
[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box hazard-box-#"##**##var(--c-keyword)|]]##**[[span class="pointer"]]1[[/span]]

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box-image"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box-image-#"##**##var(--c-keyword)|]]##**[[span class="pointer"]]2[[/span]]
**##var(--c-keyword)|[[image##** ##var(--c-symbol)|imageLink.png##**##var(--c-keyword)|]]##**[[span class="pointer"]]3[[/span]]
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box-text"##**##var(--c-keyword)|]]##**
@@+++* TITLE@@

Put whatever you want here.
**##var(--c-keyword)|@@[[/div]]@@##**

**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

# For {{hazard-box-#}}, the numbers {{1–5}} have been paired with the [[[anomaly-classification-system-guide|Anomaly Classification System]]] colors, plus violet ({{6}}) and white ({{@@0@@}}). A breakdown of these color–number combos is as follows:
 # {{hazard-box-1}} = Green
 # {{hazard-box-2}} = Blue
 # {{hazard-box-3}} = Yellow
 # {{hazard-box-4}} = Orange
 # {{hazard-box-5}} = Red
 # {{hazard-box-6}} = Violet
 * {{hazard-box-0}} = White
# For {{hazard-box-image-#}}, select the same number as with the previous section.
# Here, replace the placeholder link with one of the Hazard Signs created by [[user EstrellaYoshte]] as featured [[[desk-of-junior-designer-s-yvonne|on their art page]]]. I have listed links to their five Hazard Signs here. That said, I strongly encourage you to visit their art page and give it an upvote, because their images have played an invaluable role in prettifying this theme!
 * [https://i.imgur.com/A9Rn1ly.png Cognitohazard Warning]
 * [https://i.imgur.com/qIbCuxa.png Infohazard Warning]
 * [https://i.imgur.com/bxjTJcI.png Kinetohazard Warning]
 * [https://i.imgur.com/QQcBcvK.png Narrativohazard Warning]
 * [https://i.imgur.com/vpwoqdr.png  Semiohazard Warning]
[[/<]]

[[/div]]

[[/collapsible]]

[[collapsible hideLocation="both" show="Show Special Formatting" hide="Hide Special Formatting"]]

[[note]]
+++* Each special formatting example contains:
[[<]]
* Formatting appearance.
* Usage syntax.
* Some may also include a summary of intended use.
[[/<]]
[[/note]]

[[note]]
💡 **REMEMBER** -- enclose every div with {{@@[[/div]]@@}}, and every span with {{@@[[/span]]@@}}.
[[/note]]

[[div class="centered"]]

,,//Centered Text//,,
[[div class="centered"]]
Nulla egestas risus ac venenatis rhoncus. Nunc imperdiet mattis risus ac iaculis. Etiam egestas est lorem, at vehicula odio convallis eu. Nam condimentum, nisl sed rutrum tempor, sapien nibh elementum justo, non semper leo ante at tortor. Praesent ac enim a nisi luctus commodo. Vivamus et euismod leo, sed volutpat ligula. Fusce nec tempus lacus, a placerat risus. Phasellus luctus.
[[/div]]

{{@@[[div class="centered"]]@@}}
----
,,//Justified Text//,,
[[div class="justified"]]
Ut ut quam non augue malesuada lacinia. Sed a eros sit amet lacus cursus tempor viverra nec velit. Suspendisse vel ante tincidunt, ultrices metus id, pellentesque odio. Integer sodales enim vel ligula sagittis, quis aliquam mauris tincidunt. Maecenas fringilla turpis vitae luctus tempus. Suspendisse ut mollis lectus. Donec nisi mauris, laoreet ac urna at, semper lobortis turpis. Sed purus elit, scelerisque ut tortor sed, laoreet dapibus odio. In libero mauris.
[[/div]]

{{@@[[div class="justified"]]@@}}
----
,,//Indented Text//,,
[[div class="indented" style="text-align: left"]]
Aliquam fringilla eleifend tellus, feugiat pellentesque lacus auctor vitae. Praesent volutpat rutrum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at commodo leo. Aliquam sapien eros, bibendum id vulputate in, convallis vestibulum diam. Suspendisse ultricies vel ante eu porttitor. In a massa ante. Sed eu elit.
[[/div]]

{{@@[[div class="indented"]]@@}}
----
,,//End Mark//,,
[[div class="end-mark" style="text-align: left"]]
“**[*https://en.wiktionary.org/wiki/end_mark end mark]:** A typographic element that signals the end of an article. Often they are simple bullets, but they can also be intricate symbols.”

{{@@[[div class="end-mark"]]@@}} places an end mark at the end of the last paragraph within its div (like at the end of the next one!). Use it in conjunction with any additional special text formatting. This theme uses the default end mark symbol of a white diamond divided by an ‘X’.

End marks are a classic print convention. On the SCP Wiki, an end mark would be most appropriate in Tale writing.
[[/div]]
----
,,//Red Document Revision Text//,,
[[span class="rev-red"]] Inoculation disseminated. [[/span]]

{{@@[[span class="rev-red"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Yellow Document Revision Text//,,
[[span class="rev-yellow"]] Loading paused. Refresh? [[/span]]

{{@@[[span class="rev-yellow"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Green Document Revision Text//,,
[[span class="rev-green"]] Outdated information appears in __green__. [[/span]]

{{@@[[span class="rev-green"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Blue Document Revision Text//,,
[[span class="rev-blue"]] Inoculation completed! [[/span]]

{{@@[[span class="rev-blue"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Computer Terminal Text//,,
[[span class="terminal-span"]] [REDACTION] [[/span]]
[[span class="terminal-span"]] [EXPUNGEMENT] [[/span]]
[[span class="terminal-span"]] [DATA LOST] [[/span]]

{{@@[[span class="terminal-span"]]@@}} [TEXT] {{@@[[/span]]@@}}
----
,,//Bold-Text//,,
[[span class="bt"]]Example[[/span]]

{{@@[[span class="bt"]]@@}} Text {{@@[[/span]]@@}}

Alternatively, you can still create bold text by the use of Wikidot Syntax. This span is, however, necessary for the following two pieces of special formatting.
----
,,//Bold-Text + Big-Bar//,,
[[span class="bt bb"]]Example[[/span]]

{{@@[[span class="bt bb"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Bold-Text + Bar-Header//,,
+++* [[span class="bt bh"]]EXAMPLE[[/span]]

@@+++*@@ {{@@[[span class="bt bh"]]@@}} TEXT {{@@[[/span]]@@}}
----
,,//Bold-Text + textColor//,,
[[span class="tb"]]Example[[/span]]

{{@@[[span class="tb"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Bold-Text + textColor + Big-Bar//,,
[[span class="tb bb"]]Example[[/span]]

{{@@[[span class="tb bb"]]@@}} Text {{@@[[/span]]@@}}
----
,,//Blinking Text Cursor//,,
[[div id="append-blink-bar"]]
{{@@[[div id="append-blink-bar"]]@@}} places a blinking “Full Block” character at the end of the last paragraph within its div. This mimics a vintage blinking cursor, as seen at the end of a command prompt.
[[/div]]
----
,,//Fancy Horizontal Rule//,,
[[div class="fancyhr"]]
-----
[[/div]]

{{@@[[div class="fancyhr"]]@@}}
@@----@@
{{@@[[/div]]@@}}
----
,,//Fancy Border//,,
[[div class="fancyborder"]]

[[/div]]

{{@@[[div class="fancyborder"]]@@}}
----
,,//Special Heading Area 1//,,
[[div class="lite-heading"]]
----
++* HEADING
+++* SUB-HEADING
----
[[/div]]

{{@@[[div class="lite-heading"]]@@}}
@@----@@
@@++* HEADING@@
@@+++* SUBHEADING@@
@@----@@
{{@@[[/div]]@@}}
----
,,//Special Heading Area 2//,,
[[div class="lite-heading"]]
----
++* ADDENDA MATERIALS
----
[[/div]]

{{@@[[div class="lite-heading"]]@@}}
@@----@@
@@++* ADDENDA MATERIALS@@
@@----@@
{{@@[[/div]]@@}}
----
,,//Alternative Image Showcase//,,
[[div class="image-showcase"]]
[[=image https://scp-wiki.wdfiles.com/local--files/theme:classic/base_image_frame.png]]
[[/div]]

{{@@[[div class="image-showcase"]]@@}}
{{@@[[=image URL_HERE]]@@}}
{{@@[[/div]]@@}}
----
,,//Scene Break//,,

[[=image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/scp_foundation_logo.png class="scene-break"]]

{{@@[[=image URL_HERE class="scene-break"]]@@}}

A {{scene-break}} is an ornamental symbol that “signals a pause for the reader and a transition in the narrative.”

Scene breaks are a classic print convention. Here is an example of one from //[https://en.wikipedia.org/wiki/Section_(typography)#/media/File:Section_break_01_by_Pengo.jpg Alice's Adventures in Wonderland]//. On the SCP Wiki, a {{scene-break}} would be most appropriate in Tale writing.
----
,,//Scene Break + Tinted Icon//,,

[[=image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/scp_foundation_logo.png class="scene-break icon-tint"]]

{{@@[[=image URL_HERE class="scene-break icon-tint"]]@@}}

@@ @@

{{icon-tint}} should only be used in tandem with black logos. Control the icon's color by modifying the {{@@--@@hue}} variable inside {{[[module CSS]]}}:

[[div class="code terminal"]]
##var(--c-builtin)|@@--@@hue##: ##var(--c-value)|#deg##;
[[/div]]

Replace {{#}} with your desired positive integer. Default is {{325deg}}.
----
,,//ListPages Navigator -- First Page//,,
[[div class="listPagesNav"]]
  [[div class="listPagesNav-next"]]
[# Next Iteration ▷]
  [[/div]]
[[/div]]

@@ @@

{{@@[[div class="listPagesNav"]]@@}}
{{@@[[div class="listPagesNav-next"]]@@}}
@@[/offset/1 Next Iteration ▷]@@
{{@@[[/div]]@@}}
{{@@[[/div]]@@}}
----
,,//ListPages Navigator -- Subsequent Pages//,,
[[div class="listPagesNav"]]
  [[div class="listPagesNav-next"]]
[# Next Iteration ▷]
  [[/div]]
  [[div class="listPagesNav-prev"]]
[# ◁ Back]
  [[/div]]
[[/div]]

{{next}} must always go first:

{{@@[[div class="listPagesNav"]]@@}}
{{@@[[div class="listPagesNav-next"]]@@}}
@@[/offset/1 Next Iteration ▷]@@
{{@@[[/div]]@@}}

{{@@[[div class="listPagesNav-prev"]]@@}}
@@[/offset/0 ◁ Back]@@
{{@@[[/div]]@@}}
{{@@[[/div]]@@}}
----
,,//Fade to Black//,,
[[div class="fade-away"]]
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
[[/div]]

{{@@[[div class="fade-away"]]@@}}

To control the fade length, insert as many sets of {{@@}} inside the div as you desire.
----
,,//Fade to White//,,
[[div class="whiteout"]]
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
[[/div]]

{{@@[[div class="whiteout"]]@@}}

To control the fade length, insert as many sets of {{@@}} inside the div as you desire.
----
,,//Page Footing//,,
[[div class="footing"]]
[[/div]]

{{@@[[div class="footing"]]@@}}
----
,,//Related Articles Box//,,
[[div class="related-flex"]]
  [[div class="related"]]
* [[[/| Front Page - SCP Foundation]]]
  [[/div]]
[[/div]]

{{@@[[div class="related-flex"]]@@}}
{{@@[[div class="related"]]@@}}
@@* **[[[link-to-a-page|Custom Text]]]**@@
{{@@[[/div]]@@}}
{{@@[[/div]]@@}}
----
,,//Series Navigator//,,
[[div class="series-nav"]]
<< [# Previous Page] | [[size 120%]][# Current Page][[/size]] | [# Next Page] >>
[[/div]]

{{@@[[div class="series-nav"]]@@}}
<< Previous Page | @@[[size 120%]]Current Page[[/size]]@@ | Next Page >>
{{@@[[/div]]@@}}
----
,,//Earthworm Series Navigator//,,
,,//by [[user Croquembouche]]//,,

[[=image https://i.imgur.com/Ik4wkeE.png]]

[[[component:earthworm|Consult the component page]]] for setup instructions.

[[/div]]

[[/collapsible]]

@@ @@

[[div class="templateInfo"]]
[[# Src]]
+* Source Code
----
[[/div]]

@@ @@

[[collapsible hideLocation="both" show="Show CSS" hide="Hide CSS"]]

[[code type="CSS"]]
/* FONTS */
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap);
/* YUI TAB BASE */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);
[[/code]]

[[code type="CSS"]]
/* Flopstyle: DARK
 * [2022 Wikidot Theme]
 * Created by Lt Flops
 * Forked From:
 *	Flopstyle CSS by Lt Flops
 *	PLACESTYLE CSS by Placeholder McD
 * Based On:
 *	Ad Astra Theme by NatVoltaic, stormbreath
 *	AZASTYLE CSS by Azamo
 *	BASALT Theme by Azamo, Placeholder McD
 *	BLANKSTYLE CSS by Placeholder McD, HarryBlank
 *	Night Rush Theme by Nagiros
 *	Paperstack Theme by EstrellaYoshte
 *	Penumbra Theme by EstrellaYoshte
**/

/* -------- HEADER AREA -------- */
/* ---- SCROLLBAR + SELECTION ---- */
 /* Cross-Browser Supports */
 ::-webkit-scrollbar {
    width: 1rem;
}

 #side-bar::-webkit-scrollbar {
    width: .4rem;
}

 ::-webkit-scrollbar-thumb {
    background: var(--accentColor);
}

 ::-webkit-scrollbar-track {
    background: var(--fgColor);
}

 ::selection {
    color: var(--keyColor);
    background: var(--accentColor);
}

/* ---- COMMON ---- */
 :root {
 /* -- THESE VARIABLES MAY BE CHANGED -- */
    --accentColor: hsl(325, 80%, 60%);
    --accentColorLite: hsla(325, 80%, 70%, .5);
    --hue: 325deg;
    --tint: calc(var(--hue) - 40deg);

    --titleColor: var(--accentColor);
    --subtitleColor: var(--accentColor);

 /* -- THESE VARIABLES SHOULD NOT BE CHANGED -- */
    --textColorHigh: var(--textColor);
    --textColorMid: var(--textColorAlt);
    --textColorLow: hsla(0, 0%, 100%, .68);
    --textColorIdle: hsla(0, 0%, 100%, .34);

    /* DEPRECATED */
    --textColor: hsla(0, 0%, 100%, .8);
    --textColorAlt: hsla(0, 0%, 100%, .74);
    /* ---- */

    --alphaColor: hsl(0, 0%, 100%);
    --keyColor: hsl(0, 0%, 5%);

    --bright-red: hsl(360, 89%, 62%);
    --strong-lime-green: hsl(120, 80%, 40%);
    --dark-grayish-blue: hsl(212, 15%, 63%);

    --bgColor: hsl(222, 12%, 21%);
    background: var(--bgColor);
    --fgColor: hsl(222, 16%, 15%);

 /* -- LOGO -- */
    --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png);

 /* -- FONTS -- */
    --header-font: "Montserrat", sans-serif;
    --body-font: "Inter", sans-serif;
    --script-font: "Comic Neue", cursive;

 /* -- MISCELLANEOUS --
 *	Courtesy Of EstrellaYoshte
 */
    --side-bar-width: 17em;
    --content-wrap-width: 1080px;

    scroll-behavior: smooth;
    scrollbar-color: var(--accentColor) var(--fgColor);
}

 body {
    color: var(--textColor);
    background-color: var(--bgColor);
    background-image:
       linear-gradient(
    	var(--fgColor) 0 90px,
    	var(--bgColor) 200px 100%);
    background-repeat: no-repeat;

    font-family: var(--body-font);
    font-size: 15px;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;

    accent-color: var(--accentColor);

 /* -- ACS COLORS --
 *	Courtesy of Nagiros
 */
 /* Green */
    --one-color: 40, 159, 107;
 /* Blue */
    --two-color: 117, 167, 242;
 /* Yellow */
    --three-color: 255, 226, 82;
 /* Orange */
    --four-color: 255, 141, 54;
 /* Red */
    --five-color: 255, 34, 67;
 /* Violet */
    --six-color: 161, 73, 248;
 /* White */
    --white-bar: 205, 206, 208;

    --lg-bar: 118, 118, 130;
    --gray-bg: 66, 66, 72;
}

 #content-wrap {
    max-width: var(--content-wrap-width);
    margin: 2.65em auto 0;
}

 #side-bar {
    width: var(--side-bar-width);
}

 #main-content {
    top: -.8em;
}

 @media (max-width: 767px) {
     #main-content {
    	margin: 0 5%;
    }

     #page-content {
    	font-size: calc(15px * .95);
    }
}

 @media (min-width: 768px) {
     #page-content {
    	font-size: calc(15px * 1.05);
    }
}

/* ---- SITE BANNER ---- */
 div#container-wrap,
 #header{
     background: 0;
}
 #header h1,
 #header h2{
     float: none;
     margin: 0;

     text-align: center;
}
 #header h2{
     margin-top: .5em;
}
 #header h1 span,
 #header h2 span{
   /* Hides the Existing Text */
     display: none;
}
 #header h1 a::before{
   /* Sets the New Text's Content From Variable */
     content: var(--header-title, "SCP FOUNDATION");

     color: var(--titleColor);

     font-size: 1.1em;
}
 #header h2::before{
     content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");

     color: var(--subtitleColor);

     font-size: 1.25em;
}
 #header h1 a::before,
 #header h2::before{
   /* Styles the New Text */
     font-family: var(--header-font);
     letter-spacing: 2px;
     text-shadow: none;
}
 @media (max-width: 767px){
     #header h2{
          margin-top: 0;
    }
     #header h1 a::before{
          font-size: calc(110% * .7);
    }
     #header h2::before{
          font-size: calc(125% * .7);
    }
}
 #extra-div-1{
     position: absolute;
     top: 0;
     width: 100%;
     height: 11.67em;

     background: var(--lgurl) center no-repeat;
     background-size: contain;
     filter: opacity(.33);

     z-index: 1;
}

/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
    }
}
 #search-top-box-form input.button{
     margin: 0;
}
 #search-top-box-form input[type=submit]{
     background: var(--fgColor) !important;
     transition: color .2s ease-in-out;
}
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;
 
     font-family: var(--body-font);
     font-size: calc(15px * 1.05);
}
 #search-top-box-form input[type=submit]:hover{
     color: var(--accentColor);
     border-color: var(--accentColor);
}
 #search-top-box-form > input[type=text]{
     display: none;
}

/* ---- TOP-BAR ---- */
 #top-bar{
     display: flex;
     justify-content: center;
     right: 0;
}
 .top-bar::before{
     position: absolute;
     top: -.5em;
     left: calc(100% / 4);
     width: calc(100% / 2);
     height: 5px;
     content: "";

     background:
        linear-gradient(
          to right,
          transparent,
          var(--accentColor) 50%,
          transparent 100%);
}
 #top-bar,
 #top-bar a{
     color: var(--textColor);
     transition: 0;
}
 #top-bar ul li ul{
     border-color: var(--accentColor);
}
 #top-bar ul li ul a{
     color: var(--textColor);
}
 #top-bar ul li.sfhover a,
 #top-bar ul li:hover a{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 #top-bar ul li.sfhover ul li a,
 #top-bar ul li:hover ul li a{
     border-top-color: var(--bgColor);
}
 #top-bar ul li.sfhover a:hover,
 #top-bar ul li:hover a:hover{
     color: var(--accentColor);
   /* Top-Bar Hover Background-Color */
     background: var(--fgColor);
     transition: color .2s ease-in-out;
}
 @media (max-width: 767px){
     .mobile-top-bar{
          display: flex;
          justify-content: center;
          min-width: 100%;
          top: 0;
          left: 0;
    }
     .mobile-top-bar::before{
          position: absolute;
          top: -.425em;
          width: calc(100% / 1.2909);
          height: 5px;
          content: "";

          background:
             linear-gradient(
               to right,
               transparent,
               var(--accentColor) 50%,
               transparent 100%);
    }
}

/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: var(--textColor);
     z-index: 1;
}
 @media (max-width: 767px){
     #login-status{
          top: 0;
          right: 0;
 
          z-index: 20;
    }
}
 #login-status a{
     color: var(--accentColor);
}
 #login-status ul a{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 #login-status ul a:hover{
     color: var(--accentColor);
     background: var(--bgColor);
}
 @media (max-width: 767px){
     #header .printuser{
          font-size: 0;
    }
}
 .printuser a{
     margin: 0;
}
 .printuser img.small{
     width: 18px;
     height: 18px;
     padding: 1px 4px 0 0;

     background-image: none !important;
}
 @media (max-width: 767px){
     #header .printuser img.small{
          transform: translate(0, 4px);
    }
}
 #my-account{
     display: none;
}
 #account-topbutton{
     border-color: var(--accentColor);

     font: unset;
}
 @media (max-width: 767px){
     #account-topbutton{
          margin: 0 0 0 5px;
    }
}
 #account-topbutton:hover{
     color: var(--fgColor);
     background: var(--accentColor);
}

/* ---- SIDE-BAR ---- */
 #top-bar .open-menu a{
     color: var(--accentColor);
     background: var(--fgColor);
     border: thin solid var(--accentColor);
     border-radius: 0;
     box-shadow: none;
}
 #top-bar .open-menu a:hover{
     padding: 0;

     color: var(--fgColor);
     background: var(--accentColor);
}
 @supports (-moz-appearance: none){
     #top-bar .open-menu a:hover{
          color: var(--fgColor);
          background: var(--accentColor);
    }
}
 #side-bar{
     padding: 1em 0;

     background: var(--fgColor);
}
 #side-bar .side-block{
     background: var(--fgColor);
     border: 0;
     box-shadow: none;
}
 #side-bar .side-block.media{
     background: var(--fgColor);
}
 .side-block.media a:hover{
     padding: 0;
}
 #side-bar .side-block.resources{
     background: var(--fgColor);
}
 .side-block.media > *{
     display: flex;
     justify-content: space-evenly;
}
 .menu-item > .image{
     display: none;
}
 #side-bar .heading{
     color: var(--textColorAlt);
     border-bottom-color: var(--textColor);

     font: bold 95% "Josefin Sans", sans-serif;
}
 @media (max-width: 767px){
     #top-bar .open-menu a:hover{
          box-shadow: none;
    }
     #side-bar .heading{
          margin-left: -1em;
          padding-left: 1em;
    }
     #side-bar:target{
          border: 0;
    }
     #side-bar .close-menu{
          position: fixed;
          display: block;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;

          background: hsla(0, 0%, 0%, .3);
          background-position: 17em 50%;
          opacity: 0;
          transition:
             width .5s ease-in-out .1s,
             opacity 1s ease-in-out 0s;

          pointer-events: none;
          z-index: -1;
    }
     #side-bar:target .close-menu{
          right: 0;
          left: auto;
          width: calc(100% - var(--side-bar-width));

          opacity: 1;

          pointer-events: auto;
    }
     #side-bar:target .close-menu:hover{
          background: unset;
    }
}

/* -------- CONTENT AREA -------- */
/* ---- SIDEBOXES | TYPE 'A' ----
 * Adapted From:
 *   Penumbra Theme by EstrellaYoshte
**/
 .anchor{
     position: -webkit-sticky;
     position: sticky;
     top: 0;

     z-index: 5;
}
 .authorbox,
 .sidebox,
 .sidecontainer{
     position: absolute;
     width: calc((100vw - 870px) / 2);
     max-height: calc(100vh - 15rem);
     padding: .33rem 1.6rem;

     box-sizing: border-box;

     z-index: 5;
}
 .authorbox,
 .sidebox{
     font-size: 90%;
}
 .authorbox{
     right: 103.5%;
     max-width: calc((100vw - 921.2px) / 2) !important;
     margin-right: .53rem;
     padding-right: 1rem;
}
 .sidebox,
 .sidecontainer{
     left: 103.5%;
}
 @media (max-width: 1280px){
     .authorbox,
     .sidebox{
          display: none;
    }
}
 .authorbox .wiki-content-table,
 .sidebox .wiki-content-table{
     max-width: 20em !important;
}
 .sidebox img{
     width: 7.5em;
}
 .authorbox tr th,
 .authorbox tr td,
 .sidebox tr th,
 .sidebox tr td{
     padding: .27rem !important;
}
 .flavorbox{
     width: 75%;
     margin: auto auto .33rem;
     padding: 0 1rem;

     color: var(--textColorAlt);
     background: var(--fgColor);
     border: solid transparent;
}

/* ---- SIDEBOXES | TYPE 'B' ----
 *   Courtesy Of Woedenaz
**/
 .limit{
     line-height: 1.5;
}
 .limit br{
     display: block;
}
 .sidecontainer{
     margin-left: .53rem;

     color: var(--textColorAlt);
     background-color: var(--fgColor);
     border-top: medium solid var(--accentColor);

     overflow: auto;
}
 @media (max-width: 1280px){
     .sidecontainer{
          top: 1rem;
          right: calc(((100vw - 45.8rem) / 2) * -1);
          left: initial;
          width: auto;
          max-width: 65vw !important;
          padding-right: .4rem;
          padding-left: .4rem;

          background-color: hsla(0, 0%, 0%, 0);
          border: 0;
          -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem));
          clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem));
          -webkit-transition:
             color .2s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s;
          transition:
             color .2s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s;
          -o-transition:
             color .2s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s;
          transition:
             color .2s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s;
          transition:
             color .2s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s;

          overflow-x: hidden;
          overflow-y: hidden;
          scrollbar-width: thin;
    }
     .sidecontainer::-webkit-scrollbar{
          width: .5rem;
    }
     .sidecontainer::before,
     .sidecontainer::after{
          position: absolute;
          right: 0;
          content: "";
    }
     .sidecontainer::before{
          top: calc(50% - .75rem);
          width: 0;
          height: 0;

          border-top: 11px solid transparent;
          border-right: 11px solid var(--accentColor);
          border-bottom: 11px solid transparent;
          transition: border .2s ease-in-out .1s;

          z-index: 10;
    }
     .sidecontainer::after{
          top: 0;
          width: 100%;
          max-width: .75rem;
          height: 100%;
          max-height: calc(100vh - 15rem);

          background: var(--fgColor);
          box-shadow: .125rem 0 0 0 var(--accentColor);
          transition:
             box-shadow .4s ease-in-out .1s,
             max-width .4s ease-in-out .1s;

          z-index: -1;
    }
     .sidecontainer > *{
          opacity: 0;
          -webkit-transition: opacity .2s ease-in-out .2s;
          -o-transition: opacity .2s ease-in-out .2s;
          transition: opacity .2s ease-in-out .2s;
    }
     .sidecontainer:hover,
     .sidecontainer:active{
          background-color: var(--fgColor);
          -webkit-clip-path: inset(-.125rem -.25rem 0 0);
          clip-path: inset(-.125rem -.25rem 0 0);
          -webkit-transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s;
          transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s;
          -o-transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s;
          transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s;
          transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s;

          overflow-y: scroll;
    }
     .sidecontainer:hover::before,
     .sidecontainer:active::before{
          border: 0;
    }
     .sidecontainer:hover::after,
     .sidecontainer:active::after{
          right: 0;
          max-width: 100%;

          box-shadow: 0 -.125rem 0 0 var(--accentColor);
    }
     .sidecontainer:hover > *,
     .sidecontainer:active > *{
          opacity: 1;
          transition: opacity .4s ease-in-out .1s;
    }
}
 @media (max-width: 767px){
     .sidecontainer,
     .sidecontainer:hover,
     .sidecontainer:active{
          right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1.6rem);
    }
}

/* ---- FANCY COLLAPSIBLES ---- */
/* Base */
 .collapsible-block-folded,
 .collapsible-block-unfolded-link{
     margin: 1rem auto;
     padding: .53rem 1rem;

     background: var(--fgColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);

     text-align: center;
}
 .collapsible-block-unfolded-link{
     border-top: thick solid var(--accentColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .collapsible-block-unfolded > *:nth-child(3){
     border-top: 0;
     border-bottom: thick solid var(--accentColor);
}
 .collapsible-block-link{
     font: 1.25rem/1.5 var(--header-font);
     letter-spacing: 1px;

     white-space: normal;
}
 @media (max-width: 767px){
     .collapsible-block-link{
          font-size: 100%;
    }
}

/* Pseudo-elements */
 .collapsible-block-link::before{
     content: "+ ";
}
 .collapsible-block-link::after{
     content: " +";
}
 .collapsible-block-unfolded .collapsible-block-link::before,
 .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::before{
     content: "− "
}
 .collapsible-block-unfolded .collapsible-block-link::after,
 .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::after{
     content: " −"
}
 .collapsible-block-folded:hover,
 .collapsible-block-unfolded-link:hover{
     background-color: var(--accentColorLite);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .collapsible-block-link:hover{
     padding: .067rem !important;

     color: var(--alphaColor);
     border-bottom: thin solid var(--alphaColor) !important;
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}

/* Licensebox Collapsible */
 .licensebox .collapsible-block-content {
     text-align: center;
}

 .licensebox blockquote,
 .licensebox div.blockquote {
     text-align: left;
}

/* ---- INFO BAR ---- */
 .info-container{
     --barColour: var(--fgColor);
     --linkColour: var(--accentColor);
}
 .info-container .collapsible-block-link{
     font-size: 100%;
}
 .info-container .collapsible-block-unfolded-link{
     border: 0;
}
 .info-container div.collapsible-block-content{
     padding: 0 .53rem 3rem;
}
 @media (max-width: 767px){
     .info-container div.collapsible-block-content div{
          margin-right: 0;
          margin-left: 0;
    }
}
 .info-container .wiki-content-table{
     width: 90%;
}
 .info-container .collapsible-block-folded,
 .info-container .collapsible-block-unfolded-link{
     padding: 0;
}
 .info-container .collapsible-block-folded:hover,
 .info-container .collapsible-block-unfolded-link:hover{
      background-color: var(--accentColor);
     --linkColour: var(--fgColor);
}
 #u-author_block > p > a,
 #u-author_block > p > a:hover{
     border-bottom: thin solid var(--accentColor);
     box-shadow: none !important;
     transition: all .2s cubic-bezier(.77, 0, .18, 1) !important;

     font-weight: bold;
}
 #u-author_block > p > a:hover{
     padding: .8rem;

     color: var(--barColour);
     background: var(--linkColour);
}

/* -- INFO BAR PATCH --
 *   Courtesy Of Monkatraz
**/
 .info-container .collapsible-block-link,
 .info-container .collapsible-block-link:hover,
 .info-container .collapsible-block-unfolded-link,
 .info-container .collapsible-block-unfolded-link:hover{
     padding: 0 !important;
}
 .info-container .collapsible-block-link::before,
 .info-container .collapsible-block-unfolded-link::before,
 .info-container .collapsible-block-link::after,
 .info-container .collapsible-block-unfolded-link::after{
     display: none;
}

/* ---- PAGE RATING ---- */
 .page-rate-widget-box{
     display: flex;
     width: max-content;
     margin: .53rem auto;
     padding: .2rem;

     background: var(--fgColor);
     border-radius: 0;
     box-shadow:
        3px 0 0 0 var(--accentColor),
        -3px 0 0 0 var(--accentColor);
}
 div.page-rate-widget-box .rate-points{
     color: var(--textColorAlt);
     background: transparent !important;
     border: 0;

     text-transform: capitalize;
}
 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown,
 .page-rate-widget-box .cancel{
     background: transparent;
     border: 0;
}
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a,
 .page-rate-widget-box .cancel a{
     color: var(--textColorAlt);
}
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover,
 .page-rate-widget-box .cancel a:hover{
     color: var(--keyColor);
}
 .page-rate-widget-box .rateup a:hover{
     background-color: var(--strong-lime-green);
}
 .page-rate-widget-box .ratedown a:hover{
     background-color: var(--bright-red);
}
 .page-rate-widget-box .cancel a:hover{
     background-color: var(--dark-grayish-blue);
     border-radius: 0;
}

/* ---- INFO MODULE ---- */
 #page-content .creditRate{
     float: none;
     display: flex;
     width: max-content;
     margin: .53rem auto;
}
 #page-content .rate-box-with-credit-button{
     padding: .2rem 0;

     background: var(--fgColor);
     border: 0;
     border-radius: 0;
     box-shadow:
        3px 0 0 0 var(--accentColor),
        -3px 0 0 0 var(--accentColor);
}
 .creditRate .page-rate-widget-box{
     display: inline;
}
 #page-content .creditButton p a{
     padding: 0;

     border: 0;

     font-size: .9rem;
}
 .creditButton p a,
 .creditButtonStandalone p a{
   /* Affects creditButton + creditButtonStandalone */
     color: var(--textColorAlt);
}
 .rate-box-with-credit-button .fa-info:hover{
     color: var(--strong-lime-green);
}
 #page-content .modalbox{
     padding: .53rem;

     background: var(--bgColor);
     box-shadow: none;
}
 #page-content .modalbox .page-rate-widget-box{
     margin: auto;
}
 .close-credits,
 .credit-back{
     filter: invert(.4) sepia(.5) saturate(500%) hue-rotate(var(--tint));
}
 #page-content .close-credits{
     width: 4rem;
}

/* ---- STANDALONE INFO MODULE ---- */
 #page-content .creditButtonStandalone p a{
     padding: .2rem 0 !important;

     background: var(--fgColor);
     border-radius: 0;
     box-shadow:
        3px 0 0 0 var(--accentColor),
        -3px 0 0 0 var(--accentColor);

     font-size: .9rem;
}
 #page-content .creditButtonStandalone p a:hover{
     padding: .2rem 0 !important;

     color: var(--keyColor);
     background: var(--accentColor);
}

/* ---- BYLINE ---- */
 .byline{
     display: flex;
     margin-top: -.33rem;

     font-size: 85%;
     text-align: center;
}
 .byline p{
     display: flex;
     flex-direction: column;
     max-width: 50%;
     margin: auto;

     line-height: 0;
}
 .byline span:nth-of-type(1):before,
 .byline span:nth-of-type(2):before{
     padding-right: .27rem;

     color: var(--accentColor);

     font: 135%/1 "Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", sans-serif;
}
 .byline span:nth-of-type(1):before{
     content: "✎"
}
 .byline span:nth-of-type(2):before{
     content: "⧗"
}
 .byline span:nth-of-type(2):after{
     content: "-min read"
}

/* ---- FORMATTING | [GENERAL] ---- */
 h1, h2, h3, h4, h5, h6{
     display: flex;
     justify-content: center;

     font-family: var(--header-font);
     line-height: 1.2;
     text-align: center;
     text-underline-offset: 25%;
}
 h1, h2, h3, h4{
     color: var(--accentColor);
}
 h5, h6{
     color: var(--textColorAlt);
}

 h1{ font-size: 1.95rem; }
 h2{ font-size: 1.55rem; }
 h3{ font-size: 1.35rem; }
 h4{ font-size: 1.25rem; }
 h5{ font-size: 1.05rem; }
 h6{ font-size: .95rem; }

 #page-title{
     display: none;
}
 .meta-title,
 #breadcrumbs,
 .pseudocrumbs{
     text-align: center;
}
 .meta-title{
     margin: 0;

     color: var(--accentColor);
     border: 0;

     font: 1.95rem var(--header-font);
     letter-spacing: 1px;
}
 .meta-title p{
     border-bottom: thin solid var(--accentColorLite);
}
 hr{
     height: 0;
     margin: 1rem 0;

     background: transparent;
     border-top: thin solid var(--accentColorLite);
}
 @media (max-width: 767px){
     .meta-title p{
          margin: 0 -5.5%;
    }
     #page-content > hr,
     #page-content > .list-pages-box > .list-pages-item > hr{
          margin: 3rem -5.5%;
    }
}
 *, a, span{
   /* No Line Breaks Mid-Word */
     word-break: normal;
}
 ul{
     list-style-type: "❖ ";
}
 li, p{
     line-height: 1.5;
     text-decoration-color: var(--textColor);
     text-underline-offset: 30%;
}
 ol li, ul li{
     margin: .27rem 0 .53rem;
}
 #toc{
     background: var(--fgColor);
     border: 0;
     border-top: thick solid var(--accentColor);
}
 #toc .title{
     color: var(--accentColor);
}
 strong{
     color: var(--accentColor);

     text-decoration-color: inherit;
}

 #page-content h2,
 #page-content h3,
 #page-content h4{
     filter: saturate(.85) brightness(1.15);
}

/* Links */
 a,
 a.newpage,
 a:visited,
 #side-bar a{
     color: var(--accentColor);
     transition: color .2s ease-in-out;
}
 a.newpage{
     filter: hue-rotate(30deg);
}
 a:hover,
 a.newpage:hover,
 a:visited:hover,
 #side-bar a:hover{
     padding-bottom: .13rem;

     color: var(--keyColor);
     background-color: var(--accentColor);

     text-decoration: none;
}
 #page-content a{
     padding-bottom: .067rem;

     border-bottom: thin solid var(--accentColorLite);
}
 #page-content a:hover{
     padding-bottom: .13rem;
}
 #page-content a:hover,
 #page-content .rateup a, #page-content .ratedown a, #page-content .cancel a,
 #page-content .pseudocrumbs a,
 #page-content .creditButtonStandalone p a,
 #page-content a.disruptionHeader,
 #page-content .yui-nav li a,
 #page-content #toc a{
     border: 0;
}
 #page-content a.disruptionHeader{
     padding: .33rem 0;
}
 #page-content .yui-nav li a{
     padding: 0;
}

/* ---- FOOTNOTES ---- */
 sup{
     top: -.375em;
}
 #page-content a.footnoteref{
     border: 0;

     font-size: .9rem;
     font-weight: bold;
}
 #page-content a.footnoteref:hover{
     color: var(--keyColor);
}
 .hovertip{
     font-size: 1rem;

     background: var(--fgColor) !important;
     border: thin solid var(--accentColor) !important;
}
 .footnotes-footer,
 .equation .e-footer,
 .footnote .f-footer,
 .reference .r-footer{
     display: none;
}

/* ---- IMAGE BLOCK ---- */
/* -- STANDARD -- */
 .scp-image-block{
     border-color: var(--accentColorLite);
     box-shadow: none;
     box-sizing: border-box;
}
 .scp-image-block .scp-image-caption{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: var(--accentColorLite);

     font-size: 100%;
}
 .scp-image-block.block-right{
     margin-right: 0;
}
 @media (max-width: 540px){
     .scp-image-block.block-right,
     .scp-image-block.block-left{
          float: none;

          margin-right: auto;
          margin-left: auto;
    }
}
 @media only screen and (max-width: 600px){
     .scp-image-block.block-right{
          float: none;
    }
}

/* -- BOOTSTRAP IMAGE BOX --
 *   by Timothy Foster
**/
 .image-box{
     background: var(--fgColor) !important;
}

 .image-box-heading{
     color: var(--keyColor) !important;

     font: 1.25rem var(--header-font) !important;
}

 .image-box-link{
     padding: 0 !important;

     border: 0 !important;
}

 .image-box-caption{
     font-size: 100% !important;
}

/* Primary */
 .image-box-primary .image-box-link:hover{ background: var(--accentColorLite); }
 .image-box-primary{ border-color: var(--accentColorLite) !important; }
 .image-box-primary .image-box-heading{ background: var(--accentColor) !important; }
 .image-box-primary .image-box-caption{ color: var(--textColorAlt) !important; }

/* Info */
 .image-box-info .image-box-link:hover{ background: hsla(194, 66%, 71%, .5); }
 .image-box-info{ border-color: hsl(194, 66%, 61%) !important; }
 .image-box-info .image-box-heading{ background: hsl(194, 66%, 61%) !important; }

/* Success */
 .image-box-success .image-box-link:hover{ background: hsla(120, 39%, 64%, .5); }
 .image-box-success{ border-color: hsl(120, 39%, 54%) !important; }
 .image-box-success .image-box-heading{ background: hsl(120, 39%, 54%) !important; }

/* Danger */
 .image-box-danger .image-box-link:hover{ background: hsla(2, 64%, 68%, .5); }
 .image-box-danger{ border-color: hsl(2, 64%, 58%) !important; }
 .image-box-danger .image-box-heading{ background: hsl(2, 64%, 58%) !important; }

/* Warning */
 .image-box-warning .image-box-link:hover{ background: hsla(35, 84%, 72%, .5); }
 .image-box-warning{ border-color: hsl(35, 84%, 62%) !important; }
 .image-box-warning .image-box-heading{ background: hsl(35, 84%, 62%) !important; }

/* None */
 .image-box-none .image-box-link:hover{ background: hsla(0, 0%, 95%, .5); }
 .image-box-none .image-box-heading{ background: var(--textColorAlt) !important; }
 .image-box-none .image-box-caption{ color: var(--textColorAlt) !important; }


/* -- CENTERED IMAGES ON MOBILE ----
 * Courtesy Of:
 *   EstrellaYoshte
 *   PeppersGhost
**/
 .imagediv{
     float: right;
     margin: 1rem;
}
 @media (max-width: 540px){
     .imagediv{
          float: none;

          text-align: center;
    }
}

/* ---- TABLE STYLING ----
 * Adapted From:
 *   BLANKSTYLE CSS by Placeholder McD, HarryBlank
**/
 .table1{   /* Green */
   --accentColor: rgb(var(--one-color, 40, 159, 107));
   --accentColorLite: hsla(154, 60%, 49%, .5);
}
 .table2{   /* Blue */
   --accentColor: rgb(var(--two-color, 117, 167, 242));
   --accentColorLite: hsla(216, 83%, 80%, .5);
}
 .table3{   /* Yellow */
   --accentColor: rgb(var(--three-color, 255, 226, 82));
   --accentColorLite: hsla(50, 100%, 76%, .5);
}
 .table4{   /* Orange */
   --accentColor: rgb(var(--four-color, 255, 141, 54));
   --accentColorLite: hsla(26, 100%, 71%, .5);
}
 .table5{   /* Red */
   --accentColor: rgb(var(--five-color, 255, 34, 67));
   --accentColorLite: hsla(351, 100%, 67%, .5);
}
 .table6{   /* Violet */
   --accentColor: rgb(var(--six-color, 161, 73, 248));
   --accentColorLite: hsla(270, 93%, 73%, .5);
}
 .table0{   /* White */
   --accentColor: rgb(var(--white-bar, 205, 206, 208));
   --accentColorLite: hsla(212, 3%, 91%, .5);
}
 .table1 strong, .table2 strong, .table3 strong,
 .table4 strong, .table5 strong, .table6 strong,
 .table0 strong{
     filter: saturate(.85) brightness(1.15);
}
 #page-content .wiki-content-table tr th{
     padding: .4rem;

     color: var(--keyColor);
     background: var(--accentColor);
     border-color: var(--accentColor);
}
 #page-content .wiki-content-table tr th a{
     color: var(--alphaColor);
     border-color: var(--textColorAlt);
}
 #page-content .wiki-content-table tr th a:hover{
     color: var(--keyColor);
     background-color: var(--alphaColor);
}
 #page-content .wiki-content-table tr td{
     padding: .8rem;

     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: var(--accentColor);

     line-height: 1.5;
}

/* ---- CELL SEPARATOR ----
 * Adapted From:
 *   BLANKSTYLE CSS by Placeholder McD, HarryBlank
**/
 .tableb table,
 .tableb .wiki-content-table{
     border-collapse: separate;
     border-spacing: .4rem;
}
 .tableb .scp-image-block{
     border: 0;
}
 .tableb .scp-image-block img,
 .tableb .scp-image-block .scp-image-caption{
     border: thin solid var(--accentColor);
}
 .tableb .scp-image-block .scp-image-caption{
     margin-top: .4rem;
}

/* -- CONTENT WARNING -- */
 .content-warning {
 /* Warns Readers About Potentially Disturbing Content Contained in the Article */
    --accentColorMid: var(--accentColorAlt);
    --accentColorLow: hsla(357, 100%, 65%, .35);

    --accentColor: hsla(51, 100%, 50%, .85);
    --accentColorAlt: hsla(51, 100%, 50%, .6);

    min-width: 75%;
    width: fit-content;
    margin: 1rem auto 2rem;
    padding: .33rem 1.2rem .2rem;

    color: var(--textColorMid);
    background: var(--fgColor);
    border: thick solid var(--accentColorMid);
    border-radius: 9rem;

    text-align: center;
}

 @media (max-width: 767px) {
     .content-warning {
    	border-radius: 3rem;
    }
}

 .content-warning p:nth-child(1)::before {
    display: flex;
    width: fit-content;
    margin: 0 auto 1.13rem;
    padding: .6rem 1.13rem .73rem;
    content: "⚠️ CONTENT WARNING";

    color: var(--textColor);
    background: var(--accentColorLow);
    border-radius: 2rem;

    font: bold 1.55rem var(--body-font);
    text-shadow:
    	-1.75px -1.75px var(--keyColor),
    	0 -1.75px var(--keyColor),
    	1.75px -1.75px var(--keyColor),
    	1.75px 0 var(--keyColor),
    	1.75px 1.75px var(--keyColor),
    	0 1.75px var(--keyColor),
    	-1.75px 1.75px var(--keyColor),
    	-1.75px 0 var(--keyColor);
}

 .content-warning strong {
    filter: none;
}

/* ---- CUSTOM DIV BLOCKS ---- */
 .classification-header, .ethics-header, .miscomm-header,
 .oracle-header, .overwatch-header, .raisa-header,
 .warning-header{
     margin: 1rem 0;
     padding: 0 .53rem;

     background-position: top center;
     background-repeat: no-repeat;
     background-size: contain;

     text-align: center;
}
 .classification-header > p:nth-child(1)::before, .ethics-header > p:nth-child(1)::before,
 .miscomm-header > p:nth-child(1)::before, .oracle-header > p:nth-child(1)::before,
 .overwatch-header > p:nth-child(1)::before, .raisa-header > p:nth-child(1)::before{
     display: flex;
     justify-content: center;
     margin: .53rem 0;
     padding: 0 0 .8rem;

     font-family: var(--header-font);
     font-size: 1.35rem;
     letter-spacing: 1px;
}

 .classification-header{
   /* -- Classification Committee Header -- */
     color: var(--keyColor);
     background-image:
          linear-gradient(
               hsla(11, 30%, 85%, .7),
               hsla(11, 30%, 85%, .7)),
               url(https://i.imgur.com/wkUri0y.png);
     border: thick solid hsl(360, 26%, 26%);
     outline: 7px solid hsl(360, 0%, 76%);
}
 .classification-header > p:nth-child(1)::before{
     content: "FOUNDATION CLASSIFICATION COMMITTEE MEMO";

     color: hsl(360, 26%, 26%);
     border-bottom: medium solid hsl(360, 26%, 26%);
}
 .classification-header hr{
     border-color: hsl(360, 26%, 26%);
}

 .ethics-header{
   /* -- Ethics Committee Header -- */
     color: var(--keyColor);
     background-image:
          linear-gradient(
               hsla(212, 7%, 87%, .7),
               hsla(212, 7%, 87%, .7)),
               url(https://i.imgur.com/CQCcN7e.png);
     border: thick solid var(--keyColor);
}
 .ethics-header > p:nth-child(1)::before{
     content: "OFFICIAL ETHICS COMMITTEE MEMORANDUM";

     color: var(--fgColor);
     border-bottom: medium solid var(--fgColor);
}
 .ethics-header hr{
     border-color: var(--fgColor);
}

 .classification-header strong, .ethics-header strong{
     color: var(--keyColor);
}

 .miscomm-header{
   /* -- Miscommunications Notice -- */
     color: hsl(57, 98%, 68%);
     background-image:
          linear-gradient(
               hsla(9, 84%, 58%, .7),
               hsla(9, 84%, 58%, .7)),
               url(https://scp-wiki.wdfiles.com/local--files/desk-of-junior-designer-s-yvonne/miscdept.png);
     border: thin solid hsl(57, 98%, 68%);
     outline: 7px solid hsl(9, 51%, 47%);
}
 .miscomm-header strong{
     color: hsl(57, 98%, 68%);
}
 .miscomm-header > p:nth-child(1)::before{
     content: "NOTICE FROM THE FOUNDATION DEPARTMENT OF MISCOMMUNICATIONS";

     border-bottom: thin solid hsl(57, 98%, 68%);
}
 .miscomm-header hr{
     border-color: hsl(57, 98%, 68%);
}

 .oracle-header{
   /* -- ORACLE Header -- */
     color: var(--textColor);
     background-image:
        url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/spc_logo.png),
        url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/water_ripples.webp);
     background-position:
        top center,
        bottom center;
     background-size:
        contain,
        100%;
     border: thick solid var(--keyColor);
}
 .oracle-header > p:nth-child(1)::before{
     content: "FROM THE DESK OF ORACLE";

     border-bottom: medium solid var(--textColorAlt);
}
 .oracle-header hr{
     border-color: var(--textColor);
}

 .overwatch-header{
   /* -- Overwatch Header -- */
     color: var(--textColor);
     background-image:
          linear-gradient(
               hsla(205, 28%, 27%, .7),
               hsla(205, 28%, 27%, .7)),
               url(https://i.imgur.com/Q2TCZnd.png);
     border: thick solid hsl(205, 36%, 5%);
}
 .overwatch-header > p:nth-child(1)::before{
     content: "BY ORDER OF THE OVERWATCH COUNCIL";

     border-bottom: medium solid hsl(205, 36%, 5%);
}
 .overwatch-header hr{
     border-color: hsl(205, 36%, 5%);
}

 .raisa-header{
   /* -- RAISA Notice Header -- */
     color: var(--textColor);
     background-image:
          linear-gradient(
               hsla(60, 18%, 36%, .7),
               hsla(60, 18%, 36%, .7)),
               url(https://i.imgur.com/4uLBoQ3.png);
     border: thick solid hsl(0, 0%, 60%);
}
 .raisa-header > p:nth-child(1)::before{
     content: "NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION";

     border-bottom: medium solid hsl(0, 0%, 60%);
}
 .raisa-header hr{
     border-color: hsl(0, 0%, 60%);
}

 .warning-header{
   /* -- Warning Header (Adapted From 'SCP-3143' & 'SCP-5664') -- */
     color: var(--textColorAlt);
     background-attachment: fixed;
     background-color: hsl(356, 98%, 16%);
     background-image:
        url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_trans.png);
     background-position: center;
     background-size: 400px;
     border: thick solid var(--keyColor);
}
 .warning-header p:nth-child(1)::before{
     display: flex;
     justify-content: center;
     margin: .53rem 0;
     padding: 0 0 .8rem;
     content: "⚠ WARNING ⚠";

     border-bottom: medium solid var(--keyColor);
     filter: saturate(.85) brightness(1.15);

     font: 1.95rem var(--header-font);
}
 .warning-header hr{
     border-color: var(--keyColor);
}

 .oracle-header strong, .raisa-header strong, .warning-header strong{
     color: var(--textColorAlt);
}

 .classification-header h2, .ethics-header h2, .miscomm-header h2,
 .oracle-header h2, .overwatch-header h2, .raisa-header h2,
 .classification-header h3, .ethics-header h3, .miscomm-header h3,
 .oracle-header h3, .overwatch-header h3, .raisa-header h3,
 .classification-header h4, .ethics-header h4, .miscomm-header h4,
 .oracle-header h4, .overwatch-header h4, .raisa-header h4,
 .warning-header h2, .warning-header h3, .warning-header h4{
     color: inherit;
}

 .log-header, .report-box, .narration{
     margin: 1rem 0;
     padding: .02rem 1rem;
}

 .log-header{
   /* -- Interview/Incident/Exploration Log Header -- */
     color: var(--textColorAlt);
     background: var(--fgColor);
     border: thick dashed var(--accentColor);
     border-radius: 2rem;
}

 div.blockquote.larger, .darkbox.larger, .lightbox.larger, .report-box.larger {
    /* -- Larger Quote Size -- */
    font-size: 125%;
}

 blockquote, div.blockquote {
    /* -- Quote Block -- */
    margin: 1rem 3rem;
    padding: .02rem 1rem;

    color: var(--textColorAlt);
    background-color: var(--fgColor);
    border: 0;
    border-left: 7px solid var(--accentColor);
    box-shadow: 5px 5px var(--bgColor);
}

 @media (max-width: 767px) {
     blockquote, div.blockquote {
    	margin: 1rem 0;
    }
}

 div.blockquote.dashed {
    /* -- Alternative Quote 1 | Dashed -- */
    border-left-style: dashed;
}

 div.blockquote.classic {
    /* -- Alternative Quote 2 | Classic -- */
    border: medium solid var(--accentColor);
}

 div.blockquote.classic.curved {
    /* -- Alternative Quote 3 | Classic Curved -- */
    border-radius: 1.27rem;
}

 div.blockquote.lightweight {
    /* -- Alternative Quote 4 | Lightweight -- */
    border-left: 0;
}

 div.blockquote.simple {
    /* -- Alternative Quote 5 | Simple -- */
    margin: 1rem 0;
    padding: 0 1rem;

    color: var(--textColor);
    background: 0;
    border-left-style: solid;
}

 .darkbox, .lightbox{
     margin: 1rem 0;

     border-right: 7px solid var(--accentColor);
     border-left: 7px solid var(--accentColor);
}
 .darkbox{
     color: var(--textColorAlt);
     background: var(--fgColor);

     padding: .4rem .6rem;
}
 .lightbox{
     color: var(--fgColor);
     background: var(--textColorAlt);

     padding: .8rem;
}
 .lightbox hr{
     border-color: var(--keyColor);
}
 .lightbox h1, .lightbox h2, .lightbox h3,
 .lightbox h4, .lightbox h5, .lightbox h6{
     color: var(--fgColor);
}
 .lightbox strong,
 .lightbox a{
     font-weight: bold;
     filter: saturate(1.5) brightness(.5);
}
 .lightbox a:hover{
     color: var(--alphaColor);
     filter: unset;
}

 .report-box{
   /* -- Report Box -- */
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-top: 11px solid var(--accentColor);
}

 .red-tint, .orange-tint, .yellow-tint,
 .green-tint, .cyan-tint,
 .blue-tint, .magenta-tint, .grey-tint{
     color: var(--textColor);
     background: var(--fgColor);
     border: thick solid var(--accentColor);
}
 .red-tint, .red-tint hr, .red-tint h3{
   /* -- Alternative Report Block Colors -- */
   --fgColor: hsl(360, 48%, 45%);
   --accentColor: hsl(360, 62%, 75%);
   --accentColorLite: hsla(360, 62%, 85%, .5);
}
 .orange-tint, .orange-tint hr, .orange-tint h3{
   --fgColor: hsl(30, 48%, 35%);
   --accentColor: hsl(30, 50%, 73%);
   --accentColorLite: hsla(30, 50%, 83%, .5);
}
 .yellow-tint, .yellow-tint hr, .yellow-tint h3{
   --fgColor: hsl(60, 48%, 26%);
   --accentColor: hsl(60, 56%, 76%);
   --accentColorLite: hsla(60, 56%, 86%, .5);
}
 .green-tint, .green-tint hr, .green-tint h3{
   --fgColor: hsl(120, 48%, 29%);
   --accentColor: hsl(120, 56%, 76%);
   --accentColorLite: hsla(120, 56%, 86%, .5);
}
 .cyan-tint, .cyan-tint hr, .cyan-tint h3{
   --fgColor: hsl(180, 48%, 28%);
   --accentColor: hsl(180, 56%, 76%);
   --accentColorLite: hsla(180, 56%, 86%, .5);
}
 .blue-tint, .blue-tint hr, .blue-tint h3{
   --fgColor: hsl(240, 48%, 54%);
   --accentColor: hsl(240, 56%, 76%);
   --accentColorLite: hsla(240, 56%, 86%, .5);
}
 .magenta-tint, .magenta-tint hr, .magenta-tint h3{
   --fgColor: hsl(300, 48%, 41%);
   --accentColor: hsl(300, 56%, 76%);
   --accentColorLite: hsla(300, 56%, 86%, .5);
}
 .grey-tint, .grey-tint hr, .grey-tint h3{
   --fgColor: hsl(210, 24%, 39%);
   --accentColor: hsl(210, 12%, 75%);
   --accentColorLite: hsla(210, 12%, 85%, .5);
}
 .red-tint ::selection, .orange-tint ::selection, .yellow-tint ::selection,
 .green-tint ::selection, .cyan-tint ::selection,
 .blue-tint ::selection, .magenta-tint ::selection, .grey-tint ::selection{
     color: var(--keyColor);
}


 .overwatch-box,
 .overwatch-header{
    --accentColor: hsl(207, 65%, 65%);
    --accentColorLite: hsla(207, 65%, 75%, .5);
    --fnColor: var(--accentColor);
}
 .overwatch-box{
   /* -- Overwatch Document Box -- */
     margin: 1rem 6rem;
     padding: .02rem 1rem;

     background: hsl(207, 24%, 25%);
     border: thick solid hsl(205, 36%, 5%);
}
 @media (max-width: 479px){
     .overwatch-box{
          margin: 1rem 0;
    }
}
 @media (min-width: 480px) and (max-width: 580px){
     .overwatch-box{
          margin: .53rem;
    }
}
 .overwatch-box hr{
     border-color: hsl(205, 36%, 5%);
}

 .narration{
   /* -- Mimics the Pages of a Book -- */
     border: 7px solid var(--fgColor);
}

 .journal{
   /* -- Page (Adapted From 'RAISA-007710') -- */
     margin: 1rem 0;
     padding: .73rem 1.33rem 1.33rem;

     background:
        linear-gradient(
          to top,
          hsl(225, 2%, 28%) 0%,
          hsl(0, 0%, 19%) 8%) 0 8px;
     background-size: 100% 1.33rem;
     border: thin solid gray;
}
 .journal p{
     margin: 0;
 
     font: 1.33rem/1.33rem var(--script-font);
}
 .journal strong{
     color: var(--textColor);
}
 .highlighter,
 .journal ::selection{
     padding: 0 .27rem;
     background: hsla(30, 99%, 59%, .3);
}

/* -- TEXT STYLE --
 *   by JaonHax
**/
/* External box */
 .text-container-wrap{
     background: var(--fgColor);
     border-color: var(--keyColor);

     pointer-events: all !important;
}
 .text-container-wrap h1, .text-container-wrap h2,
 .text-container-wrap h3, .text-container-wrap h4{
      color: var(--accentColor);
}
 .text-container-wrap h5, .text-container-wrap h6{
      color: var(--textColor);
}

/* Internal box */
 .text-container{
     background: var(--bgColor);
     box-shadow: none;
}

/* Messages */
 .recv .text{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 .sent .text{
     color: var(--alphaColor);
}
 .recv .text strong, .sent .text strong{
     color: var(--textColorAlt);
}
 .recv .text a{
     color: hsl(213, 94%, 58%);
     border-color: hsl(213, 94%, 58%) !important;
}
 .sent .text a{
     color: unset;
     border-color: var(--textColor) !important;
}
 .recv .text a:hover{
     color: var(--keyColor);
     background: hsl(213, 94%, 58%);
}
 .sent .text a:hover{
     background: hsl(214, 94%, 34%);
}

/* Selection */
 .text-container-wrap *::selection{
     background: hsla(214, 80%, 34%, .8) !important;
}

/* -- HAZARD BOX -- */
 .hazard-box{
   /* -- Overall -- */
     display: flex;
     align-items: center;
     margin: 1rem 0;

     background: var(--fgColor);
}
 .hazard-box-image{
   /* -- Image -- */
     width: calc(100% * .2);
     padding: .13rem 0 .13rem .53rem;
}
 .hazard-box-text{
   /* -- Text -- */
     width: 95%;
     margin: .27rem 0;
     padding: .27rem .53rem;

     color: var(--textColorAlt);
}
 .hazard-box-1{ border-left: 11px solid rgb(var(--one-color)); }   /* Green */
 .hazard-box-image-1{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(100deg) brightness(1.25);
}
 .hazard-box-2{ border-left: 11px solid rgb(var(--two-color)); }   /* Blue */
 .hazard-box-image-2{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(178deg) brightness(1.25);
}
 .hazard-box-3{ border-left: 11px solid rgb(var(--three-color)); }   /* Yellow */
 .hazard-box-image-3{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(12deg) brightness(1.75);
}
 .hazard-box-4{ border-left: 11px solid rgb(var(--four-color)); }   /* Orange */
 .hazard-box-image-4{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(341deg) brightness(1.25);
}
 .hazard-box-5{ border-left: 11px solid rgb(var(--five-color)); }   /* Red */
 .hazard-box-image-5{
     filter: invert(.4) sepia(.5) saturate(1000%) hue-rotate(303deg);
}
 .hazard-box-6{ border-left: 11px solid rgb(var(--six-color)); }   /* Violet */
 .hazard-box-image-6{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(221deg) brightness(1.25);
}
 .hazard-box-0{ border-left: 11px solid rgb(var(--white-bar)); }   /* White */
 .hazard-box-image-0{
     filter: invert(.81);
}

/* ---- FORMATTING | [SPECIAL] ---- */
 .centered {
   /* -- Center-Aligns Text -- */
     text-align: center;
}

 .justified {
   /* -- Justify-Aligns Text -- */
     text-align: justify;
}

 .indented {
   /* -- Indents Block by ⅜-inch (Use Within Other Divs) -- */
     text-indent: 2.4rem;
}

 .indented .bibcite,
 .indented .bibitems,
 .indented .footnoteref,
 .indented .scp-image-block,
 .indented h1, .indented h2, .indented h3,
 .indented h4, .indented h5, .indented h6,
 .indented .image-container,
 .indented ol,
 .indented ul,
 .indented .centered,
 .indented .fncon,
 .indented .fncon::before {
     text-indent: 0;
}

 .end-mark > p:last-of-type::after {
     margin-left: .2rem;
     content: "❖";

     font-size: 1.25rem;
     line-height: 1;
}

 .rev-red {
   /* -- Red Document Revision Text -- */
     color: hsl(360, 80%, 70%);
}

 .rev-yellow {
   /* -- Yellow Document Revision Text -- */
     color: hsl(40, 80%, 45%);
}

 .rev-green {
   /* -- Green Document Revision Text -- */
     color: hsl(120, 40%, 55%);
}

 .rev-blue {
   /* -- Blue Document Revision Text -- */
     color: hsl(240, 80%, 80%);
}

 .terminal-span {
   /* -- Computer Terminal Text -- */
     font: 110%/1.5 var(--mono-font);
     letter-spacing: 1px;
}

 .rev-red, .rev-yellow,
 .rev-green, .rev-blue,
 .terminal-span {
     font-weight: bold;
}

 .bt {
   /* Bold-Text = Bold + accentColor */
     color: var(--accentColor);

     font-weight: bold;
     text-decoration-color: inherit;
}

 .tb {   /* Bold-Text + textColor */
     color: var(--textColor);
     filter: unset;

     font-weight: bold;
}

 div .tb {   color: var(--textColorAlt);   }

 .bt.bb,   /* Big-Bar = Bold + accentColor + Vertical Bar [Body Text] */
 .bt.bh,   /* Header-Bar = Bold + accentColor + Vertical Bar [Header Text] */
 .tb.bb {   /* Big-Bar = Bold + textColor + Vertical Bar [Body Text] */
     border-right: 2px solid;
}

 .bt.bb,
 .bt.bh {
     border-color: var(--accentColor);
}

 .tb.bb {
     border-color: var(--textColor);
}

 div .tb.bb {   color: var(--textColorAlt);   }

 .bt.bh {
     border-right-width: medium;
}

 .bt.bb::after,
 .bt.bh::after,
 .tb.bb::after {
     content: ":";
     visibility: hidden;
}

/* -- Blinking Text Cursor ----
 * Adapted From:
 *   Word Processor Theme by stormbreath
**/
 #u-append-blink-bar p:last-child::after {
     position: relative;
     bottom: .067rem;
     left: .07rem;
     content: "█";

     animation: blink 1.5s infinite;
}

 @keyframes blink {
     to {
          opacity: 0;
    }
}

/* Adapted From:
 *   Dustjacket Theme by Woedenaz
**/
 .fancyhr hr {
     border-top: 2vw solid;
     border-image-repeat: round;
     border-image-slice: 80 500 80 500 fill;
     border-image-source: url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_hr.png);
     border-image-width: 10rem 80rem;
     filter: hue-rotate(var(--tint));
}

 .fancyborder {
     padding: 2vw;

     border: 2vw solid;
     border-image: url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_border.png) 600 round;
     border-image-width: 6;
}

 .lite-heading {
   /* -- Special Heading Area -- */
     margin: 3rem -5.5%;
     padding: 0 5.5%;

     background: var(--fgColor);
}

 .lite-heading hr {
     margin: 0 -5.5%;

     border: medium solid var(--accentColor);
}

 .lite-heading h3 {
     color: var(--textColorAlt);
     filter: unset !important;
}

 .image-showcase {
   /* -- Alternative Image Showcase -- */
     width: 21rem;
     margin: 1rem auto;

     background: var(--bgColor);
     border: 7px solid var(--fgColor);
}

 .scene-break {
   /* -- Fancy Scene Break -- */
     width: 6rem;
     margin: 2rem;
}

 .icon-tint {
     filter: invert(.4) sepia(.5) saturate(1500%) hue-rotate(var(--tint));
}

/* -- ListPages Navigator ----
 * Adapted From:
 *   SCP-5552 by Captain Kirby
**/
 .listPagesNav {
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
     margin: 0 0 3rem;
}

 .listPagesNav-prev, .listPagesNav-next {
     width: 45%;
     padding: 0 1%;

     background: var(--fgColor);
}

 .listPagesNav-prev {
     float: left;

     border-left: thick solid var(--accentColor);

     text-align: left;
}

 .listPagesNav-next {
     float: right;

     border-right: thick solid var(--accentColor);

     text-align: right;
}

 .listPagesNav-prev p, .listPagesNav-next p {
     font: 1.25rem var(--header-font);
     letter-spacing: 1px;
}

 @media (max-width: 767px) {
     .listPagesNav-prev p, .listPagesNav-next p {
          font-size: .95rem;
    }
}

 .fade-away {
   /* -- Fades to Black -- */
     background:
        linear-gradient(
          transparent,
          var(--keyColor));
}

 .whiteout {
   /* -- Fades to White -- */
     background:
        linear-gradient(
          transparent,
          var(--textColor));
}

 .footing, .footing:after {
     position: relative;
}

 .footing {
   /* -- Page Footing -- */
     margin: 1rem 0;
}

 .footing::before {
     position: absolute;
     right: 0;
     bottom: .13rem;
     left: 0;
     content: "";

     border-bottom: 2px solid var(--accentColor);
}

 .footing:after {
     display: block;
     top: .07rem;
     content: "";

     border-bottom: thin solid var(--accentColorLite);
}

 @media (max-width: 767px) {
     .footing::before, .footing:after {
          margin: 0 -5%;
    }
}

 .related-flex {
   /* -- Related Articles Box -- */
     display: flex;
     justify-content: center;
}

 .related {
     margin: 1rem 0;
     padding: .02rem 1rem;

     color: var(--textColorAlt);
     background: var(--fgColor);
     border: thick solid var(--accentColor);

     font-weight: bold;
}

 .related > p:nth-child(1)::before,
 .related > ol:nth-child(1)::before,
 .related > ul:nth-child(1)::before,
 .related > a:nth-child(1)::before {
     display: flex;
     padding: 0 0 .53rem;
     content: "See Also:";

     color: var(--accentColor);

     font: 1.25rem var(--header-font);
     letter-spacing: 1px;
}

 .related > ol:nth-child(1)::before,
 .related > ul:nth-child(1)::before {
     margin-left: -2rem;
}

 .series-nav {
   /* -- Series Navigator -- */
     display: flex;
     justify-content: center;
     margin: 1rem 0;
     padding: .02rem 1rem;

     color: var(--textColorAlt);
     background: var(--fgColor);
     border-top-right-radius: .67rem;
     border-top-left-radius: .67rem;
     border-bottom: 2px solid var(--accentColor);

     font: 85% var(--header-font);
}

/* -- Earthworm Series Navigator --
 *   by Croquembouche
**/
 .earthworm p {
    cursor: text;
}

 #page-content .earthworm a {
    border-bottom: 0;
}

 #page-content .earthworm a[href="/"] {
    color: var(--textColorAlt);
    filter: unset;
}

 #page-content .earthworm .first,
 #page-content .earthworm .hub,
 #page-content .earthworm .last,
 #page-content .earthworm .first:not(.true) img,
 #page-content .earthworm .last:not(.true) img {
    background: var(--fgColor);
    border-color: var(--accentColorLite);
}

 @media (max-width: 767px) {
     #page-content .earthworm {
    	font-size: .85rem;
    }

     #page-content .earthworm .hub {
    	font-size: .95rem;
    }
}

 @media (min-width: 768px) {
     #page-content .earthworm .hub {
    	font-size: 1.15rem;
    }
}


 .bt,
 .listPagesNav-prev p, .listPagesNav-next p,
 .related > p:nth-child(1)::before,
 .related > ol:nth-child(1)::before,
 .related > ul:nth-child(1)::before,
 .related > a:nth-child(1)::before,
 #page-content .earthworm a,
 #toc .title,
 strong {
     filter: saturate(.85) brightness(1.15);
}

/* ---- YUI TABS ---- */
/* -- YUI TAB CUSTOMIZATION -- */
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .13rem);
     margin: 0 auto;

     border-color: var(--accentColor);
}
 .yui-navset .yui-nav li,
 .yui-navset .yui-navset-top .yui-nav li{   /* -- Listitem Modifier -- */
     display: flex;
     flex-grow: 2;
     margin: 0;
     padding: 0;

     background: var(--fgColor);

     font-size: 1.05rem;
}
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{   /* -- Link Modifier -- */
   /* -- Tab | [UNSELECTED] -- */
     color: var(--textColorAlt);
     background: var(--fgColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);

     font-family: var(--header-font);
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     width: 100%;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
   /* -- Tab | [HOVER] -- */
     color: var(--alphaColor);
     background: var(--accentColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .yui-navset .yui-nav li em{
     border: 0;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding-top: .47rem;
     padding-bottom: .47rem;

     text-align: center;
     text-overflow: ellipsis;

     overflow: hidden;
}
 .yui-navset .yui-nav .selected,
 .yui-navset .yui-navset-top .yui-nav .selected{   /* -- Selection Modifier -- */
   /* -- Tab | [SELECTED] -- */
     flex-grow: 2;
     margin: 0;
     padding: 0;

     background: var(--accentColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: 0;
}
 .yui-navset .yui-nav .selected a em{
     padding-top: .47rem;
     padding-bottom: .47rem;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:active,
 .yui-navset .yui-nav .selected a:focus{
     color: var(--fgColor);
}
 .yui-navset .yui-content{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .53rem;

     border: 0;

     line-height: 1.5;
}

/* -- YUI TAB ANIMATION --
 *   Courtesy Of Croquembouche
**/
 .yui-navset .yui-content > div{
     display: block;

     transform-origin: 0 0;

     overflow: hidden;
}
 #page-content .yui-navset .yui-content > div[style*="none"]{
     display: block !important;
     flex: 0;
     max-height: 0;
     padding: 0 .53rem;

     border-width: 0;
   /* Next Transition Affects the One That DISAPPEARS */
     transition:
          padding 0s ease-in-out .5s,
          border-width 0s ease-in-out .5s,
          flex .4s cubic-bezier(.18, .51, .54, .9) 0s;
     animation: tab-disappear .4s ease-in-out 0s 1 both;
}
 #page-content .yui-navset .yui-content > div[style*="block"]{
     display: block !important;
     flex: 1;
     max-height: 9999rem;

   /* Next Transition Affects the One That APPEARS */
     transition:
          padding 0s ease-in-out .5s,
          border-width 0s ease-in-out .5s,
          flex .4s cubic-bezier(.18, .51, .54, .9) .5s;
     animation: tab-appear .4s ease-in-out .5s 1 both;
}
 @keyframes tab-disappear{
     0%{
          max-height: 9999rem;
    }
     1%{
          max-height: 100vh;
    }
     100%{
          max-height: 0;
    }
}
 @keyframes tab-appear{
     0%{
          max-height: 0;
    }
     99%{
          max-height: 100vh;
    }
     100%{
          max-height: 9999rem;
    }
}

/* ---- WIKIWALK NAVIGATOR ---- */
 .footer-wikiwalk-nav{
     width: max-content;
     margin: 1rem auto;
     padding: .067rem 1rem;

     color: var(--textColorAlt);
     background: var(--fgColor);
     border-radius: .53rem;

     font-size: 85%;
}

/* ---- INTERWIKI ---- */
 div.scpnet-interwiki-wrapper{
     margin-bottom: 2rem;
}
 iframe.scpnet-interwiki-frame{
     background: var(--accentColorLite);
}
 #interwiki{
     --fgColor: none;
     background: 0;
}
 #interwiki body{
     overflow: hidden;
}
 #interwiki .side-block{
     background: 0;
     border: 0;
     box-shadow: none;
}
 #interwiki .heading{
     color: var(--textColorAlt);
     border-bottom-color: var(--textColor);

     font: bold .95rem "Josefin Sans", sans-serif;
}
 #interwiki .menu-item img{
     display: none;
}
 #interwiki .menu-item a{
     color: var(--alphaColor);
     transition: color .2s ease-in-out;
}
 #interwiki .menu-item a:hover{
     color: var(--keyColor);
     background-color: var(--alphaColor);

     text-decoration: none;
}

/* ---- CROQSTYLE ALTERATIONS ---- */
 #edit-page-textarea{
     font-family: unset;
}
 tt{
     padding: unset;

     background: unset;

     font-size: 110%;
}
 .terminal,
 .terminal > .code{
     background: var(--c-bg) !important;
     border: thick solid var(--c-comment) !important;
}

/* General Patches For:
 *   ACS
 *   Collapsibles
 *   Info Bar
 *   Info Module
 *   Side-Bar Media
 * So Link Doesn't Override
**/
 .danger-diamond a:hover,
 .collapsible-block-folded a:hover,
 .collapsible-block-unfolded-link a:hover,
 .rate-box-with-credit-button .fa-info:hover,
 #side-bar .side-block.media a:hover{
     background: 0;
}
 .info-container .collapsible-block-link,
 .info-container .collapsible-block-folded .collapsible-block-link{
     background: var(--linkColour) !important;
}

/* ---- ACS PATCH ----
 *   Courtesy Of Nagiros
**/
 .anom-bar > .bottom-box{
   /* Horizontal Bar */
     -webkit-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
     -moz-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
     box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;

     -webkit-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     -moz-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
}
 .bottom-box > .diamond-part{
   /* Vertical Bar */
     -webkit-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
     -moz-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
     box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;

     -webkit-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     -moz-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
}
 .anom-bar-container.esoteric .text-part .main-class,
 .anom-bar-container.explained .text-part .main-class,
 .anom-bar-container.neutralized .text-part .main-class,
 .anom-bar-container.pending .text-part .main-class{
     background-color: hsl(240, 4%, 27%, .5) !important;
     border-left-color: hsl(240, 5%, 49%) !important;

     background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important;
     border-left-color: rgb(var(--lg-bar, 118, 118, 130)) !important;
}
 .danger-diamond > .arrows,
 .danger-diamond > .bottom-icon::before{
   /* Inverted Arrows + Esoteric Icons */
     -webkit-filter: invert(.9) !important;
     filter: invert(.9) !important;
}
 .danger-diamond > .quadrants > .bottom-quad,   /* Transparent Bottoms + Top Icon Backgrounds */
 .anom-bar-container.explained .danger-diamond > .quadrants > .top-quad,
 .anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad,
 .anom-bar-container.pending .danger-diamond > .quadrants > .top-quad{
   /* Body Background-Color */
     background-color: hsl(0, 0%, 10%) !important;
}
 .danger-diamond > .bottom-icon,   /* Esoteric + Pending Icon Backgrounds */
 .anom-bar-container.pending .danger-diamond > .top-icon::before{
     background-color: hsl(0, 0%, 1%) !important;
}
 .anom-bar > .bottom-box::before{
     background-color: rgb(var(--white-bar, 205, 206, 208));
}
 .top-left-box > .item{
     display: none;
}

/* ---- AUTHOR LABEL PATCH ---- */
 #page-content .authorlink-wrapper{
     margin-top: -.13rem;

    --author-right-adjust: 0;
}

/* ---- BETTERFOOTNOTES PATCH ---- */
 :root{
     --posX: calc(50% - 358px - 13rem);
     --fnLinger: 1.5s;
     --fnColor: var(--accentColor);
}
 .fnnum{
     filter: saturate(.85) brightness(1.15);

     font-size: .9rem;
}
 .lightbox .fnnum::after{
     color: var(--keyColor);
}
 .fncon{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: var(--accentColor);
}
 .fncon::before{
     color: var(--keyColor);
}
 .fnnum:hover + .fncon{
     right: calc(-8vw - 4rem);
}
 .lightbox .fncon a{
     filter: unset;
}

/* == FLOPS HEADER PATCH == */
 .itemInfo, a.disruptionHeader {
    font-family: var(--header-font);
}

 .itemInfo.darkbox {
    margin: 0 0 1.6rem;
    padding: .8rem 1.13rem;
}

 table.darkbox tr td {
    padding: 0;
}

 .alignL span {
    margin-right: .13rem;
}

 .infofield_1, .infofield_2 {
    font-size: 0;
}

 .infofield_1::before {
    content: "ITEM #";

    font-size: 1.25rem;
}

 .infofield_2::before {
    content: "CLASS";

    font-size: 1.25rem;
}

 @media (max-width: 767.9px) {
     .itemInfo.darkbox {
    	margin: 0 0 1.25rem;
    	padding: 0 .75rem;
    	font-size: 1.05rem;
    }

     .infofield_3 {
    	font-size: 0;
    }

     .infofield_1::before,
     .infofield_2::before,
     .infofield_3::before {
    	font-size: 1.05rem;
    }

     .infofield_3::before {
    	content: "LVL";
    }

     #page-content a.disruptionHeader {
    	font-size: 1.25rem;
    }
}

/* ---- VOID POST PATCH ---- */
 div.void.dark{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: hsl(222, 20%, 9%);
}

 .vusermod{
     color: var(--textColorAlt) !important;
}

 .vui{
     color: hsl(0, 0%, 60%) !important;
}

 .vactivity{
     color: hsl(240, 100%, 69%) !important;
}

/* ---- PAGE TAGS ---- */
 #main-content .page-tags{
     border-top: thin solid var(--accentColorLite);
}
 #main-content .page-tags span{
     max-width: 100%;

     border-top: 9px solid transparent;
}
 #main-content .page-tags a{
     height: 1.108rem;
     margin: .18rem 0 .5rem 1rem;
     padding: .1875rem .3125rem .1875rem 0;

     background: var(--fgColor);
     border-top-right-radius: .27rem;
     border-bottom-right-radius: .27rem;

     font: bold .95rem/1.108rem var(--body-font);
     letter-spacing: .033rem;
}
 #main-content .page-tags a::before,
 #main-content .page-tags a::after{
     position: relative;
     float: left;
     content: "";
}
 #main-content .page-tags a::after{
     top: .3836rem;
     left: -.6818rem;
     width: .341rem;
     height: .341rem;

     background: var(--bgColor);
     border-radius: .1705rem;
}
 #main-content .page-tags a::before{
     top: -.1875rem;
     left: -.7501rem;

     border-color: transparent var(--fgColor) transparent transparent;
     border-style: solid;
     border-width: .75rem .75rem .75rem 0;
}
 #main-content .page-tags a:hover{
     color: var(--keyColor);
     background: var(--accentColor);
}
 #main-content .page-tags a:hover::before{
     border-color: transparent var(--accentColor) transparent transparent;
}

/* ---- SITE FOOTER ---- */
 #footer,
 #footer a{
     color: var(--textColor);
     background: 0;
}
 #license-area{
     color: var(--textColor);
}
[[/code]]

[[code type="CSS"]]
/* BACKEND */
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/backend.css);
[[/code]]
[[/collapsible]]
[[/iftags]]

[[iftags +theme]]

@@ @@

[[div class="centered"]]
+++* The HEADER font is [*https://fonts.google.com/specimen/Montserrat Montserrat].
The BODY font is [*https://fonts.google.com/specimen/Inter Inter].

[[span style="font-family: var(--mono-font)"]]The MONOSPACE font is [*https://fonts.google.com/specimen/Fira+Code Fira Code].[[/span]]

[[span style="font-family: var(--script-font); font-size: 1.3rem"]]The SCRIPT font is [*https://fonts.google.com/specimen/Comic+Neue Comic Neue].[[/span]]
[[/div]]

@@ @@

[[span class="top"]] [#BTT 🡹] [[/span]]
= [[span class="tb"]] Back to Top [[/span]]

@@ @@

[[include :scp-wiki:component:license-box-theme]]
=====
[[div class="blockquote"]]
**Filename:** alt_loader.gif
**Name:** Loading-3-box
**Author:** [https://commons.wikimedia.org/wiki/User:FNDE FNDE]
**License:** [https://creativecommons.org/publicdomain/zero/1.0/ CC0 1.0 Universal (CC0 1.0) Public Domain Dedication]
**Source Link:** [https://commons.wikimedia.org/wiki/File:Loading-3-box.gif Wikimedia Commons]
[[/div]]

[[div class="blockquote"]]
**Filename:** [https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/alt_logo_bw.png alt_logo_bw.png], [https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/alt_logo_trans.png alt_logo_trans.png], [https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/alt_logo_tyrian.png alt_logo_tyrian.png]
**Author:** [[*user JackalRelated]]
**License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** Self
[[/div]]

[[div class="blockquote"]]
**Filename:** Larry_the_cat.jpg
**Name:** Larry the cat sitting besides a wooden lawn chair in Auderghem, Belgium (DSCF2368)
**Author:** [https://commons.wikimedia.org/wiki/User:Trougnouf Benoît Brummer]
**License:** [https://creativecommons.org/licenses/by/4.0/ Attribution 4.0 International (CC BY 4.0)]
**Source Link:** [https://commons.wikimedia.org/wiki/File:Larry_the_cat_sitting_besides_a_wooden_lawn_chair_in_Auderghem,_Belgium_(DSCF2368).jpg Wikimedia Commons]
[[/div]]

[[div class="blockquote"]]
**Filename:** spc_logo.png
**Authors:** [[*user GreenGolem]] and [[*user JackalRelated]]
**License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** [[[theme:shark-punching-centre-bhl|SPC Black Highlighter Theme - SCP Foundation]]]
**Note:** Edited by [[*user Lt Flops]]. Inverted, changed the opacity.
[[/div]]

[[div class="blockquote"]]
**Filename:** water_ripples.webp
**Name:** Water ripples texture 3 of 3
**Author:** [https://www.flickr.com/photos/junctions/ Juan Tello]
**License:** [https://creativecommons.org/licenses/by/2.0/ Attribution 2.0 Generic (CC BY 2.0)]
**Source Link:** [https://flic.kr/p/5tAqGp Flickr]
**Note:** Edited by [[*user Lt Flops]]. Applied blend modes "Difference", "Overlay". Added low-opacity blue fill.
[[/div]]

[[div class="blockquote"]]
**Filename:** [https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_border.png wl_border.png], [https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_hr.png wl_hr.png]
**Author:** [[*user Woedenaz]]
**License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** [http://wanderers-library.wikidot.com/component:theme Wanderers' Dust Jacket Theme - The Wanderers' Library]
[[/div]]

[[div class="blockquote"]]
**Filename:** pumpkin.png
**Name:** Twemoji13 1f383
**Author:** Twitter
**License:** [https://creativecommons.org/licenses/by/4.0/ Attribution 4.0 International (CC BY 4.0)]
**Source Link:** [https://commons.wikimedia.org/wiki/File:Twemoji13_1f383.svg Wikimedia Commons]
[[/div]]

[[*user EstrellaYoshte]]'s logos are a widely used fixture on this theme:

[[div class="blockquote"]]
**Filename:** [https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witch.png witch.png], [https://i.imgur.com/QQcBcvK.png QQcBcvK.png], [https://i.imgur.com/wkUri0y.png wkUri0y.png], [https://i.imgur.com/CQCcN7e.png CQCcN7e.png], [https://i.imgur.com/Q2TCZnd.png Q2TCZnd.png], [https://i.imgur.com/4uLBoQ3.png 4uLBoQ3.png]
**Author:** [[*user EstrellaYoshte]]
**License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** [[[desk-of-junior-designer-s-yvonne|Desk of Junior Designer S. Yvonne]]]
[[/div]]
=====
[[include :scp-wiki:component:license-box-end]]
[[/iftags]]

>[[ift{$acs}gs -theme]]
[[include :scp-wiki:component:acs-animation]]
>[[/ift{$acs}gs]]

[[include :scp-wiki:component:betterfootnotes]]
[[include :scp-wiki:component:croqstyle]]
[[include :scp-wiki:component:fade-in speed=1]]
[[include :scp-wiki:component:text-style]]
[[include :scp-wiki:component:toggle-sidebar]]

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/1);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/2);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/3);
[[/module]]

[[include :scp-wiki:component:interwiki-style
|priority=2
|theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/2
]]


>[[ift{$inferno}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/inferno.css);
[[/module]]
>[[/iftags]]
>[[/ift{$inferno}gs]]

>[[ift{$maple}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/maple.css);
[[/module]]
>[[/iftags]]
>[[/ift{$maple}gs]]

>[[ift{$plastic}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/plastic.css);
[[/module]]
>[[/iftags]]
>[[/ift{$plastic}gs]]

>[[ift{$prairie}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/prairie.css);
[[/module]]
>[[/iftags]]
>[[/ift{$prairie}gs]]

>[[ift{$seafoam}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/seafoam.css);
[[/module]]
>[[/iftags]]
>[[/ift{$seafoam}gs]]

>[[ift{$threshold}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/threshold.css);
[[/module]]
>[[/iftags]]
>[[/ift{$threshold}gs]]

>[[ift{$vanguard}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/vanguard.css);
[[/module]]
>[[/iftags]]
>[[/ift{$vanguard}gs]]


>[[ift{$witch}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witch.css);
[[/module]]
>[[/iftags]]
>[[/ift{$witch}gs]]


>[[ift{$ashes}gs -theme]]
>[[iftags]]
[[module CSS]]
/* BOOK OF ASHES */
 :root {
    --accentColor: hsl(360, 65%, 65%);
    --accentColorLite: hsla(360, 65%, 75%, .5);
    --hue: 360deg;

    --bgColor: hsl(360, 6%, 21%);
    --fgColor: hsl(360, 8%, 15%);
}

 #header h1 a::after {
    content: "BOOK OF ASHES";
}
[[/module]]
>[[/iftags]]
>[[/ift{$ashes}gs]]


>[[ift{$light}gs -theme]]
>[[iftags]]
[[module CSS]]
/* BOOK OF LIGHT */
 :root {
    --accentColor: hsl(45, 50%, 50%);
    --accentColorLite: hsla(45, 50%, 60%, .5);
    --hue: 45deg;

    --bgColor: hsl(45, 1.5%, 21%);
    --fgColor: hsl(45, 2%, 15%);
}

 #header h1 a::after {
    content: "BOOK OF LIGHT";
}
[[/module]]
>[[/iftags]]
>[[/ift{$light}gs]]


>[[ift{$veldt}gs -theme]]
>[[iftags]]
[[module CSS]]
/* NOTES FROM THE GREEN YONDER */
 :root {
    --accentColor: hsl(135, 55%, 55%);
    --accentColorLite: hsla(135, 55%, 65%, .5);
    --hue: 135deg;

    --bgColor: hsl(135, 3%, 21%);
    --fgColor: hsl(135, 4%, 15%);
}

 #header h1 a::after {
    content: "THE GREEN YONDER";
    margin-top: -2.25em;

    font-size: 1.15rem;
}
[[/module]]
>[[/iftags]]
>[[/ift{$veldt}gs]]


>[[ift{$loose-threads}gs -theme]]
>[[iftags]]
[[module CSS]]
/* LOOSE THREADS */
 :root {
    --accentColor: hsl(225, 65%, 65%);
    --accentColorLite: hsla(225, 65%, 75%, .5);
    --hue: 225deg;

    --bgColor: hsl(225, 6%, 21%);
    --fgColor: hsl(225, 8%, 15%);
}

 #header h1 a::after {
    content: "LOOSE THREADS";
}
[[/module]]
>[[/iftags]]
>[[/ift{$loose-threads}gs]]


>[[ift{$galaxias}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/galaxias.css);
[[/module]]
>[[/iftags]]
>[[/ift{$galaxias}gs]]


>[[ift{$pedagogy}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/pedagogy.css);
[[/module]]
>[[/iftags]]
>[[/ift{$pedagogy}gs]]


>[[ift{$chthonian}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/chthonian.css);
[[/module]]
>[[/iftags]]
>[[/ift{$chthonian}gs]]

>[[ift{$monster}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/monster.css);
[[/module]]
>[[/iftags]]
>[[/ift{$monster}gs]]

>[[ift{$rhizome}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/rhizome.css);
[[/module]]
>[[/iftags]]
>[[/ift{$rhizome}gs]]

>[[ift{$syzygy}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/syzygy.css);
[[/module]]
>[[/iftags]]
>[[/ift{$syzygy}gs]]

>[[ift{$witching-hour}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witching-hour.css);
[[/module]]
>[[/iftags]]
>[[/ift{$witching-hour}gs]]

>[[ift{$peenumbra}gs -theme]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/peenumbra.css);
[[/module]]
>[[/iftags]]
>[[/ift{$peenumbra}gs]]

Flopstyle: DARK

Module Styles

Inline Styles

Includes

CSS Classes

Page Source