VS#16 2D Dream Fever

VS#16ANC: 2D Dream Fever

CSS

/* Last Update: 02/04/19 */

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

/* PAGE BACKGROUND AND FONT */
body {
background:#000 url(http://vignette1.wikia.nocookie.net/vocaloid/images/2/26/Nijigen_dream_fever_f_2nd_loading_screen.jpg/revision/latest?cb=20150921034951) no-repeat fixed;
background-size:cover;
font-family:Audiowide, sans-serif;
text-align:center;
}

/* MAIN DISPLAY COLORS */
.expanding-box, .expanding-box label {
box-shadow:0 0 1px 1px #ffd700,
	0 0 1px 1px inset #ffd700;
}
.expanding-box {
border:0.6vw solid #ffd700;
}
.expanding-box, .unit {
color:#ffd700;
text-shadow:0 0 5px #ffd700;
}
.expanding-box label {
border-right:0.6vw solid #ffd700;
background:repeating-linear-gradient(-45deg,transparent 0,transparent 3%,#ffd700 4%,#ffd700 9%,transparent 10%);
background:-o-repeating-linear-gradient(-45deg,transparent 0,transparent 3%,#ffd700 4%,#ffd700 9%,transparent 10%);
background:-moz-repeating-linear-gradient(-45deg,transparent 0,transparent 3%,#ffd700 4%,#ffd700 9%,transparent 10%);
background:-webkit-repeating-linear-gradient(-45deg,transparent 0,transparent 3%,#ffd700 4%,#ffd700 9%,transparent 10%);
text-shadow:0 0 5px #ffd700,
	0 0 10px #000;
}
.container, .unit *, #title {
background-color:#000;
}
#title, .left .inner, .right .inner {
background-color:#000;
color:#ff8c00;
text-shadow:0 0 5px #ff9c08;
}
.left .inner, .right .inner, .circle {
border-color:#ff9c08;
}
.left::before, .right::before {
background-color:#ff9c08;
}
.center .inner {
background-color:#ff9c08;
color:#000;
text-shadow:0 0 5px #000;
}
.circle {
background:radial-gradient(transparent 59%,#ff9c08 62%,transparent 65%);
background:-o-radial-gradient(transparent 59%,#ff9c08 62%,transparent 65%);
background:-moz-radial-gradient(transparent 59%,#ff9c08 62%,transparent 65%);
background:-webkit-radial-gradient(transparent 59%,#ff9c08 62%,transparent 65%);
}
.circle, h1 {
filter:drop-shadow(0 0 3px #ff9c08);
-webkit-filter:drop-shadow(0 0 3px #ff9c08);
}
h1 {
border-bottom:1px solid #ff9c08;
text-shadow:none;
}
a {
color:#f00;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
}
.expanding-box ::-webkit-scrollbar-thumb {
background-color:#ffd700;
box-shadow:0 0 5px #ffd700;
}
.center ::-webkit-scrollbar-thumb {
background-color:#000;
box-shadow:0 0 5px #000;
}
::-webkit-scrollbar-thumb {
background-color:#ff9c08;
box-shadow:0 0 5px #ff9c08;
}

/* TRANSITION SPEED */
.expanding-box, .unit,
.circle, .circle img, .unit > * {
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

/* CSS MEAT */
input {
display:none;
}
.expanding-box {
z-index:5;
top:1%;
left:1.5%;
bottom:53%;
overflow:hidden;
opacity:0.9;
}
.expanding-box, .expanding-box label {
position:absolute;
width:8vw;
}
.expanding-box label {
z-index:2;
top:0;
left:0;
height:100%;
cursor:pointer;
}
input:checked + .expanding-box {
width:83.5vw;
}
.expanding-box label h2 {
position:absolute;
top:50%;
font-size:3vw;
line-height:8vw;
transform-origin:0 0;
-o-transform-origin:0 0;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform:rotateZ(-90deg) translateX(-50%);
-o-transform:rotateZ(-90deg) translateX(-50%);
-moz-transform:rotateZ(-90deg) translateX(-50%);
-webkit-transform:rotateZ(-90deg) translateX(-50%);
}
.container {
z-index:1;
position:absolute;
top:0;
bottom:0;
left:8.6vw;
width:73vw;
padding:1vh 1vw;
overflow-x:auto;
white-space:nowrap;
}
.unit {
display:inline-block;
position:relative;
height:100%;
font-size:12px;
white-space:normal;
vertical-align:middle;
opacity:0;
}
input:checked + .expanding-box .unit {
opacity:1;
}
.unit img {
z-index:1;
}
.unit h2, .unit div {
z-index:2;
position:absolute;
left:0;
right:0;
opacity:0;
overflow-x:hidden;
}
.unit:hover h2, .unit:hover div {
opacity:0.9;
}
.unit h2 {
top:32%;
height:auto;
margin-top:-12px;
overflow:visible;
}
.unit div {
top:50%;
bottom:0;
padding:4%;
overflow-y:auto;
}
#title {
z-index:1;
position:fixed;
top:49%;
left:0;
width:100%;
font-size:7vmin;
opacity:0.9;
}
#musicbox {
position:relative;
top:50%;
margin-top:-2.25vh;
}
.infobox {
z-index:3;
position:fixed;
bottom:1%;
height:40%;
width:30%;
overflow:hidden;
opacity:0.9;
}
.left {
left:1.5%;
}
.center {
left:50%;
margin-left:-15%;
}
.right {
right:1.5%;
}
.left::before, .right::before {
content:"";
position:absolute;
top:0;
left:0;
height:12.5%;
width:100%;
transform-origin:100% 100%;
-o-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform:skewX(-45deg);
-o-transform:skewX(-45deg);
-moz-transform:skewX(-45deg);
-webkit-transform:skewX(-45deg);
}
.inner {
position:absolute;
left:0;
right:0;
bottom:0;
background-clip:padding-box;
}
.left .inner, .right .inner {
top:12.5%;
border:2px solid;
}
.center .inner {
top:0;
padding:2%;
overflow-y:auto;
}
.infobox .inner > div {
position:absolute;
top:44%;
left:5%;
bottom:0;
width:90%;
overflow-y:auto;
}
.infobox h1 {
top:4%;
max-width:100%;
padding:3% 4%;
font-size:6vh;
text-transform:uppercase;
}
.circle {
position:fixed;
height:16vmin;
width:16vmin;
margin:-12vmin;
border-radius:50%;
border-width:4vmin;
border-style:dashed;
background-clip:padding-box;
overflow:hidden;
opacity:0.9;
}
.circle:hover {
height:32vmin;
width:32vmin;
margin:-20vmin;
}
.infobox h1, .circle img {
position:absolute;
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.circle img {
opacity:0;
}
.circle:hover img {
opacity:1;
}
#one {
z-index:6;
top:61%;
left:8%;
}
#two {
z-index:4;
top:18%;
left:23%;
}
#three {
z-index:4;
top:40%;
left:90%;
}
h1, h2 {
margin:0;
}
img {
height:100%;
}
#credit {
z-index:2;
position:fixed;
height:17px;
right:1%;
bottom:42%;
background-color:#fff;
border-radius:5px;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">

<div class="circle" id="one">
<img src="http://www.projectdiva.fr/wp-content/uploads/2014/01/2D-df.jpg" alt=""/>
</div>

<div class="circle" id="two">
<img src="http://www.projectdiva.fr/wp-content/uploads/2014/01/20140109_010.jpg" alt=""/>
</div>

<div class="circle" id="three">
<img src="https://i.ytimg.com/vi/ZkkqxXb1wHw/maxresdefault.jpg" alt=""/>
</div>


<input type="checkbox" id="expand"/>
<div class="expanding-box">
<label for="expand">
<h2>Friends</h2>
</label>
<div class="container">

<a href="" target="_blank" class="unit">
<img src="http://info.miku.sega.jp/wp-content/uploads/2016/01/49a9aca3ab139457354c68f80ee24658.jpg" alt=""/>
<h2>Megurine Luka</h2>
<div>
Words that describe things and stuff I guess
</div>
</a>

<a href="" target="_blank" class="unit">
<img src="http://all-vocaloids.ru/wp-content/uploads/2014/11/500_watchers_gift___cyber_gumi_megpoid_by_shanaa96-d5m6uej.jpg" alt=""/>
<h2>Gumi</h2>
<div>
Words that describe things and stuff I guess
</div>
</a>

<a href="" target="_blank" class="unit">
<img src="https://vignette.wikia.nocookie.net/vocaloid/images/f/fd/Sf_a2_miki_v4.jpg/revision/latest?cb=20150518150205" alt=""/>
<h2>SF-A2 Miki</h2>
<div>
Words that describe things and stuff I guess
</div>
</a>

<a href="" target="_blank" class="unit">
<img src="https://vignette.wikia.nocookie.net/vocaloid/images/5/50/IAVTC-Outfit-CyberElf.jpg/revision/latest?cb=20140523130625" alt=""/>
<h2>IA</h2>
<div>
Words that describe things and stuff I guess
</div>
</a>

<a href="" target="_blank" class="unit">
<img src="https://i.pinimg.com/originals/04/5a/63/045a635478d99410c4308524b813e682.jpg" alt=""/>
<h2>Yuzuki Yukari</h2>
<div>
Words that describe things and stuff I guess
</div>
</a>
</div></div>


<div id="title">
<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/6mab2kzyds/Two_Dimensional_Dream_Fever.mp3" type="audio/mpeg">
</audio>
</div>
Two-Dimensional Dream Fever
</div>


<div class="left infobox">
<div class="inner">
<h1>Stats</h1>
<div>
<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
</div>
</div></div>


<div class="center infobox">
<div class="inner">
<h2>About</h2>
<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="" target="_blank">Link</a>
</div></div>


<div class="right infobox">
<div class="inner">
<h1>OOC</h1>
<div>
<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>
</div>
</div></div>


<a href="http://bitly.com/2vJNCgN" target="_blank" title="VS#16">
<img src="https://i.imgur.com/xgofQyf.png" id="credit"/>
</a>