VS#30 Unbreakable

VS#30HTS: Unbreakable

CSS

/* Last Update: 10/07/18 */

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

/* PAGE BACKGROUND AND FONT */
body {
background:#4d1319 url() fixed;
background-size:cover;
font-family:serif;
}
#lyrics {
font-family:'Ubuntu Mono',sans-serif;
}

/* MAIN DISPLAY COLORS */
.color, .nav, .infobox {
background-color:#c73037;
color:#4d1319;
box-shadow:0px 0px 15px 15px #b02328;
}
.nav:hover {
background-color:#4d1319;
box-shadow:none;
}
#lyrics span, #musicbox {
background-color:#ffffff;
color:#4d1319;
}
h2 {
color:#3b2d3d;
text-shadow:0px 0px 2px #b9bdb3,
	0px 0px 2px #b9bdb3;
}
a {
color:#b9bdb3;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:transparent;
border:2px solid #b9bdb3;
}
::-webkit-scrollbar-thumb {
background-color:#3b2d3d;
}

/* TRANSITION SPEED */
.nav, .infobox {
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

/* CSS MEAT */
#mugshot {
z-index:7;
position:fixed;
top:0;
left:0.5%;
height:100%;
}
#lyrics {
z-index:6;
position:fixed;
right:0;
text-align:right;
font-size:5vh;
line-height:6vh;
font-weight:bold;
}
#rhombus, .nav {
position:fixed;
top:50%;
left:60%;
opacity:1;
transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
#rhombus {
z-index:4;
height:49vh;
width:49vh;
margin:-24.5vh 0 0 -24.5vh;
}
.nav[href="#01"] {
z-index:1;
height:100vh;
width:100vh;
margin:-50vh 0 0 -50vh;
}
.nav[href="#02"] {
z-index:2;
height:83vh;
width:83vh;
margin:-41.5vh 0 0 -41.5vh;
}
.nav[href="#00"] {
z-index:3;
height:66vh;
width:66vh;
margin:-33vh 0 0 -33vh;
}
#musicbox, .infobox {
position:absolute;
top:50%;
left:50%;
transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
#musicbox {
z-index:5;
margin:-2.25vh 0 0 -2.25vh;
}
.infobox {
z-index:4;
height:64%;
width:66%;
padding:2%;
margin:-35% 0 0 -35%;
overflow-y:auto;
opacity:0;
text-align:center;
}
.infobox:target {
z-index:6;
opacity:1;
}
.infobox img {
width:100%;
}
#credit {
z-index:7;
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

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

<img src="http://orig14.deviantart.net/d1d3/f/2017/080/7/b/ruby_unbreakable_by_cera_nore-db34e63.png" alt="" id="mugshot"/>

<div id="lyrics" style="top:5%;">
<span>You</span> <span>try</span> <span>so</span> <span>hard</span> <span>BOY</span>
</div>
<div id="lyrics" style="top:41%;">
<span>Again</span> <span>and</span><br><span>again</span><br><span>and</span> <span>Again</span>
</div>
<div id="lyrics" style="bottom:5%;">
<span>To</span> <span>shoot</span> <span>me</span> <span>down</span> <span>BOY</span>
</div>

<div class="color" id="rhombus">

<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/qk1p54epwy/UNBREAKABLE.mp3" type="audio/mpeg">
</audio>
</div>

<div class="infobox" id="01">
<h2>Stats</h2>
<p>
<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>

<h2>OOC</h2>
<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 class="infobox" id="02">
<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="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<a class="nav" href="#00" title="Reset"></a>
<a class="nav" href="#02" title="About"></a>
<a class="nav" href="#01" title="Stats & OOC"></a>

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