VS#04 Vampire Queen

VS#04HTS: Vampire Queen

CSS

/* Last Update: 07/18/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-image:url();
background-attachment:fixed;
background-size:cover;
background-color:#000000;
font-family:'MedievalSharp',serif;
}
h2, b, a {
font-family:'UnifrakturMaguntia';
}

/* MAIN DISPLAY COLORS */
#navbar, #mbox {
border:1px solid #ffffff;
background-color:#dc143c;
}
#navbar {
background:linear-gradient(to bottom right, #dc143c, #800080);
background:-o-linear-gradient(to bottom right, #dc143c, #800080);
background:-moz-linear-gradient(to bottom right, #dc143c, #800080);
background:-webkit-linear-gradient(to bottom right, #dc143c, #800080);
}
#mbox {
background:linear-gradient(to bottom left, #dc143c, #800080);
background:-o-linear-gradient(to bottom left, #dc143c, #800080);
background:-moz-linear-gradient(to bottom left, #dc143c, #800080);
background:-webkit-linear-gradient(to bottom left, #dc143c, #800080);
}
#statbox, #infobox {
border:1px solid #ffffff;
color:#000000;
}
#statbox {
background:radial-gradient(#00ced1,#000000);
background:-o-radial-gradient(#00ced1,#000000);
background:-moz-radial-gradient(#00ced1,#000000);
background:-webkit-radial-gradient(#00ced1,#000000);
background-color:#00ced1;
}
#infobox {
background:linear-gradient(to bottom right, #800080 25%, #483d8b, #800080 75%);
background:-o-linear-gradient(to bottom right, #800080 25%, #483d8b, #800080 75%);
background:-moz-linear-gradient(to bottom right, #800080 25%, #483d8b, #800080 75%);
background:-webkit-linear-gradient(to bottom right, #800080 25%, #483d8b, #800080 75%);
background-color:#800080;
}
#cross {
background:linear-gradient(to bottom left, transparent 25%, #483d8b, transparent 75%);
background:-o-linear-gradient(to bottom left, transparent 25%, #483d8b, transparent 75%);
background:-moz-linear-gradient(to bottom left, transparent 25%, #483d8b, transparent 75%);
background:-webkit-linear-gradient(to bottom left, transparent 25%, #483d8b, transparent 75%);
}
#navbar a, #musicbox {
background-color:#ffffff;
color:#800080;
}
#infobox a {
color:#00ced1;
}
#infobox a:hover {
color:#dc143c;
}
h2 {
color:#ffffff;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#dddddd;
border-radius:4px;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#dc143c;
border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#dc143c;
border-radius:4px;
}

/* CSS MEAT */
.mugshot {
position:fixed;
top:50%;
width:28%;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
#left {
left:0.5%;
}
#right {
right:0.5%;
}
#navbar, #navbar a, #mbox, #statbox {
border-radius:50%;
overflow:hidden;
}
#navbar, #mbox {
height:21%;
width:7%;
}
#navbar {
position:fixed;
top:2%;
left:30%;
}
#navbar a {
display:block;
position:absolute;
text-decoration:none;
font-weight:bold;
font-size:4.5vh;
}
#navbar a:first-child {
top:9%;
right:9%;
padding:10%;
}
#navbar a:last-child {
left:8%;
bottom:7.5%;
padding:8%;
}
.center {
position:absolute;
top:50%;
left:50%;
overflow-y:auto;
transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
}
#statbox .center {
max-height:80%;
width:80%;
}
#mbox {
position:fixed;
top:2%;
right:30%;
}
#statbox, #infobox {
position:fixed;
left:50%;
font-size:105%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#statbox {
top:24%;
height:20%;
width:48%;
text-align:center;
}
#statbox li {
display:inline-block;
margin:0% 1%;
}
#infobox {
bottom:2%;
height:50%;
width:52%;
border-radius:5px;
text-align:left;
}
#info {
position:absolute;
top:2.5%;
left:2.5%;
height:95%;
width:95%;
overflow:hidden;
}
.tab {
height:100%;
width:100%;
overflow:auto;
}
.tab img {
max-height:100%;
}
p {
text-indent:5%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

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

<img src="http://orig07.deviantart.net/7938/f/2016/085/c/1/vampire_queen_by_cera_nore-d9whmz7.png" class="mugshot" id="left" alt=""/>
<img src="http://orig02.deviantart.net/aca0/f/2016/085/4/9/vampire_queen_r_by_cera_nore-d9whtdw.png" class="mugshot" id="right" alt=""/>

<div id="navbar">
<a href="#01">1</a>
<a href="#02">2</a>
</div>

<div id="mbox">
<div class="center" id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/lg1ll4s104/The_Tale_Of_A_10_Year_Old_Vampire_Queen.mp3" type="audio/mpeg">
</audio>
</div>
</div>

<div id="statbox">
<div class="center">
<li><b>Name:</b> Stat here</li>
<br/>
<li><b>Species:</b> Stat here</li>
<li><b>Gender:</b> Stat here</li>
<li><b>Age:</b> Stat here</li>
<li><b>Hair:</b> Stat here</li>
<li><b>Eyes:</b> Stat here</li>
<li><b>Height:</b> Stat here</li>
<li><b>Weight:</b> Stat here</li>
<li><b>Build:</b> Stat here</li>
<li><b>Orientation:</b> Stat here</li>
</div>
</div>

<div id="infobox">
<div class="tab" id="cross">
<div id="info">

<div class="tab" id="01">
<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 class="tab" id="02">
<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>
</div>
</div>

<a href="https://tinyurl.com/fukase" target="_blank" title="VS#04">
<img src="https://i.imgur.com/vYjZ0OD.png" id="credit"/>
</a>