VS#37 Dream

VS#37MTC: Dream

CSS

/* Last Update: 10/28/19 */

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

/* PAGE BACKGROUNDS AND FONTS */
body {
background:#f7b5c3 url("https://dl.dropbox.com/s/exp47msinplon9g/cloud-top-purple.png") no-repeat center top / 100% 50% fixed;
font-family:arial;
}
#mugshot, label {
filter:drop-shadow(2px 1px 4px rgba(0,0,0,0.3));
-webkit-filter:drop-shadow(2px 1px 4px rgba(0,0,0,0.3));
}
.title {
background:radial-gradient(#f7b5c3,transparent 75%) no-repeat bottom / 100% 50%;
background:-o-radial-gradient(#f7b5c3,transparent 75%) no-repeat bottom / 100% 50%;
background:-moz-radial-gradient(#f7b5c3,transparent 75%) no-repeat bottom / 100% 50%;
background:-webkit-radial-gradient(#f7b5c3,transparent 75%) no-repeat bottom / 100% 50%;
font-family:fantasy;
}
.title#bg {
background:url('https://dl.dropbox.com/s/v10aw4e6fza86da/purple-sparkle.gif') center / cover;
background-clip:text;
-webkit-background-clip:text;
}
label, #musicbox {
background:url("https://dl.dropbox.com/s/qnvr61qmbzptmi6/drawn-lil-star.png") no-repeat center / contain;
}
.big {
background-image:url("https://dl.dropbox.com/s/zx19wv3vfqukj1k/drawn-star.png");
}

/* MAIN DISPLAY COLORS */
.color, body::after {
color:#fff;
text-shadow:2px 1px 4px #000;
}
.title {
color:#4239A2;
text-shadow:1px 0 0 #fff,0 1px 0 #fff,
	-1px 0 0 #fff,0 -1px 0 #fff,
	2px 1px 4px #000;
}
b {
color:#f7b5c3;
}
a {
color:#daae47;
text-shadow:0 0 1px #383b3e,0 0 1px #383b3e,
	2px 1px 4px #000;
}

/* POLKA DOT COLOR FIELD */
body::before {
box-shadow:5.5vw 0 0 #b984b6,16vw 0 0 #b984b6,26.5vw 0 0 #b984b6,37vw 0 0 #b984b6,47.5vw 0 0 #b984b6,58vw 0 0 #b984b6,68.5vw 0 0 #b984b6,79vw 0 0 #b984b6,89.5vw 0 0 #b984b6,100vw 0 0 #b984b6,
	0 11vh 0 #b984b6,10.5vw 11vh 0 #b984b6,21vw 11vh 0 #b984b6,31.5vw 11vh 0 #b984b6,42vw 11vh 0 #b984b6,52.5vw 11vh 0 #b984b6,63vw 11vh 0 #b984b6,73.5vw 11vh 0 #b984b6,84vw 11vh 0 #b984b6,94.5vw 11vh 0 #b984b6,105vw 11vh 0 #b984b6,
	5.5vw 22vh 0 #b984b6,16vw 22vh 0 #b984b6,26.5vw 22vh 0 #b984b6,37vw 22vh 0 #b984b6,47.5vw 22vh 0 #b984b6,58vw 22vh 0 #b984b6,68.5vw 22vh 0 #b984b6,79vw 22vh 0 #b984b6,89.5vw 22vh 0 #b984b6,100vw 22vh 0 #b984b6,
	0 33vh 0 #b984b6,10.5vw 33vh 0 #b984b6,21vw 33vh 0 #b984b6,31.5vw 33vh 0 #b984b6,42vw 33vh 0 #b984b6,52.5vw 33vh 0 #b984b6,63vw 33vh 0 #b984b6,73.5vw 33vh 0 #b984b6,84vw 33vh 0 #b984b6,94.5vw 33vh 0 #b984b6,105vw 33vh 0 #b984b6,
	5.5vw 44vh 0 #b984b6,16vw 44vh 0 #b984b6,26.5vw 44vh 0 #b984b6,37vw 44vh 0 #b984b6,47.5vw 44vh 0 #b984b6,58vw 44vh 0 #b984b6,68.5vw 44vh 0 #b984b6,79vw 44vh 0 #b984b6,89.5vw 44vh 0 #b984b6,100vw 44vh 0 #b984b6,
	0 55vh 0 #b984b6,10.5vw 55vh 0 #b984b6,21vw 55vh 0 #b984b6,31.5vw 55vh 0 #b984b6,42vw 55vh 0 #b984b6,52.5vw 55vh 0 #b984b6,63vw 55vh 0 #b984b6,73.5vw 55vh 0 #b984b6,84vw 55vh 0 #b984b6,94.5vw 55vh 0 #b984b6,105vw 55vh 0 #b984b6,
	5.5vw 66vh 0 #b984b6,16vw 66vh 0 #b984b6,26.5vw 66vh 0 #b984b6,37vw 66vh 0 #b984b6,47.5vw 66vh 0 #b984b6,58vw 66vh 0 #b984b6,68.5vw 66vh 0 #b984b6,79vw 66vh 0 #b984b6,89.5vw 66vh 0 #b984b6,100vw 66vh 0 #b984b6,
	0 77vh 0 #b984b6,10.5vw 77vh 0 #b984b6,21vw 77vh 0 #b984b6,31.5vw 77vh 0 #b984b6,42vw 77vh 0 #b984b6,52.5vw 77vh 0 #b984b6,63vw 77vh 0 #b984b6,73.5vw 77vh 0 #b984b6,84vw 77vh 0 #b984b6,94.5vw 77vh 0 #b984b6,105vw 77vh 0 #b984b6,
	5.5vw 88vh 0 #b984b6,16vw 88vh 0 #b984b6,26.5vw 88vh 0 #b984b6,37vw 88vh 0 #b984b6,47.5vw 88vh 0 #b984b6,58vw 88vh 0 #b984b6,68.5vw 88vh 0 #b984b6,79vw 88vh 0 #b984b6,89.5vw 88vh 0 #b984b6,100vw 88vh 0 #b984b6,
	0 99vh 0 #b984b6,10.5vw 99vh 0 #b984b6,21vw 99vh 0 #b984b6,31.5vw 99vh 0 #b984b6,42vw 99vh 0 #b984b6,52.5vw 99vh 0 #b984b6,63vw 99vh 0 #b984b6,73.5vw 99vh 0 #b984b6,84vw 99vh 0 #b984b6,94.5vw 99vh 0 #b984b6,105vw 99vh 0 #b984b6;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:6px;
height:6px;
background-color:transparent;
border-radius:3px;
}
::-webkit-scrollbar-thumb {
background-color:#fff;
box-shadow:2px 1px 4px #000;
border-radius:3px;
}

/* CSS MEAT */
#mugshot, #cloud {
position:fixed;
bottom:0;
}
#mugshot {
right:7.5%;
height:90%;
}
#cloud {
left:0;
height:50%;
width:100%;
}
.title {
position:absolute;
left:4%;
bottom:4%;
padding:0 5% 1% 5%;
font-size:4.45vw;
letter-spacing:0.67vw;
}
#bg {
color:transparent;
text-shadow:none;
}
.infobox {
position:fixed;
top:21%;
left:35%;
height:54%;
width:22%;
padding:1%;
opacity:0;
overflow-y:auto;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
input:checked + .infobox {
z-index:1;
left:25%;
opacity:0.9;
}
body::before {
content:"";
display:inline-block;
position:fixed;
top:5.5vh;
left:2.5vw;
height:1.4vw;
width:1.4vw;
border-radius:50%;
opacity:0.6;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
animation:24s float linear infinite;
-o-animation:24s float linear infinite;
-moz-animation:24s float linear infinite;
-webkit-animation:24s float linear infinite;
}
input {
display:none;
}
label, #musicbox {
position:fixed;
height:3.5vw;
width:3.5vw;
margin:-1.75vw;
animation:0.9s wiggle infinite;
-o-animation:0.9s wiggle infinite;
-moz-animation:0.9s wiggle infinite;
-webkit-animation:0.9s wiggle infinite;
}
#musicbox {
top:14%;
left:28%;
min-height:32px;
min-width:32px;
}
label {
cursor:pointer;
}
label:hover {
height:4vw;
width:4vw;
margin:-2vw;
}
.big {
height:4.5vw;
width:4.5vw;
margin:-2.25vw;
animation-direction:reverse;
-o-animation-direction:reverse;
-moz-animation-direction:reverse;
-webkit-animation-direction:reverse;
}
.big:hover {
height:5vw;
width:5vw;
margin:-2.5vw;
}
.link img {
height:100%;
width:100%;
}
p {
text-indent:10%;
}
@media only screen and (orientation:portrait) {
	body::after {
	content:"(Touch / hover text for easier reading)";
	font-size:11px;
	}
	#mugshot {
	height:60%;
	right:0;
	}
	.infobox {
	top:23%;
	height:auto;
	max-height:50%;
	width:98%;
	}
	.infobox:hover {
	background-color:rgba(132,97,147,0.8);
	}
	input:checked + .infobox {
	left:0;
	}
}
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://dl.dropbox.com/s/x7y1qydapdeumar/vs37-dream.css" rel="stylesheet">
<img src="https://orig00.deviantart.net/2751/f/2012/217/b/a/luka_render_by_idolprincess-d59ymtt.png" alt="" id="mugshot"/>
<img src="https://dl.dropbox.com/s/evptsca0a01o7h7/cloud-bottom-purple.png" alt="Purple cloud frame bottom." id="cloud"/>


<div class="title">Dream</div>
<div class="title" id="bg">Dream</div>

<div class="color" id="musicbox">
<audio controls controlsList="nodownload">
<source src="https://dl.dropbox.com/s/04v3kfvk4bnxlaj/Circus-P%20-%20Dream%20%28with%20Megurine%20Luka%29.mp3" type="audio/mpeg">
</audio>
</div>

<label for="01" title="Stats" style="top:20%;left:13%;"> </label>
<label for="02" class="big" title="Personality" style="top:13%;left:19%;"> </label>
<label for="03" class="big" title="History" style="bottom:6%;right:25%;"> </label>
<label for="04" title="OOC" style="bottom:10%;right:15%;"> </label>
<label for="00" class="big" style="bottom:20%;right:9%;"> </label>

<input type="radio" checked="checked" name="selection" id="00"/>
<div class="infobox color" style="animation:2s slide-in;-o-animation:2s slide-in;-moz-animation:2s slide-in;-webkit-animation:2s slide-in;">
<p style="text-indent:0;">
Living the dream...
</p>
<p style="text-align:center;text-indent:0;">
...from the outside...
</p>
<p style="text-align:right;text-indent:0;">...looking in.
</p>
</div>

<input type="radio" name="selection" id="01"/>
<div class="infobox color">
<h3>Stats</h3>
<p style="text-indent:0;">
<b>Name:</b> Stat here
<br/>
<b>Species:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Build:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
</p>
</div>

<input type="radio" name="selection" id="02"/>
<div class="infobox color" id="02">
<h3>Personality</h3>
<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>

<input type="radio" name="selection" id="03"/>
<div class="infobox color" id="03">
<h3>History</h3>
<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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>

<input type="radio" name="selection" id="04"/>
<div class="infobox color" id="04">
<h3>OOC</h3>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
<li>Bullet three</li>
<li>Bullet four</li>
<li>Bullet five</li>
<li>Bullet six</li>
<li>Bullet seven</li>
<li>Bullet eight</li>
</ul>
</div>
</div>

<a href="https://tinyurl.com/y76p2uef" target="_blank" title="VS#37">
<img src="https://dl.dropboxusercontent.com/s/m6ocjb7kbe99so7/small.png" id="credit"/>
</a>