SCP-4485-4

Link to article: SCP-4485-4.

:root {
    --rating-module-text-color: var(--swatch-menutxt-light-color);
    --rating-module-button-color:  var(--swatch-menutxt-light-color);
}

#page-content > div:nth-child(1) {
    padding: 0.5rem 0.5rem 0 0.5rem;
}

.page-rate-widget-box {
    margin: 0;
    background:
     linear-gradient(0deg,
     rgba(var(--swatch-primary-darkest),.55) 0,
     rgba(var(--swatch-primary-darkest),.45)) !important;
}

.page-title {
    --wght: 900;
    margin-top: 1rem;
    min-height: 4rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-calc(100% - 1em - 0.5rem);
    width: -moz-calc(100% - 1em - 0.5rem);
    width: calc(100% - 1em - 0.5rem);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: initial;
    font-size: 3em;
    line-height: 1;
    text-align: center;
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--swatch-primary));
    padding: 0.5em;
    border: 0.25rem solid rgb(var(--white-monochrome));
    position: relative;
    z-index: 1;
    font-family: var(--title-font);
    font-weight: 900;
}

.page-title::before {
    content: " ";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-color: rgb(var(--swatch-primary));
    z-index: -1;
    opacity: 0.25;
}

.warning-container iframe {
    min-height: 9.375rem;
}

.warning-container,
.warning-container * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
    		box-sizing: border-box;
}

.warning-container {
    --wght: 900;
    width: 90%;
    margin: 0 auto;
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--swatch-text-light));
    font-weight: 900;
    border: 0.5em solid rgb(var(--swatch-primary-darkest));
}

.warning-container .warning-top {
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--title-font);
    background-color: rgb(var(--swatch-primary));
    background-image: url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png");
    -webkit-background-size: 50% 50%;
    -moz-background-size: 50%;
    -o-background-size: 50%;
    background-size: 50%;
    background-attachment: fixed;
    background-position: 50% 50%;
}

.warning-container .warning-body {
    --wght: 300;
    font-weight: 300;
    padding: 1rem;
    margin: 1rem;
    line-height: 1.5;
    font-size: 115%;
    font-family: var(--mono-font);
    background-color: rgb(var(--swatch-primary-darkest),0.25);
}

.warning-container .warning-body,
.warning-container .warning-body * {
    font-variation-settings: 
    	"wght" var(--mono-wght), 
    	"slnt" var(--slnt), 
    	"CASL" var(--CASL), 
    	"CRSV" var(--CRSV), 
    	"MONO" var(--MONO);
}

table.wiki-content-table {
    width: 100%;
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto;
}

table.wiki-content-table,
table.wiki-content-table * {
    border-color: rgb(var(--black-monochrome)) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

table.wiki-content-table tr:last-of-type {
    --wght: 700;
    width: 100%;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0;
    font-weight: 700;
}

table.wiki-content-table td {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -moz-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    background-color: rgb(var(--swatch-primary-darkest));
    color: rgb(var(--white-monochrome));
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
}

table.wiki-content-table td * {
    width: 100%;
}

table.wiki-content-table td span:nth-of-type(even) {
    font-family: var(--mono-font);
    font-size: 0.75em;
}

table.wiki-content-table td span:nth-of-type(even),
table.wiki-content-table td span:nth-of-type(even) * {
    font-variation-settings: 
    	"wght" var(--mono-wght), 
    	"slnt" var(--slnt), 
    	"CASL" var(--CASL), 
    	"CRSV" var(--CRSV), 
    	"MONO" var(--MONO);
}

@media only screen and (max-width: 768px) {
    .page-title {
     font-size: 2em;
    }

    table.wiki-content-table tr {
     -webkit-flex-wrap: wrap;
    	 -ms-flex-wrap: wrap;
    		 flex-wrap: wrap;
    }

    table.wiki-content-table tr > td {
     min-width: 100%;
     font-size: 1rem;
     padding: 0.5rem;
    }
}
@media (max-width: 500px ) {
    .warning-container .warning-body {
    	padding: 0.5rem 1rem;
    	margin-bottom: 1.5rem;
    	font-size: 95%;
    }
}

(none)

```
page-title
```
```
warning-container
```
```
warning-top
```
```
warning-body
```
```
wiki-content-table
```
```
alert-header
```
```
page-container
```
```
active-page
```
```
labeltext
```
```
labeltext
```
```
labeltext
```
```
labeltext
```
```
labeltext
```
```
page-container
```
```
labeltext
```
```
labeltext
```
```
labeltext
```
```
labeltext
```
```
labeltext
```
```
larger
```
```
larger
```
```
page-container
```
```
labeltext
```
```
page-container
```
```
labeltext
```
```
warning-container
```
```
continue-button
```
```
accept
```
```
supervisor
```

[[include theme:black-highlighter-theme]]
[[include theme:the-foundation-theme]]
[[module css]]
:root {
    --rating-module-text-color: var(--swatch-menutxt-light-color);
    --rating-module-button-color:  var(--swatch-menutxt-light-color);
}

#page-content > div:nth-child(1) {
    padding: 0.5rem 0.5rem 0 0.5rem;
}

.page-rate-widget-box {
    margin: 0;
    background:
     linear-gradient(0deg,
     rgba(var(--swatch-primary-darkest),.55) 0,
     rgba(var(--swatch-primary-darkest),.45)) !important;
}
[[/module]]
[[module css]]
.page-title {
    --wght: 900;
    margin-top: 1rem;
    min-height: 4rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-calc(100% - 1em - 0.5rem);
    width: -moz-calc(100% - 1em - 0.5rem);
    width: calc(100% - 1em - 0.5rem);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: initial;
    font-size: 3em;
    line-height: 1;
    text-align: center;
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--swatch-primary));
    padding: 0.5em;
    border: 0.25rem solid rgb(var(--white-monochrome));
    position: relative;
    z-index: 1;
    font-family: var(--title-font);
    font-weight: 900;
}

.page-title::before {
    content: " ";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-color: rgb(var(--swatch-primary));
    z-index: -1;
    opacity: 0.25;
}

.warning-container iframe {
    min-height: 9.375rem;
}

.warning-container,
.warning-container * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
    		box-sizing: border-box;
}

.warning-container {
    --wght: 900;
    width: 90%;
    margin: 0 auto;
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--swatch-text-light));
    font-weight: 900;
    border: 0.5em solid rgb(var(--swatch-primary-darkest));
}

.warning-container .warning-top {
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--title-font);
    background-color: rgb(var(--swatch-primary));
    background-image: url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png");
    -webkit-background-size: 50% 50%;
    -moz-background-size: 50%;
    -o-background-size: 50%;
    background-size: 50%;
    background-attachment: fixed;
    background-position: 50% 50%;
}

.warning-container .warning-body {
    --wght: 300;
    font-weight: 300;
    padding: 1rem;
    margin: 1rem;
    line-height: 1.5;
    font-size: 115%;
    font-family: var(--mono-font);
    background-color: rgb(var(--swatch-primary-darkest),0.25);
}

.warning-container .warning-body,
.warning-container .warning-body * {
    font-variation-settings: 
    	"wght" var(--mono-wght), 
    	"slnt" var(--slnt), 
    	"CASL" var(--CASL), 
    	"CRSV" var(--CRSV), 
    	"MONO" var(--MONO);
}

table.wiki-content-table {
    width: 100%;
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto;
}

table.wiki-content-table,
table.wiki-content-table * {
    border-color: rgb(var(--black-monochrome)) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

table.wiki-content-table tr:last-of-type {
    --wght: 700;
    width: 100%;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0;
    font-weight: 700;
}

table.wiki-content-table td {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -moz-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    background-color: rgb(var(--swatch-primary-darkest));
    color: rgb(var(--white-monochrome));
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
}

table.wiki-content-table td * {
    width: 100%;
}

table.wiki-content-table td span:nth-of-type(even) {
    font-family: var(--mono-font);
    font-size: 0.75em;
}

table.wiki-content-table td span:nth-of-type(even),
table.wiki-content-table td span:nth-of-type(even) * {
    font-variation-settings: 
    	"wght" var(--mono-wght), 
    	"slnt" var(--slnt), 
    	"CASL" var(--CASL), 
    	"CRSV" var(--CRSV), 
    	"MONO" var(--MONO);
}

@media only screen and (max-width: 768px) {
    .page-title {
     font-size: 2em;
    }

    table.wiki-content-table tr {
     -webkit-flex-wrap: wrap;
    	 -ms-flex-wrap: wrap;
    		 flex-wrap: wrap;
    }

    table.wiki-content-table tr > td {
     min-width: 100%;
     font-size: 1rem;
     padding: 0.5rem;
    }
}
@media (max-width: 500px ) {
    .warning-container .warning-body {
    	padding: 0.5rem 1rem;
    	margin-bottom: 1.5rem;
    	font-size: 95%;
    }
}
[[/module]]
[[div_ class="page-title"]]
SCP-4485 ORIENTATION PART ▓▓ OF 8
[[/div]]
@@ @@
[[div_ class="warning-container"]]
[[div_ class="warning-top"]]
!! REMOTE TERMINAL MESSAGE !!
[[/div]]
[[div class="warning-body"]]
I don't have much longer here.

The sideways eyes lift their fins to the sky and sink into the abyss.
It calls for me and I ignore it.

Soon it will have me.
And you.

And nothing, if you ask me. 
R i d i c u l o u s!

Just look quick and find what you are hiding from.
I will take and send.

--Dr. Lark
[[/div]]
[[/div]]

------

[[table class="wiki-content-table"]]
[[row]]
[[hcell colspan="2"]]
SCP-4485 PRIMARY DOCUMENT
[[/hcell]]
[[/row]]
[[row]]
[[cell]]
[[span]]DIARY OF JEAN ARP (AKA HANS ARP)[[/span]]
[[span]]DISCOVERED 29 June, 1967[[/span]]
[[/cell]]
[[cell]]
[[span]]SCANNED DUPLICATES OF SCP-4485[[/span]]
[[span]]DATABASE LOCATION LEVEL 5 -- TOP SECRET[[/span]]
[[/cell]]
[[/row]]
[[/table]]
[[html]]
<!DOCTYPE html>

<head>
    <base target="_parent">
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/fittext.js"></script>

    <link rel="stylesheet" type="text/css" href="https://d3g0gp89917ko0.cloudfront.net/v--b23e476b7ade/common--theme/base/css/style.css">
    <link rel="stylesheet" type="text/css" href="https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css">
    <link rel="stylesheet" type="text/css" href="https://scp-wiki.wdfiles.com/local--code/theme%3Athe-foundation-theme/1">
    <link rel="stylesheet" type="text/css" href="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/hansarp-6of8.css">
    <link rel="stylesheet" href="https://use.typekit.net/nxh3gyk.css">
</head>

<body>
    <div id="docu-alert">
    	<div class="alert-header">
    	   !! ATTENTION !! ATTENTION !!
    	</div>
    	<div id="alert-body-1">
    		<section>UNAUTHORIZED ACCESS DETECTED.</section>
    		<section>ERROR ERROR ERROR ERROR ERROR</section>
    		<section>UN- UN- UN--- ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</section>
    	</div>
    	<div id="alert-body-2">
    		Authorization approved.
    		Thank you, ▓▓▓▓HANSARP. ⿂⿂⿂
    	</div>
    	<div id="alert-button">
    		<a href="https://scp-wiki.wikidot.com/scp-4485/offset/5">Click to continue.</a>
    	</div>
    </div>
    <div id="docuviewer"> 
    		<div id="docu-header">
    				<span>FOUNDATION DOCU-VIEWER</span> <span>// AUTHO</span><span>RIZED CONTENT</span>
    		</div> 
    		<div id="docu-nav">
    			<div id="back-button">
    				◀
    			</div>
    			<div id="forward-button">
    				▶
    			</div>
    		</div>    
    		<div class="page-container"> 
    		<div id="page1" class="active-page">
    			<section>
    				<p>ahead and behind</p>
    				<p>inside and around</p>
    				<p>look up and look down</p>
    			</section>
    			<section>
    				<p class="labeltext">understanding is searching for an empty cup from which to drink air</p>
    				<p class="labeltext">listening is a quality of which only canines find within their expertise</p>
    				<p class="labeltext">DADA is missing. DADA is found.</p>
    			</section>
    			<section>
    				<p>DADA is the rising lights within the singed forest of turgid education</p>
    			</section>
    			<section>
    				<figure>
    					<picture>
    						<source srcset="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/watchinglistening.png" type="image/png"> 
    						<img src="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/watchinglistening.png" alt="do not look away.">
    					</picture>
    				</figure>
    			</section>
    			<section>
    				<p class="labeltext">hide hide hide</p>
    				<p class="labeltext">it searches for you</p>
    				<p>complacency and that which shatters the dark matter in which you sit</p>
    				<p>glowing in the horrid and lovely</p>
    			</section>
    		</div>
    	</div>
    	<div class="page-container">
    		<div id="page2">
    			<section>
    				<p class="labeltext">i sit among the degloved hand of justice dripping her dark essence</p>
    				<p class="labeltext">sinking through the cracks of cancerous bone</p>
    				<p class="labeltext">holding my feet above the rolling contradiction among all things</p>
    				<p class="labeltext">drink drink inhale breath</p>
    			</section>
    			<section>
    				<p class="labeltext">in contradiction we find all that we are</p>
    				<p>in contradiction we gaze at the heavy weight that shatters among observation</p>
    				<p>in contradiction we find it <span class="larger">↴</span></p>
    				<p>we find DADA</p>
    			</section>
    			<section>
    				<p>but it does not matter</p>
    				<p><span class="larger">no</span> it does not matter and thus matter loses matter</p>
    				<p>and matter does not matter to the matter that matters to us</p>
    			</section>
    			<section>
    				<figure>
    					<picture>
    						<source srcset="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/watchingone.svg" type="image/svg"> 
    						<img src="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/watchingone.svg" alt="up above, coming for your upside down looks">
    					</picture>
    				</figure>
    			</section>
    		</div>
    	</div>
    	<div class="page-container">
    		<div id="page3">
    			<section>
    				<p><span>monotonous <span>among <span>the <span>waving <span>shades <span>of <span>cries</span></span></span></span></span></span></span></p>
    				<p class="labeltext">seen rather than heard:</p>
    			</section>
    			<section>
    				<p>you</p>
    				<p>do</p>
    				<p>hide</p>
    				<p>you</p>
    				<p>don't</p>
    				<p>taste</p>
    				<p>you</p>
    				<p>are</p>
    				<p>pith</p>
    			</section>
    			<section>
    				<p>like the screams that <span>birthed</span></p>
    				<p>the simplistic and the complex</p>
    			</section>
    		</div>
    	</div>
    	<div class="page-container">
    		<div id="page4">
    			<section>
    				<p class="labeltext">we are here</p>
    				<p>i am here</p>
    				<p>i am HANSARP.</p>
    				<p>we are HANSARP.</p>
    			</section>
    			<section>
    				<figure>
    					<picture>
    						<source srcset="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/HANSARP.svg" type="image/png"> 
    						<img src="https://scp-wiki.wdfiles.com/local--files/fragment:scp-4485-4/HANSARP.svg" alt="we are we">
    					</picture>
    				</figure>
    			</section>
    		</div>
    	</div>
    </div>
    <script>
    	var page1 = document.getElementById("page1");

    	var page1 = document.getElementById("page1");
    	var page2 = document.getElementById("page2");
    	var page3 = document.getElementById("page3");
    	var page4 = document.getElementById("page4");

    	var currentPage = 1;

    	function duplicate() {
    		var clone1 = page1.cloneNode(true); // "deep" clone
    		var clone2 = page2.cloneNode(true); // "deep" clone
    		var clone3 = page3.cloneNode(true); // "deep" clone
    		var clone4 = page4.cloneNode(true); // "deep" clone
    		clone1.id = "page1" + "-duplicate";
    		clone2.id = "page2" + "-duplicate";
    		clone3.id = "page3" + "-duplicate";
    		clone4.id = "page4" + "-duplicate";
    		// or clone.id = ""; if the divs don't need an ID
    		page1.parentNode.appendChild(clone1);
    		page2.parentNode.appendChild(clone2);
    		page3.parentNode.appendChild(clone3);
    		page4.parentNode.appendChild(clone4);
    	}

    	var backButton = document.getElementById("back-button");
    	var forwardButton = document.getElementById("forward-button");

    	backButton.addEventListener("click", function(){
    		if (currentPage == 2) {
    			currentPage = 1;
    			page2.classList.remove("active-page");
    			page1.classList.add("active-page");
    		}
    		else if (currentPage == 3) {
    			currentPage = 2;
    			page3.classList.remove("active-page");
    			page2.classList.add("active-page");
    		}
    		else if (currentPage == 4) {
    			currentPage = 3;
    			page4.classList.remove("active-page");
    			page3.classList.add("active-page");
    		}
    	}, false);

    	forwardButton.addEventListener("click", function(){
    		if (currentPage == 1) {
    			currentPage = 2;
    			page1.classList.remove("active-page");
    			page2.classList.add("active-page");
    		}
    		else if (currentPage == 2) {
    			currentPage = 3;
    			page2.classList.remove("active-page");
    			page3.classList.add("active-page");
    		}
    		else if (currentPage == 3) {
    			currentPage = 4;
    			page3.classList.remove("active-page");
    			page4.classList.add("active-page");
    			setTimeout(function(){
    				var page4Duplicate = document.getElementById("page4-duplicate");
    				page4.classList.add("overlay");
    				page4Duplicate.classList.add("overlay");
    			}, 3000);
    			setTimeout(function(){
    				var docuviewer = document.getElementById("docuviewer");
    				var alert = document.getElementById("docu-alert");
    				docuviewer.classList.add("darken");
    				setTimeout(function(){
    					var alertBody1 = document.getElementById("alert-body-1");
    					var alertBody2 = document.getElementById("alert-body-2");
    					var alertButton = document.getElementById("alert-button");
    					alert.classList.add("alert-active");
    					alertBody1.classList.add("alert-body-show");
    					setTimeout(function(){
    						alertBody1.classList.add("overlay");
    						setTimeout(function(){
    							alertBody1.classList.remove("overlay");
    							alertBody1.classList.remove("alert-body-show");
    							alertBody2.classList.add("alert-body-show");
    							setTimeout(function(){
    								alertButton.classList.add("alert-body-show");
    							},250);
    						},500);
    					},1500);
    				}, 1500);
    			}, 3500);
    		}
    	},false);

    	window.fitText( document.getElementById("docu-header"),3 );
    </script>
</body>
[[/html]]


------

[[div_ class="warning-container"]]
[[html]]
<!DOCTYPE html>

<head>
    <base target="_parent">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="https://d3g0gp89917ko0.cloudfront.net/v--b23e476b7ade/common--theme/base/css/style.css">
    <link rel="stylesheet" type="text/css" href="https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css">
    <link rel="stylesheet" type="text/css" href="https://scp-wiki.wdfiles.com/local--code/theme%3Athe-foundation-theme/1">
    <style>
    	html#html-block-html, 
    	html#html-block-html body {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		height: 100% !important;
    		width: 100% !important;
    	}
    	.continue-button {
    		--wght: 900;
    		border: 0.313rem solid transparent;
    		background: rgba(var(--swatch-primary-darkest));
    		color: rgba(var(--white-monochrome));
    		padding: 0.95em 1em;
    		width: 15em;
    		max-height: 4em;
    		transition:
    			text-indent 1.2s cubic-bezier(0.4, 0.0, 0.2, 1),
    			width 1.2s cubic-bezier(0.4, 0.0, 0.2, 1),
    			max-height 1.2s cubic-bezier(0.4, 0.0, 0.2, 1),
    			color 1.2s cubic-bezier(0.4, 0.0, 0.2, 1),
    			background 1.2s 1.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    			transform 0.2s 1.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    			box-shadow 0.2s 1.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    		white-space: nowrap;
    		font-weight: 900;
    		margin: 1rem auto;
    		font-family: var(--title-font);
    		line-height: 1;
    		font-size: 1.5em;
    		text-align: center;
    		display: flex;
    		flex-wrap: wrap;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    		position: relative;
    		text-indent: 0;
    	}

    	#continue-link {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 5;
    		cursor: progress;
    	}

    	.continue-button a.active-link {
    		cursor: pointer !important;
    	}

    	.continue-button br {
    		display: none;
    	}

    	.continue-button::before {
    		pointer-events: none;
    		content: " ";
    		position: absolute;
    		top: -0.625rem;
    		left: -0.625rem;
    		width: calc(100% + 1.25rem);
    		height: calc(100% + 1.25rem);
    		background-color: rgb(var(--swatch-primary));
    		background-image: url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png");
    		background-size: 50%;
    		background-attachment: fixed;
    		opacity: 0;
    		transition:
    			opacity 1.2s 1.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    			background-size 1.2s 1.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    		background-position: center center;
    		z-index: -1;
    	}

    	.continue-button:hover::before {
    		opacity: 1;
    		background-size: 100%;
    	}

    	.continue-button .supervisor {
    		max-height: 0;
    		font-size: 0.85em;
    		text-align: center;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		opacity: 0;
    		transition:
    			opacity 1.1s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			max-height 1.1s 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	}

    	.continue-button:hover .supervisor {
    		opacity: 1;
    		max-height: 2em;
    		transition:
    			opacity 1.1s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			max-height 1.1s 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	}

    	.continue-button span {
    		--wght: 400;
    		display: inline-flex;
    		transform: translateX(13rem) translateY(0.5rem);
    		font-weight: 400;
    		color: rgba(var(--white-monochrome), 0);
    		opacity: 0;
    		transition:
    			opacity 1.1s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			transform 1.1s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			color 1.4s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			text-shadow 1.4s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			font-size 0s 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			background-color 1..4s 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    		position: absolute;
    		right: 1.875rem;
    		top: 0.367rem;
    		font-size: 0em;
    		border-radius: 50%;
    		background-color: darkgreen;
    		width: 3.750rem;
    		height: 3.750rem;
    		align-items: flex-start;
    		justify-content: flex-start;
    		text-shadow:
    			0 0 0 rgba(var(--light-gray-monochrome), 1);
    		z-index: -1;
    		text-indent: 0;
    	}

    	.continue-button:hover {
    		text-indent: -4em;
    		background: rgba(var(--light-gray-monochrome));
    		color: rgba(var(--white-monochrome));
    		width: 17em;
    		max-height: 10em;
    		transform: translateX(0.625rem) translateY(-0.625rem);
    		box-shadow:
    			0.625rem 0 0 rgba(var(--light-gray-monochrome), 1),
    			-0.625rem 0 0 rgba(var(--light-gray-monochrome), 1),
    			0 0.625rem 0 rgba(var(--light-gray-monochrome), 1),
    			0 -0.625rem 0 rgba(var(--light-gray-monochrome), 1),
    			0.625rem 0.625rem 0 rgba(var(--light-gray-monochrome), 1),
    			-0.625rem 0.625rem 0 rgba(var(--light-gray-monochrome), 1),
    			0.625rem -0.625rem 0 rgba(var(--light-gray-monochrome), 1),
    			-0.625rem -0.625rem 0 rgba(var(--light-gray-monochrome), 1);
    	}

    	.continue-button:hover span {
    		color: rgba(var(--white-monochrome), 1);
    		text-shadow:
    			0.0625rem 0 0 rgba(var(--light-gray-monochrome), 1),
    			-0.0625rem 0 0 rgba(var(--light-gray-monochrome), 1),
    			0 0.0625rem 0 rgba(var(--light-gray-monochrome), 1),
    			0 -0.0625rem 0 rgba(var(--light-gray-monochrome), 1),
    			0.0625rem 0.0625rem 0 rgba(var(--light-gray-monochrome), 1),
    			-0.0625rem 0.0625rem 0 rgba(var(--light-gray-monochrome), 1),
    			0.0625rem -0.0625rem 0 rgba(var(--light-gray-monochrome), 1),
    			-0.0625rem -0.0625rem 0 rgba(var(--light-gray-monochrome), 1);
    		transition:
    			opacity 1.1s 1.5s cubic-bezier(0.4, 0.0, 0.2, 1),
    			transform 1.4s 1.5s cubic-bezier(0.4, 0.0, 0.2, 1),
    			color 1.4s 6.8s cubic-bezier(0.4, 0.0, 0.2, 1),
    			text-shadow 1.4s 6.8s cubic-bezier(0.4, 0.0, 0.2, 1),
    			font-size 400ms 6.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    		transform: translateX(0) translateY(0.5rem);
    		opacity: 1;
    		font-size: 3em;
    	}

    	.continue-button span::before {
    		content: " ";
    		pointer-events: none;
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		border-radius: 50%;
    		text-indent: -3em;
    		transform: rotateZ(360deg);
    		z-index: -1;
    	}

    	.continue-button:hover span::before {
    		transition:
    			transform 6.8s 1500ms cubic-bezier(0.4, 0.0, 0.2, 1);
    		animation:
    			border 5.4s cubic-bezier(0.2, 0.6, 0.8, 1) 1500ms 1 forwards,
    			background-color 5.4s cubic-bezier(0.2, 0.6, 0.8, 1) 1500ms 1 forwards,
    			rotate 1.125s linear 1500ms 5 backwards;
    		transform: rotateZ(0deg);
    		background-color: rgb(var(--swatch-primary));
    	}

    	@keyframes border {
    		0% {
    			box-shadow:
    				inset 0 0.3125rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Top 1 */
    				inset 0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Top Left 2 */
    				inset 0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Left 3 */
    				inset 0 -0.3125rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom 4*/
    				inset 0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Left 5 */
    				inset -0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Right 6 */
    				inset -0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Right 7 */
    				inset -0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0);
    			/* Top Right 8 */
    		}

    		6.25% {
    			box-shadow:
    				inset 0 0.3125rem 0 rgba(var(--white-monochrome)),
    				/* Top 1 */
    				inset 0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Top Left 2 */
    				inset 0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Left 3 */
    				inset 0 -0.3125rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom 4*/
    				inset 0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Left 5 */
    				inset -0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Right 6 */
    				inset -0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Right 7 */
    				inset -0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0);
    			/* Top Right 8 */
    		}

    		93.75% {
    			box-shadow:
    				inset 0 0.3125rem 0 rgba(var(--white-monochrome)),
    				/* Top 1 */
    				inset 0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Top Left 2 */
    				inset 0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Left 3 */
    				inset 0 -0.3125rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom 4*/
    				inset 0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Left 5 */
    				inset -0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Right 6 */
    				inset -0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Right 7 */
    				inset -0.234375rem 0.234375rem 0 rgba(var(--white-monochrome));
    			/* Top Right 8 */
    		}

    		100% {
    			box-shadow:
    				inset 0 0.3125rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Top 1 */
    				inset 0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Top Left 2 */
    				inset 0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Left 3 */
    				inset 0 -0.3125rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom 4*/
    				inset 0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Left 5 */
    				inset -0.234375rem -0.234375rem 0 rgba(var(--light-gray-monochrome), 0),
    				/* Bottom Right 6 */
    				inset -0.3125rem 0 0 rgba(var(--light-gray-monochrome), 0),
    				/* Right 7 */
    				inset -0.234375rem 0.234375rem 0 rgba(var(--light-gray-monochrome), 0);
    			/* Top Right 8 */

    		}
    	}

    	@keyframes rotate {
    		0% {
    			transform: rotate(0deg);
    		}

    		100% {
    			transform: rotate(360deg);
    		}
    	}
    	@media only screen and (max-width: 400px) {
    		.continue-button {
    			font-size: 1em;
    		}
    	}

    </style>
</head>

<body>
    <div id="continue-button-id" class="continue-button">
    	<div id="continue-link"></div>
    	<div class="accept">CLICK TO SUBMIT APPROVAL</div>
    	<div class="supervisor">SUPERVISOR APPROVAL</div>
    	<br>
    	<span>✖</span>
    </div>
</body>

[[/html]]
[[/div]]

SCP-4485-4

Module Styles

Inline Styles

Includes

CSS Classes

Page Source