Lord Taker

<style>

body{background: black;
overflow: hidden;}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/Overdose%20Sunrise.otf);
 font-family:'titlefont';
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/SANDS_OF.ttf);
 font-family:'infofont';
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/SANDS_OF.ttf);
 font-family:'bodyfont';
}

::-webkit-scrollbar {
 width: 4px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #7D6085;
}


#whole{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i67.tinypic.com/2upqlvo.jpg);
 background-repeat: no-repeat;
 background-size: 100% auto;
 background-position: bottom center;
/*  -webkit-filter:saturate(30%) contrast(120%); */
}

#centerhost{
 position: absolute;
 top: 0px;
 left: 60%;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 310px;
 width: 310px;
 border: 0px solid black;
 -webkit-transition: all 2s ease-in-out;
 transition: all 2s ease-in-out;
 overflow: hidden;
}

#takerimage{
 position: absolute;
 left: 0px;
 top: 10px;
 bottom: 10px;
 width: 300px;
 background-image:url(http://i67.tinypic.com/nnobgm.jpg);
 background-repeat: no-repeat;
 background-size: 100% auto;
 background-position: center;
 opacity: 1;
 z-index: 1;
 overflow: hidden;
 box-shadow: 0px 0px 5px 2px black;
 -webkit-transition: all 2s, opacity 1s;
 transition: all 2s, opacity 1s;
}

#blur1, #blur2, #blur3, #blur4{
 position: absolute;
 overflow: hidden;
}

#blur1{
 top: 0px;
 left: 0px;
 right: 0px;
 height: 5px;
}

#blur2{
 right: 0px;
 top: 5px;
 bottom: 0px;
 width: 5px;
}

#blur3{
 right: 5px;
 bottom: 0px;
 left: 0px;
 height: 5px;
}

#blur4{
 left: 0px;
 top: 5px;
 bottom: 5px;
 width: 5px;
}

#blur1:before,
#blur2:before,
#blur3:before,
#blur4:before{
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: black;
 -webkit-filter:blur(4px);
}

#centerhost:before{
 content:'';
 position: absolute;
 top: 10px;
 left: 10px;
 right: 0px;
 height: 5px;
 background: black;
 -webkit-filter:blur(3px);
 z-index: 0;
}

#centerhost:after{
 content:'';
 position: absolute;
 bottom: 10px;
 left: 10px;
 right: 0px;
 height: 5px;
 background: black;
 -webkit-filter:blur(3px);
 z-index: 0;
}

#bigtaker{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i66.tinypic.com/2jdqavo.jpg);
 background-repeat: no-repeat;
 background-position: bottom right;
 background-size: auto 80%;
 opacity: 0;
 z-index: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#contentarea{
 position: absolute;
 left: 312px;
 top: 15px;
 bottom: 15px;
 width: 500px;
 z-index: 0;
 border: 0px solid green;
 z-index: 3;
 -webkit-transition: all 2s;
 transition: all 2s;
 opacity: 0;
}

#headersection{
 position: absolute;
 top: 0px;
 left: 0px;
 height: 80px;
 width: 270px;
 border: 0px solid red;
 box-sizing: border-box;
 z-index: 2;
 font-size: 35pt;
 color: #FFECA3;
 font-family:'titlefont', Times, Arial;
 text-align: center;
 text-shadow: 0px 0px 10px red;
 padding-top: 20px;
 padding-left: 2px;
 font-style: italic;
 overflow: hidden;
}

#infosection{
 position: absolute;
 box-sizing: border-box;
 top: 0px;
 right: 0px;
 height: 80px;
 width: 229px;
 z-index: 2;
 font-size: 11pt;
 color: #7D6085;
 font-family:'infofont', Times, Arial;
 font-weight: 800;
 text-shadow: 0px 0px 6px;
 padding-top: 6px;
 padding-left: 3px;
 overflow: hidden;
}

#infosection:before{
 position: absolute;
 content:'';
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 z-index: -1;
 background: black;
 opacity: .7;
 border-left: 2px solid #7D6085;
 border-bottom: 2px solid #7D6085;
 border-radius: 0px 0px 0px 10px;
}

#infodivider{
 float: left;
 box-sizing: border-box;
 height: 100%;
 width: 50%;
 border: 0px solid red;
 text-align: left;
 padding-left: 3px;
}

#bodysection{
 position: absolute;
 box-sizing: border-box;
 top: 80px;
 left: 0px;
 right: 0px;
 bottom: 40px;
 overflow: auto;
border-bottom: 2px solid #7D6085;
 z-index: 2;
 font-family:'bodyfont', Times, Arial;
 font-size: 12pt;
 padding: 5px;
 padding-top: 10px;
 text-align: justify;
 color: #FFECA3;
 text-shadow: 0px 0px 3px red;
}

#oocsection{
 position: absolute;
 box-sizing: border-box;
 bottom: 0px;
 left: 0px;
 right: 0px;
 height: 40px;
 z-index: 2;
 font-size: 11pt;
 color: #7D6085;
 text-shadow: 0px 0px 6px;
 font-family:'infofont', Times, Arial;
 font-size: 11pt;
 padding-top: 8px;
 text-align: center;
}

#oocsection a{
 color: #7D6085;
 font-weight: 600;
 text-decoration: none;
 -webkit-transition: all 1s;
 transition: all 1s;
 font-style: italic;
}

#oocsection a:hover{
 text-decoration: underline;
}

#contentarea:before{
 position: absolute;
 content:'';
 z-index:0;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: black;
 opacity: .8;
}

#endcap{
 position: absolute;
 left: 820px;
 top: 15px;
 bottom: 15px;
 width: 700px;
 background-image:url(http://i65.tinypic.com/3500woy.jpg);
 background-position: center center;
 background-size: 120% auto;
 -webkit-filter:saturate(50%);
 -webkit-transition: all 2s;
 transition: all 2s;
 opacity: 0;
}

#bigquote{
position: absolute;
left: 20%;
top: 5%;
    bottom: 0px;
    height: 200px;
    width: 800px;
    margin: auto;
    color: #bdc9d5;
    font-family: 'titlefont', Times, Arial;
    text-align: center;
    text-shadow: 0px 0px 10px #25276f;
 font-style: italic;
font-size: 50pt;
-webkit-transition: all 1.3s;
transition: all 1.3s;
text-align: left;}

#bigquote i{
float: right;}

#centerhost:target{
 width: 74%;
 left: 0px;
 right: 10%;
}

#centerhost:target #takerimage{
 opacity: .9;
}

#centerhost:target #contentarea,
#centerhost:target #endcap{
 -webkit-transition: all 1s 1.5s;
 transition: all 1s 1.5s;
 opacity: 1;
}

#centerhost:target ~ #bigtaker{
 -webkit-transition: all 1s 2s;
 transition: all 1s 2s;
 opacity: 1;
 z-index: 2;
}

#centerhost:target ~ #bigquote{
opacity: 0;}

/* MUSIC SECTION */

#musicslice{
position: fixed;
top: 20px;
right: 20px;
height: 50px;
width: 50px;
border: 1px solid black;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 0s;
box-shadow: 1px 1px 3px black;
opacity: .8;
z-index: 10;
zoom: 150%;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 0px 0px 0px black;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i67.tinypic.com/531l5x.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center bottom -2px;
 background-color: #39408D;
}

#musichidden{
position: absolute;
left: -10px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}


</style>

<div id="whole"></div>

<div id="centerhost">
 <a id="takerimage" href="#centerhost">
 <div id="blur1"></div>
 <div id="blur2"></div>
 <div id="blur3"></div>
 <div id="blur4"></div>
 </a>

 <div id="contentarea">
 <div id="headersection">Lord Taker</div>
 <div id="infosection">
 <div id="infodivider">Species.<br>
 Occupation.<br>
 Height.<br>
 Build.<br>
 Sexuality.<br>
 </div>
 <div id="infodivider">Doggo Devil.<br>
 Soul Taker.<br>
 6'5".<br>
 Slender/Athletic.<br>
 Pansexual.
 </div>
 </div>
 <div id="bodysection">
 Taker, formally known as Zombie Devil Lord Taker and sometimes Tabel Tarock, has a purpose... That purpose is to entrance those who possess souls until his music simply rips that right out of them for his collection. Souls feed him power, but also increase his devil rank among the denizens of hell. For pleasure as well as play, the demonic guitar Soulstripper is always on his person, its strings tuned for indelible uses.<br><br>
 When not playing concerts that suck the life out of everyone in the area, Lord Taker residences in the graveyards of the realm. Capable of transferring captured souls into the bodies of the deceased, he loves little better than to start an Undead Rave and try out his newest songs on creatures whose ears have rotted to a point where only his voice and guitar can rip into their minds.</div>

 <div id="oocsection">
 // code is <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a> // character art is owned // <br>
 // artists are <a href="http://furaffinity.net/user/jasmae" target=_blank>jasmae</a> and <a href="http://furaffinity.net/user/magicalzombie" target=_blank>magicalzombie</a> // music is by <a href="https://youtu.be/D3G0t8PWzmU" target=_blank>jam2995</a> //
 </div>


</div>

 <div id="endcap">
 </div>

</div>

 <div id="bigtaker">
</div>

<div id="bigquote">
" Scream in harmony<br>
<i>with the Devil's Choir "</i>
</div>

<div id="musicslice" title="this is halloween meets metal">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="https://puu.sh/rZ7GF/6f220b402c.mp3" loop=3></audio>
</div>
</div>