VS#36 Welcome to the LOVE Hospital

VS#36HNS: Welcome to the LOVE Hospital

CSS

/*Last Update: 10/20/19 */

/* MUSICBOX CSS IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/cvduve2pku4zf7l/musicbox.css");

/* PAGE BACKGROUND AND MAIN IMAGES - PRIMARY */
body {
background:url('https://dl.dropbox.com/s/rpv6axawwu83czw/0119-light-wood-fine-texture-seamless.jpg');
}
#page {
background-image:url('https://dl.dropbox.com/s/dbbvhl0usj76nt1/45-parchment-paper-light-texture-seamless.jpg');
}
#mugshot::before {
background:content-box url('https://i.imgur.com/xqzOyZy.jpg') center / cover;
}

/* PAGE BACKGROUND AND MAIN IMAGES - SECONDARY */
body::before {
background:url('https://dl.dropbox.com/s/2ry105bor9jk125/paint-splatter-red.png') no-repeat right center / cover, url('https://dl.dropbox.com/s/8t4vxy7s04cdka2/63-dark-fine-wood-texture-seamless.jpg');
}
#page::before {
background:url('https://dl.dropbox.com/s/a753bx8di3zek55/blood-1.png') no-repeat left center / auto 100vh;
}
#mugshot::after {																																																									/* SECONDARY MAIN IMAGE IS THIS ONE */
background:content-box url('https://dl.dropbox.com/s/a2hy3rlk78q4u64/blood-3.png') no-repeat 160% 140% / auto 60%, border-box url('https://data.whicdn.com/images/55294638/large.jpg') center / cover;
}

/* FONTS */
#page {
font-family:monospace;
font-size:12px;
line-height:16px;	/* Match .lines gradient height */
}
#mp3-player {
font-family:sans-serif;
font-weight:bold;
}

/* MAIN DISPLAY COLORS */
#page, #mugshot {
background-color:#fafafa;
box-shadow:1px 1px 3px #000;
}
#mp3-player {
background:linear-gradient(to right,rgba(255,255,255,0.4),transparent 4% 96%,rgba(255,255,255,0.4)), #451f61;
background:-o-linear-gradient(left,rgba(255,255,255,0.4),transparent 4% 96%,rgba(255,255,255,0.4)), #451f61;
background:-moz-linear-gradient(left,rgba(255,255,255,0.4),transparent 4% 96%,rgba(255,255,255,0.4)), #451f61;
background:-webkit-linear-gradient(left,rgba(255,255,255,0.4),transparent 4% 96%,rgba(255,255,255,0.4)), #451f61;
box-shadow:2px 2px 5px #000;
}
#mp3-player > div {
background-color:#fafafa;
border:6px solid #222;
color:#383b3e;
text-shadow:0 0 1px #383b3e;
}
#mp3-player::after {
background-color:#fff;
box-shadow:0 0 2px #000,0 0 2px inset #000;
}

/* NON-ADJUSTABLE FONTS AND COLORS. THESE ARE ENTANGLED WITH AN IMPORTED ANIMATION
   IF YOU REALLY REALLY WANT TO CHANGE THEM THEN YOU CAN TRY ADDING !IMPORTANT TO THE END OF THE ATTRIBUTE
	 OR YOU CAN DISPOSE OF THE CORRESPONDING ANIMATION BELOW */
#obox {
font-family:'Seaweed Script',cursive;
font-size:22px;
line-height:24px;
background-color:#ecd383;
color:#383b3e;
box-shadow:1px 1px 3px #000;
}
.lines {
background:linear-gradient(transparent 14px, #383b3e 14px) center top / 100% 16px;
background:-o-linear-gradient(transparent 14px, #383b3e 14px) center top / 100% 16px;
background:-moz-linear-gradient(transparent 14px, #383b3e 14px) center top / 100% 16px;
background:-webkit-linear-gradient(transparent 14px, #383b3e 14px) center top / 100% 16px;
color:#383b3e;
text-shadow:0 0 1px #383b3e;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:4px;
height:4px;
background-color:transparent;
border-radius:2px;
}
::-webkit-scrollbar-thumb {
background-color:#383b3e;
border-radius:2px;
}

/* ANIMATIONS */
body::before, #mugshot::after, #page::before,
.lines, #obox {
animation:10s 4s linear infinite;
-o-animation:10s 4s linear infinite;
-moz-animation:10s 4s linear infinite;
-webkit-animation:10s 4s linear infinite;
}
body::before, #mugshot::after, #page::before {
opacity:0;
animation-name:flicker;
-o-animation-name:flicker;
-moz-animation-name:flicker;
-webkit-animation-name:flicker;
}
.lines {
animation-name:color-darken;
-o-animation-name:color-darken;
-moz-animation-name:color-darken;
-webkit-animation-name:color-darken;
}
#obox {
animation-name:color-flicker;
-o-animation-name:color-flicker;
-moz-animation-name:color-flicker;
-webkit-animation-name:color-flicker;
}
#mp3-player p {
animation:12s slide linear infinite;
-o-animation:12s slide linear infinite;
-moz-animation:12s slide linear infinite;
-webkit-animation:12s slide linear infinite;
}

/* CSS MEAT */
body::before, #mugshot::before, #mugshot::after, #page::before, .content {
content:"";
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
#page, #mugshot {
border-radius:1px;
}
#page {
z-index:1;
position:fixed;
top:5vh;
left:50%;
height:92vh;
width:71vh;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#clip {
position:absolute;
top:-15px;
left:2%;
height:60px;
filter:drop-shadow(1px 1px 1px #000);
-webkit-filter:drop-shadow(1px 1px 1px #000);
}
#mugshot {
display:inline-block;
float:left;
position:relative;
top:1%;
left:-1%;
height:40%;
width:36%;
border:10px solid transparent;
transform:rotate(5deg);
-o-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
#statbox {
float:right;
margin:4vh;
margin-left:0;
height:42%;
width:46%;
overflow:hidden;
}
#infobox, #obox {
overflow-y:auto;
}
#infobox {
display:block;
clear:both;
height:45%;
margin:4vh;
}
#obox, #mp3-player {
z-index:2;
position:fixed;
}
#obox {
top:2%;
left:2%;
height:40vh;
width:36vh;
padding:2vh;
transform:rotate(-15deg);
-o-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
}
#mp3-player {
bottom:-2%;
right:15%;
height:16vh;
width:16vh;
padding:9vh 3vh 12vh 3vh;
border-radius:7vh;
transform:rotate(22deg);
-o-transform:rotate(22deg);
-moz-transform:rotate(22deg);
-webkit-transform:rotate(22deg);
}
#mp3-player div {
display:block;
}
#mp3-player > div {
height:14vh;
border-radius:5px;
text-align:center;
overflow:hidden;
white-space:nowrap;
}
#musicbox {
left:50%;
margin:1vh -16px;
}
#mp3-player p,
#mp3-player::after {
display:inline-block;
position:relative;
}
#mp3-player p {
text-indent:0;
margin:1vh 0;
padding:0 1vh;
}
#mp3-player::after {
content:"";
left:50%;
margin:3vh -3vh;
height:6vh;
width:6vh;
border-radius:100%;
}
.stat {
display:block;
}
.stat span {
float:right;
}
#statbox img, #infobox img, #obox img {
width:100%;
}
p {
margin:0;
text-indent:5%;
}

/* MOBILE COMPATIBILITY */
@media only screen and (orientation:portrait) {
	#mp3-player {
	display:none;
	}
}

#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Lacquer|Seaweed+Script" rel="stylesheet">
<link href="https://dl.dropbox.com/s/93j0zetuoqe7wdq/vs36-animations.css" rel="stylesheet">

<div id="mp3-player">
<div>
<div id="musicbox">
<audio controls controlsList="nodownload">
<source src="https://dl.dropbox.com/s/j2tpl5tbsvrdcq9/09%20Welcome%20to%20the%20Love%20Hospital.mp3" type="audio/mpeg">
</audio>
</div>
<p>Welcome to the LOVE Hospital</p>
</div>
</div>

<div id="obox">
<li>Bullet one.</li>
<li>Bullet two.</li>
<li>Bullet three.</li>
<li>Bullet four.</li>
</div>

<div id="page">
<div class="content">
<div id="mugshot"></div>
<img src="https://dl.dropbox.com/s/g2lvxf8ytn1nhqx/quantum-professional-t-paper-clip.png" id="clip"/>

<div class="lines" id="statbox">
<div class="stat">Name:<span>Hatsune Miku</span></div>
<div class="stat">Gender:<span>Female</span></div>
<div class="stat">Age:<span>16</span></div>
<div class="stat">Height:<span>5'0"</span></div>
<div class="stat">Weight:<span>98 lbs.</span></div>
<div class="stat">Occupation:<span>Nurse</span></div>
</div>

<div class="lines" id="infobox">
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
</div>
</div>
</div>

<a href="http://bitly.com/2vJNCgN" target="_blank" title="VS#36">
<img src="https://dl.dropboxusercontent.com/s/wdgda69ofyw8f2m/mirza_small.png?dl=0" id="credit"/>
</a>