yog

<style>
@import url('https://fonts.googleapis.com/css?family=Averia+Serif+Libre');
body {background: linear-gradient(to right, #000, #000, #622334); overflow:auto;}
.ha {position:absolute; top:0px; right:0px; overflow:hidden}
.ha img {height:150%; opacity:0.8;}
b {color:#622334;}
.de {position:fixed; left:100px; bottom:100px; text-align:center;
font-family:times; text-transform:uppercase; color:#fff; font-size:14px; }
::-webkit-scrollbar { width: 0px; height: px; background: ;}
::-webkit-scrollbar-thumb { background-color: #FBFBFB; -webkit-border-radius: 0px; border-radius: 0px;}
#mi { position:fixed; height: 27px; bottom: 10px; width: 30px; right:10px; margin: auto; z-index:99;}
 #music1 { position:fixed; padding:2px;
-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }
 #music1:hover #music2 { opacity: 0; margin-top:-20px; z-index:-1;}
 #music1:hover #music3 { opacity: .9; margin-top:-5px; z-index:-1; }
 #music1:hover #musiclist { opacity: .9; }
 #music2 { opacity: 0.9; background-color:#000; padding:6px;
-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }
 #music3 { opacity: 0; position:fixed; background-color:#000;
background-image: url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png');
background-repeat: no-repeat; background-size: 25px; border:1px dotted #000; width:25px; height:25px; z-index:99 margin-left:0px; overflow:hidden;
-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }

</style>

<div id="mi"><div id="music1"><div id="music2">
<img src="https://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
<div id="music3"><Div style="margin-top:4px;">
<audio controls style="opacity: 0;"><source src="http://k007.kiwi6.com/hotlink/a4cbg8yyx0/Puscifer_-_The_Remedy.mp3"></audio>
</div></div></div></div>


<div class="ha">
<img src="http://i.picpar.com/wfEd.png"></div>
<div class="de">
<font style="color:#FFF; font-size:100px; font-family: TIMES; text-transform:uppercase; letter-spacing:6px;">
YOG </font><br>
<font style="line-height:23px;">
6'3 MALE | BLESSED HUMAN | WILL CANNIBALIZE YOU<br><br>

<b>Characteristics</b> CUNNING, CONTORTIONIST, BLOOD MAGIC, SHADOW MAGIC<br>
<b>Personality</b> VICIOUS, INSIDIOUS, BRUTAL, CRUEL, DECEITFUL<br>
<b>Enjoys</b> BLOOD, COWARDICE, PAIN, NIGHT, STRENGTH<br>
<b>Hates</b> FAILURE, DEFIANCE, PALADINS, "BALDY"<br>
<b>OOC</b> FUCK YOU NO OUTSIDE CONTAAAAACTTTT! CHARACTER IS A DICK, TYPIST CAN BE A DICK
</div>