End

<style>



body {
 font-family: "Ubuntu", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
 color: #999999;
 background-color: #101010;
}

#profile {
 border: 1px solid #333333;
 width: 600px;
 display: table;
 padding: .5em;
 background: #000000;
}

.pfor {display: none;}
#profile {background-color: transparent; border: 0px;}

body {
background-color: #020305;
}

#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
text-align: left;
}


#wholegif{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:
url(http://i66.tinypic.com/314xopf.jpg);
background-position: 200px bottom;
background-repeat: no-repeat;
background-size: auto 100%;
text-align: left;
}

#wholegif2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:
url(http://i.giphy.com/xJOnxUc7cQ276.gif);
background-position: 200px bottom;
background-repeat: no-repeat;
background-size: 35% 100%;
text-align: left;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
}

#wholecover{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(http://i.imgur.com/j47ujK2.png);
background-size: auto 120%;
background-position: bottom 50% center;
background-repeat: no-repeat;
background-color: transparent;}

#wholecover2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(http://i.imgur.com/XfJmHb9.png);
background-color: black;}

body:hover #wholegif2{
opacity: 1;
-webkit-transition: all 2s ease-in 1s;
transition: all 2s ease-in 1s;}


#namu {position: absolute;
top: 40%;
left: 50%;
height: 50px;
width: 200px;
margin: auto;
color: #5c496a;
font-family: 'namefont', sans serif;
font-size: 30pt;
font-weight: 800;
-webkit-transition: all 2s 2s;
transition: all 2s 2s;
opacity: 0;}

#whole:hover #namu{
-webkit-transition: all 1.6s ease-out, opacity 2s linear;
transition: all 1.6s ease-out, opacity 2s linear;
left: 70%;
opacity: 1;}

.thenamu{
opacity: .8;
-webkit-transition: all 1s .5s;
transition: all 1s .5s;}

#namu:hover .thenamu{
-webkit-transition: all .7s;
transition: all .7s;
opacity: 0;}


#scrambledwords {
 position: absolute;
 height: 400px;
 width: 400px;
 border: 0px solid white;
 left: 870px;
 top: 240px;
 overflow: hidden;
 border-radius: 180px 180px 0px 180px;
-webkit-transition: all 1s;
transition: all 1s;
 }

#layerone {
 position: absolute;
 font-family: 'Times New Roman', Times;
 font-size: 10pt;
 color: grey;
 font-style: italic;
 letter-spacing: 10px;
text-align: left;
}

#layerone1{
 box-sizing: border-box;
 padding-top: 9px;
 height: 50px;
 width:125px;
 left: 260px;
 top: 146px;
 border: 0px solid white;
 position: absolute;
 font-family: 'Times New Roman', Times;
 font-size: 10pt;
 color: grey;
 font-style: italic;
 letter-spacing: 10px;}

#theend, #theend2{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(https://puu.sh/sBa5o/35ded4b14d.png);
 background-repeat: no-repeat;
 background-size: 100% auto;
 background-position: top center;
}

#theend2{
background-image:url(https://puu.sh/sBadG/96b242a03c.png);
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;}

#whole:hover #theend2{
opacity: 1;
}

/* GENERAL CONTENT CONTAINER - START */


::-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: gray;
}


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

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


#generalcontainer{
 position: absolute;
top: 0px;
right: 100px;
 height: 45px;
 width: 100px;
 font-family:'musicfont';
 border: 0px solid gray;
}

#generalcontainer:hover ~ #scrambledwords{
opacity: 0;
}

#generalcontainersplit{
 position: absolute;
 bottom: 0px;
 right: 0px;
 height: 45px;
 width: 100px;
 border: 0px solid black;
 z-index: 1;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#generalcontainer:hover #generalcontainersplit{opacity: 1;
}

#splitinfo{
 bottom: 0px;
 right: 50px;
 position: absolute;
 height: 45px;
 width: 50px;
}

#splitmusic{
 bottom: 0px;
 right: 0px;
 position: absolute;
 height: 45px;
 width: 50px;
}

#splitooc{
 position: absolute;
 right: 100px;
 bottom: 5px;
 height: 0px;
 width: 0px;
 opacity: 0;
 display: none;
}

#splitinfo:hover ~ #splitooc, #splitooc:hover{
 right: 100px;
 bottom: 0px;
 height: 45px;
 width: 45px;
 opacity: 1;
 display: block;
}

#splitstats{
 position: absolute;
 right: 50px;
 bottom: 45px;
 height: 0px;
 width: 0px;
 opacity: 1;
 display: none;
}

#splitinfo:hover ~ #splitstats, #splitstats:hover{
 position: absolute;
 right: 50px;
 bottom: 45px;
 height: 45px;
 width: 50px;
 opacity: 1;
 display: block;
}

#splitmusic2{
 position: absolute;
 right: 0px;
 bottom: 50px;
 height: 45px;
 width: 50px;
 display: none;
 opacity: 0;
}

#splitmusic:hover ~ #splitmusic2,
#splitmusic2:hover{
 position: absolute;
 right: 0px;
 bottom: 45px;
 height: 45px;
 width: 50px;
 display: block;
 opacity: 1;
}

#splitselection{
 font-size: 22pt;
 letter-spacing: -2px;
 text-align: center;
 border-bottom: 1px dashed gray;
 color: gray;
 box-sizing: border-box;
 padding-top: 10px;
 width: 25px;
 margin: auto;
}

#splitooccontent{
 position: absolute;
 right: 45px;
 bottom: 0px;
 border: 0px solid black;
 opacity: 0;
}

#splitooc:hover #splitooccontent{
 height: 100px;
 width: 200px;
 opacity: 1;
 z-index: 1;
}

#splitstatscontent{
 position: absolute;
 height: 0px;
 width: 0px;
 right: -80px;
 bottom: 45px;
 border: 0px solid black;
 opacity: 0;
}

#splitstats:hover #splitstatscontent{
 height: 200px;
 width: 200px;
 opacity: 1;
}

#splitmusiccontent{
 position: absolute;
 bottom: 45px;
 right: -10px;
 height: 50px;
 width: 50px;
 border: 0px solid black;
 opacity: 0;
}

#splitmusic2:hover #splitmusiccontent{
 height: 50px;
 width: 50px;
 border: 0px solid black;
 opacity: 1;
}

#splittopcorner{
 position: absolute;
 top: 2px;
 left: 2px;
 border-top: 1px solid gray;
 border-left: 1px solid gray;
 height: 15px;
 width: 10px;
}

#splitbottomcorner{
 position: absolute;
 bottom: 2px;
 right: 2px;
 border-right: 1px solid gray;
 border-bottom: 1px solid gray;
 height: 10px;
 width: 15px;
}

#splitooccontent #splitbottomcorner{
 right: 20px;
 bottom: 5px;
}

#splitstatscontent #splitbottomcorner{
 right: 10px;
 bottom: 20px;
}

#splitcontentcontent{
 position: absolute;
 top: 5px;
 left: 5px;
 box-sizing: border-box;
 border: 0px solid black;
 padding-right: 10px;
 overflow: auto;
 text-align: justify;
 font-family: Arial;
 font-size: 9pt;
 letter-spacing: 0px;
font-style: italic;
 color: rgba(13, 11, 14, .9);
color: gray;
font-weight: 400;
}


#splitcontentcontent a, #splitcontentcontent a:hover{
text-decoration: none;
font-weight: 600;
color: #DE3A25;
color: #5c496a;}

#splitooccontent #splitcontentcontent{
 height: 187px;
 width: 177px;
}

#splitstatscontent #splitcontentcontent{
 height: 171px;
 width: 187px;
}

#musiccontent{
 position: absolute;
 top: 8px;
 left: 9px;
 height: 30px;
 width: 30px;
 border: 1px solid gray;
 overflow: hidden;
}

#generalX{
 position: absolute;
 right: -54px;
 bottom: 00px;
 height: 40px;
 width: 40px;
 z-index: 1;
 background-color: #392538;
 background-repeat: no-repeat;
 background-size: auto 90%;
 background-position: center center;
 background-image:url(http://i68.tinypic.com/2j60ggm.jpg);
 border-radius: 90px 90px 90px 90px;
 -webkit-animation: spinner 5s infinite linear;
 animation: spinner 5s infinite linear;
opacity: .8;
}



@-webkit-keyframes spinner{
 0%{transform:rotate(0deg);
 -webkit-transform:rotate(0deg);}
 100%{transform:rotate(360deg);
 -webkit-transform:rotate(360deg);}
}

@keyframes spinner{
 0%{transform:rotate(0deg);
 -webkit-transform:rotate(0deg);}
 100%{transform:rotate(360deg);
 -webkit-transform:rotate(360deg);}
}

#backgroundshadow1{
 position: absolute;
 background: white;
 opacity: 0;
 z-index: -1;
 height: 181px;
 width: 194px;
}

#backgroundshadow2{
 position: absolute;
 background: white;
 opacity: 0;
 z-index: -1;
 height: 99px;
 width: 183px;
}


/* GENERAL CONTENT CONTAINER - END */

</style>

<center><div id="profile">


<div id="whole">

<div id="theend">
</div>

<div id="theend2">
</div>

<div id="wholecover2">
</div>
<div id="wholecover">
</div>

<div id="namu">
<i class="thenamu">the end</i>


<div id="generalcontainer">
 <div id="generalX">
 </div>
 <div id="generalcontainersplit">
 <div id="splitmusic">
 <div id="splitselection">
 MUSIC
 </div>
 </div>
 <div id="splitinfo">
 <div id="splitselection">
 INFO
 </div>
 </div>
 <div id="splitooc">
 <div id="splitselection">
 OOC
 <div id="splitooccontent">
<div id="backgroundshadow2">
</div>
 <div id="splittopcorner">
 </div>
 <div id="splitbottomcorner">
 </div>
 <div id="splitcontentcontent" style="text-align: center; padding-top: 10px;">
I coded this myself.<br>
Not great on all resolutions.<br>
Art belongs to me.<br>
Artist is <a target="_blank" href="http://furaffinity.net/user/henmi" target=_blank>henmi</a>.<br>
Music is <a target="_blank" href="https://www.youtube.com/watch?v=B6xtM1FqNls" target=_blank>the end.</a>
 </div>
 </div>
 </div>
 </div>
 <div id="splitstats">
 <div id="splitselection">
 STATS
 <div id="splitstatscontent">
<div id="backgroundshadow1">
</div>
 <div id="splittopcorner">
 </div>
 <div id="splitbottomcorner">
 </div>
 <div id="splitcontentcontent">
<a title="This is his name.">End.</a> Average height, a little below average weight. A reserved and fairly quiet canine with rather uncanny eyes that he tends to keep concealed when possible. A lover of music of all sorts and the kind of movies that let him take in the feeling of their characters with long shots and hushed moments. The locations he's most likely to be found? Abandoned places... The places unkept and unkempt, where he can find a distant reflection of others' lives since he can find no memory of his own. The young man wanders from location to location with no clothing but the items on his body nor any devices save for the mp3 player that links to either the earbuds or headphones that he keeps with him. A hooded sweater is near-constant, never one in particular as End wears mostly just those things that have been cast aside. Some time ago, he had found a woman willing to take him in and give him shelter. <a>Torie</a>. Of course he'd fallen in love with her and it seemed she had found something within him worth mirroring his feelings. She didn't know of the strangeness that lurked within him, eyes that act as a spyglass looking through to the celestial bodies as if from some great vantage. Still, he thought he'd gained what he reluctantly considered 'control' of that frightful curse and had no reason to show her or anyone else the queer force that acts through his mind and body. Until it did. Until he lost her. Until <a>End</a> lost everything again.
 </div>
 </div>
 </div>
 </div>
 <div id="splitmusic2">
 <div id="splitselection">
 END
 <div id="splitmusiccontent">
 <div id="splittopcorner">
 </div>
 <div id="splitbottomcorner">
 </div>
 <div id="musiccontent">
 <audio controls style="margin-left: -2px;" src="http://k003.kiwi6.com/hotlink/ft5a8thg7k/Sam_Gellaitry_-_The_End_VOL.mp3" loop=3>
 </audio>
 </div>
 </div>
 </div>
</div>
</div>
</div>

</div>



</div>




</div>


</div>
</div>


</div>