Link to article: SCP-9104.
/* Email Formatting */
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
/* Content Warning */
#page-content { position: relative; }
ul.modal-wrapper {
margin: 0;
padding: 0;
list-style: none;
height: 0;
display: contents;
font-family: monospace;
}
@keyframes fademodal {
99% { visibility: hidden; }
100% { visibility: visible; }
}
ul.modal-wrapper > li {
list-style: none;
position: absolute;
top: -0.1rem;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: opacity 1s ease-out;
animation: 1s fademodal;
animation-fill-mode: forwards;
backdrop-filter: blur(5px);
}
ul.modal-wrapper > li.unfolded {
visibility: visible;
opacity: 1;
}
ul.modal-wrapper > li.folded {
visibility: hidden;
opacity: 0;
pointer-events: none;
user-select: none;
}
/* Popup styling */
.custom-popup {
width: 90%;
height: 90%;
margin-left: auto;
margin-right: auto;
overflow: auto;
box-sizing: border-box;
color: black;
background-color: rgb(215, 215, 215);
padding: 25px;
text-shadow: none;
border: solid 2px rgb(133, 0, 5);
}
/*Different File Links*/
.arrow{
width: 30px;
position: absolute;
right: 37px;
bottom: 73px;
}
.arrow2{
width: 30px;
position: absolute;
right: 100px;
bottom: 73px;
}
.goBack > p {
text-align: center;
color: white;
background-color: rgb(133, 0, 5);
border: 2px solid black;
padding: 15px;
font-weight: bold;
font-size: 16px;
background-image: var(--diagonal-stripes);
font-family: monospace;
}
.goBack > p > a {
color: white;
font-size: 16px;
font-weight: bold;
background-image: var(--diagonal-stripes);
font-family: monospace;
}
.generalFile {
display: block;
}
.firstFile, .secondFile, .thirdFile{
display: none;
}
:has(#u-target:target) .firstFile, :has(#u-target-b:target) .secondFile, :has(#u-target-c:target) .thirdFile {
display: block;
}
:has(*:target) .generalFile {
display: none;
}
#u-target, #u-target-b, #u-target-c {
height: 0;
width: 0;
top: 0;
left: 0;
}
/* Opening notice typewriter effect (why tf do i keep insisting on doing this to myself) */
.typewriter{
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .035em; /* Adjust as needed */
padding-bottom: 10px;
animation:
typing 0.5s steps(40, end);
}
.typewriter2{
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap;
width: 0;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 0.5s steps(40, end);
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.typewriter3{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 0.5s steps(40, end);
animation-delay: 1s;
animation-fill-mode: forwards;
}
.typewriter4{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 0.5s steps(40, end);
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
.typewriter5{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
padding-bottom: 5px;
animation:
typing 0.5s steps(40, end);
animation-delay: 2s;
animation-fill-mode: forwards;
}
.typewriter6{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 0.5s steps(40, end);
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
.typewriter7{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
padding-bottom: 5px;
animation:
typing 0.5s steps(40, end);
animation-delay: 3s;
animation-fill-mode: forwards;
}
.typewriter8{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
padding-bottom: 5px;
animation:
typing 0.5s steps(40, end);
animation-delay: 3.5s;
animation-fill-mode: forwards;
}
.inputline{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
border-right: .15em solid rgb(133, 0, 5); /* The typwriter cursor */
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
padding-bottom: 10px;
animation:
typing 10s steps(56, end),
blink-caret 3s ease-out 60s;
animation-delay: 3.5s;
animation-fill-mode: forwards;
}
.afterinput{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 2s steps(40, end);
animation-delay: 6s;
animation-fill-mode: forwards;
}
.typewriterhiding{
overflow: hidden;
visibility: hidden;
animation: 1s fadeIn 2s;
animation-fill-mode: forwards;
}
.blink {
animation: blink 1s infinite;
}
@keyframes type {
from {
width: 0;
}
}
@keyframes blink {
to {
opacity: .0;
}
}
.blinkbar {
animation: blink 1.5s infinite;
letter-spacing: -0.13em;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black; }
}
@media only screen and (max-width: 600px) {
.typewriter{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
animation-fill-mode: forwards;
}
.typewriter2{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
animation-fill-mode: forwards;
width: 100%;
}
.typewriter3{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-fill-mode: forwards;
width: 100%;
}
.typewriter4{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-fill-mode: forwards;
width: 100%;
}
.typewriter5{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-fill-mode: forwards;
width: 100%;
}
.typewriter6{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-fill-mode: forwards;
width: 100%;
}
.typewriter7{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-fill-mode: forwards;
width: 100%;
}
.typewriter8{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-fill-mode: forwards;
width: 100%;
}
.inputline{
animation:
typing 5s steps(27, end),
blink-caret 3s ease-out 60s;
animation-delay:1s;
animation-fill-mode: forwards;
}
.afterinput{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
animation-delay: 2s;
animation-fill-mode: forwards;
width: 100%;
}
.arrow{
visibility: hidden;
}
.arrow2{
visibility: hidden;
}
/* Wait to appear */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
}
}
font-family: monospace;
text-align: center;
text-align: center
text-align: center
text-align: center
font-family: monospace; text-align: center;
text-align: right;
:scp-wiki:component:preview
[info]
:scp-wiki:theme:black-highlighter-theme
[info]
:scp-wiki:component:acs-animation
[info]
:scp-wiki:component:anomaly-class-bar-source
[info]
component:image-block
:scp-wiki:component:anomaly-class-bar-source
[info]
component:image-block
:scp-wiki:component:anomaly-class-bar-source
[info]
component:image-block
component:image-block
:scp-wiki:component:anomaly-class-bar-source
[info]
component:image-block
generalFile
goBack
arrow
firstFile
modal-wrapper
unfolded
custom-popup
typewriter
typewriter2
typewriter3
typewriter4
typewriter5
typewriter6
typewriter7
typewriter8
inputline
afterinput
foldable-list-container
choice
blockquote
goBack
arrow2
secondFile
blockquote
goBack
arrow2
thirdFile
blockquote
blockquote
blockquote