End old 11/30/16

<style>

@import url(https://fonts.googleapis.com/css?family=Denk+One);

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

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


#name {position: absolute;
left: 1000px;
top: 389px;
color: #DE3A25;
font-family: 'Denk One', sans serif;
font-size: 25pt;}

#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;}

/* 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';
}


#generalcontainer{
 position: absolute;
 bottom: 20px;
 right: 80px;
 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: 1px 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: 1px 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: 1px solid black;
 opacity: 0;
}

#splitmusic2:hover #splitmusiccontent{
 height: 50px;
 width: 50px;
 border: 1px 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: 1px solid black;
 padding-right: 10px;
 overflow: auto;
 text-align: justify;
 font-family: 'Arial';
 font-size: 9pt;
 letter-spacing: 0px;
font-style: italic;
}

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

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

/* GENERAL CONTENT CONTAINER - END */

</style>

<center><div id="profile">

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

<div id="name">
The End
</div>


<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="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/sonatine" target=_blank>sonatine</a>.<br>
Music is <a target="_blank" href="https://www.youtube.com/watch?v=aDp1h_fO5nc" target=_blank>Crywolf - Slow Burn.</a>
 </div>
 </div>
 </div>
 </div>
 <div id="splitstats">
 <div id="splitselection">
 STATS
 <div id="splitstatscontent">
 <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. Recently the boy's found a woman who's taken him in, though. <a target="_blank" href="http://roleplay.chat/profile.php?user=Torie" target=_blank>Torie.</a> Of course he's fallen in love with her and it seems she's found something within him worth the same sorts of feelings. She doesn't yet know of the strangeness within him beyond a past that remains elusive to his mind and those uncanny eyes, peekers that act as a spyglass looking at the celestial bodies from some great vantage. Still, he's gained what he reluctantly considers 'control' of that frightful curse and has had no reason to show her or anyone else the queer force that acts through his mind and body. <a>End</a>... hopes that he will never be called upon to use them. Hopes to live a simple life. He is wrong on both accounts.
 </div>
 </div>
 </div>
 </div>
 <div id="splitmusic2">
 <div id="splitselection">
 SLBRN
 <div id="splitmusiccontent">
 <div id="splittopcorner">
 </div>
 <div id="splitbottomcorner">
 </div>
 <div id="musiccontent">
 <audio controls style="margin-left: -2px;" src="https://dl.dropboxusercontent.com/u/4556289/Crywolf%20-%20Slow%20Burn.mp3" loop=3>
 </audio>
 </div>
 </div>
 </div>
</div>
</div>
</div>


<div id="scrambledwords">
<div id="layerone">
I don't understand.<br>Someone explain this!<br>
WHY WAS IT ME!?<br>
Where is my family, my brother, my parents!?<br>
Who did this!? I know it was you! Will everyting just fade away?
How do I control this?
THIS CAN'T<br><br>
BE HAPP <br>Theres n<br><br>
I KNOW I DIDN'T DO IT!<br>
There just had to bescientists, I wasn't born like this, was I?
GODDAMNIT, JUST DIE!<br>
Are they looking for me now? Am I alone? FUCK IT, LET
IT ALL BURN! They can't just... take things.<br><br>
<div style="text-align: center;">... Is this the end?</font>
</div>
<div id="layerone1">
ENING!<br>
o way...
</div>
</div>
</div>




</div>


</div>
</div>


</div>