Link to article: SCP-9222.
/* === ROOT === */
:root {
--header-title: '9K';
--header-subtitle: 'Department of Contrition';
--title-size: 2rem;
--subtitle-size: 0rem;
--header-logo: url(http://scp-wiki.wikidot.com/local--files/scp-9222/logo.png);
--image-space: calc(var(--main-content-width)/-3);
--image-float: left;
--image-float-r: right;
--basalt-undertone: 181, 114, 142;
--basalt-overtone: 218, 127, 125;
--basalt-tertiary-color: 218, 127, 125;
--basalt-bright-element-color: 181, 114, 142;
--basalt-dark-element-color: 181, 114, 142;
--thinWidth: 45%;
--docHighlightMargin: 65%;
}
@media only screen and (max-width: 1500px){
:root {--image-space: 35%; --image-float: none; --image-float-r: none; --docHighlightMargin: 0%;}
}
@media only screen and (max-width: 1290px) {
:root {--image-space: 0vw; --image-float: none; --image-float-r: none; --thinWidth: 80%; --docHighlightMargin: 0%;}
}
/* === ANIMATIONS === */
@keyframes scale-up {
from {
scale: 0%;
}
to {
scale: 100%;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes blur-in {
from {
filter: blur(10px);
}
to {
filter:blur(0px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes line-grow {
0% {
scale: 2% .5%;
}
45% {
scale: 100% .5%;
}
100% {
scale: 100% 100%;
}
}
/* === DIVS === */
.imagebox{
float:var(--image-float);
box-sizing: border-box;
margin: 0.25rem 1.25rem;
margin-left: var(--image-space) !important;
max-width: 650px;
width: 350px;
animation: scale-up 1s;
}
.genbox{
border: rgb(var(--basalt-undertone)) .3rem solid;
padding: .2rem;
background-color: rgb(var(--basalt-secondary-color));
margin: 1rem auto;
padding: .6rem;
}
.spinbox{
animation: spin 4s infinite linear;
}
.label{
background-color: rgb(var(--basalt-overtone));
border: solid 0.2rem rgb(var(--basalt-overtone));
justify-content:center;
color: white;
}
.linebox{
width: 70%;
animation: line-grow 1s;
}
.addendum{
border: rgb(var(--basalt-overtone)) solid .2rem;
width: 25%;
margin: 2rem auto;
border-image: linear-gradient(to bottom right, rgb(var(--basalt-overtone)) 0% 10%, #00000000 10% 90%, rgb(var(--basalt-overtone)) 90% 100%) 1;
padding 1rem;
background-color: rgba(var(--basalt-undertone), .11);
backdrop-filter: blur(3px);
}
.greenbox{
padding: .2rem;
background-color: rgb(var(--basalt-overtone));
margin: 1rem auto;
padding: .6rem;
width: var(--thinWidth);
}
.highlight{
border: none;
border-left: .6rem solid;
border-color:rgb(var(--basalt-overtone));
background-color: rgba(var(--basalt-overtone), .1);
backdrop-filter: blur(10px);
}
.notifbox{
border: rgb(var(--basalt-undertone)) .1rem solid;
padding: .2rem;
margin-right:70%;
background-color: rgb(var(--basalt-secondary-color));
margin-top: 2rem;
}
.strongtext{
color: rgb(var(--basalt-overtone));
font-size: 1.1rem;
}
.doc{
background-color: none;
border: none;
width: 80rem;
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
margin: 1rem auto;
}
/* === OVERRIDES === */
body{
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23da7f7d' fill-opacity='0.16' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
#header{
background-color: #DA7F7D88;
backdrop-filter: blur(10px);
border-radius: 0rem 0rem 1rem 1rem;
border: none;
}
background-color: black; min-width: 100vw; position: relative;left: calc(-50vw + 50%); margin-top: -7rem; border-bottom: 1rem solid rgb(var(--basalt-overtone));
float: right; font-size: 100px; transform: translate(0, -100px);
height: 10rem;
animation: scale-up 1s;
width: 500px; float: var(--image-float-r);
width: 75%; padding: 2rem;
padding: 1px 15px; margin: auto; margin-top: 10px; box-shadow: 0 1px 3px #555; background: #e0dedb; text-align: justify;
text-align: center
font-family: font-family:
font-family: 'Pinyon Script'; font-size: 250%; margin: 2px 0 5px;
font-family: serif; font-size: 125%; border-top-style: solid; border-bottom-style: solid;
font-family: 'Anton'; font-size: 375%; margin: 2px 0 5px;
font-family: 'Anton'; font-size: 200%; margin: 2px 0 5px;
width: 300px; float: right; border: 1.5rem solid white; margin: 1rem;
width: var(--thinWidth); margin: 3rem;
border-color: rgb(252, 235, 196); padding: 2rem;
border: 12px solid black; border-radius:50%; background-color: rgb(252, 235, 196); width: 100px;
filter: drop-shadow(2px 2px rgb(252, 235, 196));
width: 75%; padding: 2rem;
width: 75%; padding: 2rem;
width: 75%; padding: 2rem;
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
width: 75%; padding: 2rem;
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
animation: fade-in 1s;
width: 500px; border-radius: 1rem; border: .1rem solid rgb(var(--basalt-overtone));
width: 500px; margin: auto;
width: 500px; border-radius: 1rem; border: .1rem solid rgb(var(--basalt-overtone));
width: 500px; margin: auto;
margin-top: calc( var(--image-space) / 2);
width:350px; border-radius: 1rem;
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
width: 75%; padding: 2rem;
width: 75%; padding: 2rem;
width: 75%; padding: 2rem;
background: linear-gradient(transparent, black); min-width: 100vw; position: relative;left: calc(-50vw + 50%); min-height: 50rem;
background: black; min-width: 100vw; position: relative;left: calc(-50vw + 50%); color: white; margin-top: -2rem;
margin-bottom: 0rem; width: 650px;
margin: 4rem auto; background-color: transparent; margin-top: -1rem; max-width: 650px;
margin: 4rem auto; max-width: 650px;
margin-bottom: 0rem; width: 650px;
margin: 4rem auto; background-color: transparent; margin-top: -1rem; max-width: 650px;
margin-bottom: 0rem; width: 650px;
margin: 4rem auto; background-color: transparent; margin-top: -1rem; max-width: 650px;
margin: 4rem auto; max-width: 650px;
margin-bottom: 0rem; width: 650px;
margin: 4rem auto; background-color: transparent; margin-top: -1rem; max-width: 650px;
margin: 4rem auto; max-width: 650px;
margin-bottom: 0rem; width: 650px;
margin: 4rem auto; background-color: transparent; margin-top: -1rem; max-width: 650px;
background: linear-gradient(black, transparent); min-width: 100vw; position: relative;left: calc(-50vw + 50%); min-height: 52rem; margin-top: -2rem;
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
float: var(--image-float); margin: 1rem; width: 60%;
animation: blur-in 1s;
margin-left: var(--docHighlightMargin);
background-color: rgb(var(--basalt-undertone)); background-image: url(
backdrop-filter: blur(1px) brightness(50%); margin: 0rem; flex: 1; padding: 1rem;
height: 20rem;
margin-top: 9.5rem;
width: 200px; border: 2px black solid; border-radius: 50%; background-color: rgb(var(--basalt-undertone));
padding: 2rem
width: 75%; padding: 2rem;
min-width: 100vw; position: relative;left: calc(-50vw + 50%); border-top: 1rem solid rgb(var(--basalt-overtone));
margin: 4rem auto; max-width: 650px;
margin: 4rem auto; max-width: 650px;
component:preview
:scp-wiki:theme:bedrock
[info]
:scp-wiki:component:acs-animation
[info]
:scp-wiki:component:customizable-acs
[info]
:scp-wiki:component:customizable-acs
[info]
:scp-wiki:component:anomaly-class-bar-source
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
notifbox
strongtext
genbox
linebox
greenbox
genbox
highlight
genbox
highlight
genbox
highlight
genbox
crom-thumbnail
addendum
genbox
genbox
greenbox
highlight
addendum
unmargined
unmargined
unmargined
unmargined
unmargined
genbox
imagebox
blockquote
genbox
imagebox
addendum
genbox
strongtext
strongtext
addendum
genbox
greenbox
blockquote
strongtext
strongtext
addendum
genbox
genbox
highlight
blockquote
strongtext
genbox
genbox
greenbox
highlight
addendum
genbox
greenbox
highlight
addendum
blockquote
genbox
highlight
genbox
strongtext
genbox
highlight
genbox
highlight
genbox
genbox
highlight
genbox
highlight
genbox
genbox
highlight
genbox
greenbox
highlight
genbox
highlight
genbox
highlight
genbox
highlight
genbox
addendum
genbox
genbox
greenbox
highlight
genbox
doc
addendum
genbox
highlight
genbox
highlight
addendum
genbox
highlight
genbox
highlight
addendum
genbox
genbox
greenbox
highlight
addendum
genbox
doc
addendum
genbox
highlight
genbox
highlight
addendum
genbox
highlight
genbox
highlight
addendum
genbox
highlight
genbox
highlight
addendum
genbox
greenbox
blockquote
blockquote
label
genbox
imagebox
label
label
label
label
genbox
imagebox
label
label
label
addendum
genbox
doc
addendum
genbox
highlight
genbox
highlight
strongtext
strongtext
strongtext
addendum
genbox
highlight
genbox
highlight
addendum
genbox
highlight
genbox
highlight
addendum
genbox
genbox
greenbox
highlight
genbox
genbox
greenbox
highlight
genbox
genbox
greenbox
highlight
addendum
genbox
greenbox
blockquote
genbox
highlight
genbox
greenbox
blockquote
genbox
highlight
genbox
greenbox
blockquote
genbox
greenbox
blockquote
genbox
highlight
genbox
greenbox
blockquote
genbox
highlight
genbox
greenbox
blockquote
genbox
highlight
addendum
genbox
doc
addendum
genbox
highlight
genbox
highlight
addendum
genbox
highlight
genbox
highlight
blockquote
genbox
highlight
genbox
doc
strongtext
genbox
highlight
genbox
highlight
genbox
doc
strongtext
addendum
genbox
genbox
greenbox
highlight
addendum
genbox
highlight
greenbox
blockquote
strongtext
addendum
genbox
highlight
greenbox
blockquote
strongtext
addendum
genbox
highlight
greenbox
blockquote
strongtext
addendum
genbox
blockquote
genbox
highlight
footer-wikiwalk-nav
genbox