@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
/* Flopstyle CSS Theme
* [2020 Wikidot Theme]
* Created by Lt Flops
* Select CSS Styles Are Credited Where Necessary
* -- (CC BY-SA 3.0) --
**/
/* -------- SITE HEADER -------- */
span, a{
word-break: unset;
}
#header h1 a,
#header h1 a::before{
color: hsl(0, 0%, 90%);
text-shadow:
.7px .7px 0 hsla(0, 0%, 0%, .8),
1.4px 1.4px 0 hsla(0, 0%, 0%, .8);
}
#header h1 a{
font-family: "Montserrat", "Arial", sans-serif;
font-size: 170%;
letter-spacing: 0;
}
#header h2 span,
#header h2 span::before{
color: hsl(0, 0%, 90%);
text-shadow: 1px 1px 0 hsla(0, 0%, 0%, .8);
}
/* -------- TOP MENU -------- */
#search-top-box,
#top-bar,
#login-status{
right: 0;
}
#search-top-box-input{
border-radius: 0;
}
#search-top-box-form input[type="submit"]{
background: hsl(0, 33%, 30%);
border-radius: 0;
font-size: unset;
}
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus{
background: hsl(0, 25%, 50%);
}
#top-bar .open-menu a{
border-radius: unset;
border-width: .1em;
}
/* -------- SIDE MENU -------- */
#side-bar:target{
width: 18.2em;
}
#side-bar .side-block{
border-color: hsl(0, 0%, 20%);
border-radius: 0;
}
#side-bar .heading{
color: hsl(0, 0%, 5%);
border-bottom: solid 1px hsl(0, 0%, 20%);
}
/* -------- GENERAL -------- */
body{
color: hsl(0, 0%, 5%);
word-break: unset;
}
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus,
#top-bar ul li ul,
#side-bar .side-block,
.page-rate-widget-box,
.scp-image-block{
box-shadow: none;
}
/* -------- INFO BAR -------- */
body{
--barColour: hsl(0, 89%, 18%);
}
.u-faq{
display: none;
}
.info-container .collapsible-block-content{
padding: 0 .5em 30px;
}
.info-container .collapsible-block-content .wiki-content-table{
width: 100%;
}
/* -------- INFO PANE -------- */
.creditRate{
margin-right: 0 !important;
}
.rate-box-with-credit-button{
border-radius: 0 !important;
box-shadow: none !important;
}
/* -------- PAGE RATING -------- */
.page-rate-widget-box{
margin-right: 0;
}
.page-rate-widget-box,
.page-rate-widget-box .rate-points{
border-radius: 0;
}
.page-rate-widget-box .cancel,
.page-rate-widget-box .cancel a:hover{
border-radius: 0 !important;
}
/* -------- FORMATTING | [GENERAL] -------- */
#page-content h1,
#page-content h2,
#page-content h3,
#page-content h4,
#page-content h5,
#page-content h6{
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: .57em;
text-align: center;
word-break: unset;
}
hr{
height: 0;
margin: 1em 0;
background-color: transparent;
border-top: 1px solid hsl(0, 0%, 67%);
}
.collapsible-block-link{
font-size: 120%;
font-weight: bold;
}
.info-container .collapsible-block-link{
font-size: 100%;
}
ol li{
margin: 0 0 1em;
}
ul{
margin:1em 0;
}
.footnotes-footer, .bibitems{
padding: 0 0 .5em;
}
/* -------- IMAGE BLOCK -------- */
.scp-image-block.block-right{
margin: 0 0 1em 2em;
}
/* -------- FORMATTING | [SPECIAL] -------- */
.centered{ /* ---- Center-Aligns Text ---- */
text-align: center;
}
.justified{ /* ---- Justify-Aligns Text ---- */
text-align: justify;
}
.indented{ /* ---- Indents Block by ½-inch/2em (Use Within Other Divs) ---- */
text-indent: 2.4em;
}
.indented .bibcite,
.indented .footnoteref,
.indented ul,
.indented ol,
.indented .scp-image-block.block-right,
.indented h1,
.indented h2,
.indented h3,
.indented h4,
.indented h5,
.indented h6,
.indented .scene-break,
.indented .footnotes-footer,
.indented .bibitems{
text-indent: 0;
}
.rev-red, .rev-green, .rev-blue, .rev-yellow, .terminal-span{
font-weight: bold;
}
.rev-red{ /* ---- Red Document Revision Text ---- */
color: hsl(360, 100%, 27%);
}
.rev-green{ /* ---- Green Document Revision Text ---- */
color: hsl(120, 100%, 27%);
}
.rev-blue{ /* ---- Blue Document Revision Text ---- */
color: hsl(240, 100%, 27%);
}
.rev-yellow{ /* ---- Yellow Document Revision Text ---- */
color: hsl(40, 100%, 40%);
}
.terminal-span{ /* ---- Computer Terminal Text ---- */
font-size: 110%;
letter-spacing: .3px;
}
.blinkbar{color: black; animation: blink 1.5s infinite; letter-spacing: -.13em;}@keyframes blink{to{opacity: .0;}}@keyframes flicker{0% {opacity: .9890; }5% {opacity: .5842; }10% {opacity: .9865; }20% {opacity: .0412; }20% {opacity: .6255; }25% {opacity: .3157; }30% {opacity: .7328; }35% {opacity: .4654; }40% {opacity: .9128; }45% {opacity: .2449; }50% {opacity: .5485; }55% {opacity: .6438; }60% {opacity: .1180; }65% {opacity: .9085; }70% {opacity: .0266; }75% {opacity: .6795; }80% {opacity: .7812; }85% {opacity: .0117; }90% {opacity: .2239; }95% {opacity: .8897; }100% {opacity: .2260; }}@keyframes overlay-anim{0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }} /* ---- Adapted From Your Very First SCP! ---- */
@font-face{ /* ---- Code by Croquembouche ---- */
font-family: "Fira Code";
src:
url(https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/eot/FiraCode-Regular.eot) format("embedded-opentype"),
url(https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff2/FiraCode-Regular.woff2) format("woff2"),
url(https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff/FiraCode-Regular.woff) format("woff"),
url(https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/ttf/FiraCode-Regular.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
:root{
--mono-font: "Fira Code", monospace;
}
.code pre, .code p, .code, tt, .page-source, .faux-source, .terminal-span{
font-family: var(--mono-font);
}
.code pre *{
white-space: pre;
}
.code *, .pre *{
font-feature-settings: unset;
}
.lite-heading{ /* ---- Special Heading Area (Adapted From SCP-4058) ---- */
clear: both;
margin: 2.4em auto;
}
.lite-heading h3{
color: hsl(360, 100%, 27%);
}
.lite-heading hr{
width: 55%;
margin: auto;
border-width: medium;
}
div.image-showcase{ /* ---- Alternative Means of Image Showcasing ---- */
display: inline-block;
min-width: 25em;
max-width: 37.5em !important;
margin: auto;
margin-bottom: 1em;
background: hsl(0, 0%, 100%);
border: 3px ridge hsl(0, 0%, 5%);
}
.scene-break{ /* ---- Fancy Section Break ---- */
width: 2.5em;
margin: 1em 0;
}
.footing::before{ /* ---- Article Footing ---- */
content: " ";
position: absolute;
bottom: 1px;
left: 0;
right: 0;
border-bottom: 2px solid hsl(0, 0%, 47%);
}
.footing{
position: relative;
bottom: -2px;
margin-bottom: 2px;
border-bottom: 1px solid hsl(0, 0%, 47%);
}
.series-nav{ /* ---- Series Navigation ---- */
margin: .5em 0;
background:
linear-gradient(to bottom right,
hsla(0, 0%, 100%, 1),
hsla(0, 0%, 50%, .5));
border: outset 1.5px hsl(0, 0%, 5%);
border-radius: 2em;
font-size: 85%;
font-weight: bold;
text-align: center;
}
.listPagesNav-prev,
.listPagesNav-next{ /* ---- ListPages Navigation (Adapted from SCP-5552) ---- */
width: 45%;
margin: 0 0 1em;
padding: 0 2%;
background: hsl(0, 0%, 90%);
border: 1px solid hsl(0, 0%, 60%);
}
.listPagesNav-prev{ float: left; }
.listPagesNav-next{ float: right; }
/* -------- CUSTOM DIV BLOCKS -------- */
.raisa-header, .pink-header, .oracle-header{
margin-bottom: 1em;
padding: 0 .5em;
text-align: center;
}
.raisa-header{ /* ---- RAISA Notice Header ---- */
background: hsl(60, 65%, 85%);
border: 1px solid hsl(0, 0%, 60%);
}
.pink-header{ /* ---- Pretty Header ---- */
background: hsl(350, 100%, 85%);
border: 1px solid hsl(0, 4%, 36%);
}
.pink-header hr{
border-color: hsl(0, 4%, 36%);
}
.oracle-header{ /* ---- SPC Oracle Notice Header ---- */
color: hsl(208, 100%, 97%);
background: hsl(208, 67%, 44%);
border: 1px solid hsl(0, 0%, 5%);
}
.oracle-header hr{
border-color: hsl(208, 100%, 97%);
}
.img-resize img{ /* ---- Header Icons (See Examples) ---- */
float: left;
width: auto;
height: 8em;
margin: .5em;
}
blockquote, /* ---- Regular Quote Block ---- */
div.blockquote{
background-color: hsl(0, 0%, 96%);
border: 3px double hsl(0, 0%, 60%);
}
.alt-blockquote{ /* ---- Alternative Quote Block ---- */
margin: 1em 0;
padding: 0 1em;
background-color: hsl(0, 0%, 96%);
border: 1px solid hsl(0, 0%, 60%);
border-radius: 1em;
}
.lightweight{ /* ---- Lightweight Quote Block ---- */
margin: 1em 3em;
padding: 0 1em;
background-color: hsl(0, 0%, 90%);
text-align: left;
}
.card-block{ /* ---- Decorative Quote Block ---- */
margin: 1em 0;
padding: .6em 1.2em;
background: hsl(220, 15%, 93%);
border-left: 8px solid hsl(0, 100%, 30%);
border-radius: .48em;
}
blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr{
border-color: hsl(0, 0%, 67%);
}
.report-box{ /* ---- Report Block ---- */
margin: 1em 0;
padding: 0 1em;
background-color: hsl(0, 0%, 100%);
border: medium solid hsl(0, 0%, 5%);
}
.report-box hr{
border-color: hsl(0, 0%, 5%);
}
.report-box.red-tint{
background-color: hsl(360, 91%, 86%);
border-color: hsl(360, 62%, 66%);
}
.report-box.red-tint hr{
border-color: hsl(360, 62%, 66%);
}
.report-box.orange-tint{
background-color: hsl(30, 91%, 86%);
border-color: hsl(30, 62%, 66%);
}
.report-box.orange-tint hr{
border-color: hsl(30, 62%, 66%);
}
.report-box.yellow-tint{
background-color: hsl(60, 91%, 86%);
border-color: hsl(60, 62%, 66%);
}
.report-box.yellow-tint hr{
border-color: hsl(60, 62%, 66%);
}
.report-box.green-tint{
background-color: hsl(120, 91%, 86%);
border-color: hsl(120, 62%, 66%);
}
.report-box.green-tint hr{
border-color: hsl(120, 62%, 66%);
}
.report-box.cyan-tint{
background-color: hsl(180, 91%, 86%);
border-color: hsl(180, 62%, 66%);
}
.report-box.cyan-tint hr{
border-color: hsl(180, 62%, 66%);
}
.report-box.blue-tint{
background-color: hsl(240, 91%, 86%);
border-color: hsl(240, 62%, 66%);
}
.report-box.blue-tint hr{
border-color: hsl(240, 62%, 66%);
}
.report-box.magenta-tint{
background-color: hsl(300, 91%, 86%);
border-color: hsl(300, 62%, 66%);
}
.report-box.magenta-tint hr{
border-color: hsl(300, 62%, 66%);
}
.report-box.grey-tint{
background-color: hsl(210, 9%, 86%);
border-color: hsl(210, 15%, 42%);
}
.report-box.grey-tint hr{
border-color: hsl(210, 15%, 42%);
}
.realistic-shadow{ /* ---- Better Shadows ---- */
margin: 1em 0 2em 0;
box-shadow:
0 1px 1px hsla(0, 0%, 0%, .23),
0 2px 2px hsla(0, 0%, 0%, .18),
0 4px 4px hsla(0, 0%, 0%, .15),
0 8px 8px hsla(0, 0%, 0%, .13);
}
div.o5-box{
margin: 1em 6em;
padding: 0 1em;
background-color: hsl(0, 0%, 75%);
border: medium solid hsl(0, 0%, 5%);
}
div.o5-box hr{
border-color: hsl(0, 0%, 5%);
}
.faux-source{ /* ---- Mimics "Page Source" Appearance ---- */
margin-bottom: 1em;
padding: 0 2em;
background-color: hsl(0, 0%, 100%);
border: 1px dashed hsl(0, 0%, 67%);
}
.narration{ /* ---- Mimics the Pages of a Book ---- */
margin: 1em 0;
padding: 0 1em;
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 83%);
}
.log-header{ /* ---- Interview/Exploration Log Header ---- */
margin-bottom: 1em;
padding: 0 1em;
background: hsl(0, 0%, 96%);
border: 3px dashed hsl(0, 0%, 60%);
border-radius: 1em;
}
.warning-notice{ /* ---- Simple Warning Block (Adapted From SCP-3143) ---- */
padding: 0 1em;
background-color: hsl(0, 0%, 100%);
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
background-position: center;
background-repeat: no-repeat;
border: medium solid hsl(0, 0%, 5%);
text-align: center;
}
.journal{ /* ---- Journal Block (Adapted From SCP-4003) ---- */
margin: 1em 0;
padding: .9em;
background-image:
linear-gradient(to top,
hsl(201, 33%, 84%) 0%,
hsl(60, 29%, 89%) 8%);
background-position: 0 8px;
background-size: 100% 1.3rem;
border: 1px solid hsl(0, 0%, 80%);
border-radius: .9em;
font-family: "Architects Daughter", cursive;
}
.journal p{
margin: 0;
font-size: 1.3rem;
line-height: 1.3rem;
}
.sms-message{ /* ---- Text Message Block ---- */
float: left;
clear: left;
width: 22.4em;
margin: 0 0 1em;
padding: 0 1.2em;
background: hsl(0, 0%, 75%);
border-radius: 2em;
font-size: 112.5%;
text-align: center;
}
blockquote .collapsible-block-folded,
.alt-blockquote .collapsible-block-folded,
.lightweight .collapsible-block-folded,
.report-box .collapsible-block-folded,
div.blockquote .collapsible-block-folded{
/* ---- For Collapsibles Inside Divs | [CLOSED] ---- */
padding: .75em 0;
/* -------- */
}
.alt-blockquote .collapsible-block-unfolded,
.lightweight .collapsible-block-unfolded,
.report-box .collapsible-block-unfolded,
div.blockquote .collapsible-block-unfolded{
/* ---- For Collapsibles Inside Divs | [OPEN] ---- */
padding-top: .75em;
/* -------- */
}
/* -------- ADVANCED WARNING HEADER --------
* Adapted From SCP-001-JP - indonootoko's Proposal
* See the Example at the Top of the Page
**/
.orderwrapper{
position: relative;
width: auto;
text-align: center;
}
.council{
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 295px;
height: 295px;
margin: auto;
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
background-position: center;
background-repeat: no-repeat;
background-size: 295px 295px;
}
.ordertitle{
position: absolute;
top: 27px;
left: 0;
right: 0;
}
.ordertitle h1{
color: hsl(0, 0%, 5%);
font-size: 220%;
line-height: 90%;
}
.orderdescription{
position: absolute;
top: 93px;
left: 0;
right: 0;
width: 100%;
}
.orderdescription h1{
color: hsl(0, 0%, 5%);
font-size: 120%;
}
.orderdescription p{
color: hsl(0, 0%, 5%);
font-size: 90%;
}
.itemno{
position: absolute;
bottom: 18px;
left: 0;
right: 0;
}
.itemno h1{
color: hsl(0, 0%, 5%);
font-size: 170%;
}
/* -------- YUI TAB BASE -------- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
/* -------- YUI TAB CUSTOMIZATION --------
* Adapted From Black Highlighter Theme Dev
**/
.yui-navset *{
transition:
color 80ms cubic-bezier(.4, 0, .2, 1),
background-color 80ms cubic-bezier(.4, 0, .2, 1);
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav{
display: flex;
flex-wrap: wrap;
width: calc(100% - .125rem);
margin: 0 auto;
border-color: hsl(360, 94%, 20%);
box-shadow: 0 calc(.0625rem * 5) 0 0 hsl(360, 94%, 20%);
}
.yui-navset .yui-nav a, /* ---- Link Modifier ---- */
.yui-navset .yui-navset-top .yui-nav a{
color: hsl(0, 0%, 5%);
/* ---- Tab Background Colour | [UNSELECTED] ---- */
background-color: hsl(0, 0%, 99%);
/* -------- */
background-image: none;
border: unset;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
color: hsl(0, 0%, 96%);
/* ---- Tab Background Colour | [HOVER] ---- */
background-color: hsl(360, 100%, 27%);
/* -------- */
}
.yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
.yui-navset .yui-navset-top .yui-nav li{
position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0;
padding: 0;
background-color: hsl(0, 0%, 96%);
border-color: transparent;
box-shadow: 0 0 0 .0625rem hsl(360, 94%, 20%);
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.yui-navset .yui-nav li em{
border: unset;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em{
padding: .35em .75em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
.yui-navset .yui-navset-top .yui-nav .selected{
flex-grow: 2;
margin: 0;
padding: 0;
/* ---- Tab Background Colour | [SELECTED] ---- */
background-color: hsl(360, 94%, 20%);
/* -------- */
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em{
border: hsl(360, 94%, 20%);
}
.yui-navset .yui-nav .selected a{
width: 100%;
color: hsl(0, 0%, 96%) !important;
background-image: none;
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active{
color: hsl(0, 0%, 96%);
background-color: hsl(360, 94%, 20%);
}
.yui-navset .yui-nav .selected a:hover{
cursor: default;
}
.yui-navset-left .yui-content{
/* ---- Content Background ---- */
background-color: hsl(0, 0%, 99%);
/* -------- */
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content{
padding: .5em;
border-color: hsl(0, 0%, 60%);
}
/* -------- INTERWIKI -------- */
iframe.scpnet-interwiki-frame{
position: relative;
width: 16.8em;
height: 12em;
margin-bottom: .78em;
margin-left: 4px;
background-color: hsl(0, 0%, 100%);
border: 2px solid hsl(0, 0%, 20%);
}
/* -------- REDUCED MOTION ACCESSIBILITY -------- */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001s !important;
animation-iteration-count: 1 !important;
transition-duration: .001s !important;
}
}
/* -------- MOBILE MEDIA QUERY -------- */
@media (max-width: 479px){
#header h1 a{
font-size: 85%;
}
div.image-showcase{
width: 90%;
}
div.o5-box{
margin: 1em 0;
}
}
/* -------- NOTE MEDIA QUERY -------- */
@media (min-width: 480px) and (max-width: 580px){
#header h1 a{
font-size: 100%;
}
div.image-showcase{
width: 100%;
}
div.o5-box{
margin: .5em;
}
}
/* -------- MINI TABLET MEDIA QUERY -------- */
@media (min-width: 581px) and (max-width: 767px){
#header h1 a{
font-size: 120%;
}
}
@media (max-width: 767px){
.open-menu a:hover{
box-shadow: none;
}
}
/* -------- TABLET MEDIA QUERY -------- */
@media (min-width: 768px) and (max-width: 979px){
#header h1 a{
font-size: 140%;
}
}
/* This moves the "My account" to the right to make some space for the dark-theme button*/
#login-status {
right: 45px;
}
/* This forces the open-menu button to show */
.mobile-top-bar, #top-bar .open-menu {
display: block;
}
/* This should fix the open-menu button in mobile view */
#top-bar div.open-menu a {
background-size: 0 !important;
}
