Alter

<style>

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



#whole{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: gray;
background-image:url(https://puu.sh/s733s/587a541594.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
}

#whole2{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 100%;
height: 50%;

}

#whole2back{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background-color: #3c3232;
opacity: .7;
border-top: 3px solid #da1e16;
border-bottom: 3px solid #da1e16;
}

#alterimage{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
 margin: auto;
background-image:url(http://i66.tinypic.com/alm5nk.jpg);
background-image:url(https://puu.sh/s6qDj/f171f4bcc8.png);
background-size: auto 100%;
 background-position: bottom right 40%;
background-repeat: no-repeat;}

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

#titlepiece{
position: absolute;
top: -100px;
left: -50%;
 right: 0px;
 margin: auto;
height: 200px;
width: 200px;
font-family: 'direwolf';
font-size: 120px;
letter-spacing: 20px;
color: black;
text-shadow: 2px 2px 2px #1c222c;}

#contentarea{
 position: absolute;
 top: 0px;
 left: -45%;
 right: 0px;
 bottom: 0px;
 margin: auto;
 border: 0px solid black;
 height: 300px;
 width: 300px;
 z-index: 1;
}

#backgroundfill{
 position: absolute;
 height: 100%;
 width: 100%;
 background: gray;
 -webkit-filter:blur(100px);
 border-radius: 30px 30px 30px 30px;
opacity: .7;
}

.diamonddiv{
 position: absolute;
 opacity: .9;
 -webkit-transition: all 2s;
 transition: all 2s;
 z-index: 1;
}

.diamonddiv *{
 zoom: 60%;
}

.diamonddiv:nth-child(3){
 top: 100px; left: 70px;
}
.diamonddiv:nth-child(5){
 top: 170px; left: 120px;
z-index: 2;
}
.diamonddiv:nth-child(4){
 top: 100px; left: 170px;
}
.diamonddiv:nth-child(2){
 top: 30px; left: 120px;
}

#diamond-narrow {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 70px solid black;
	position: relative;
	top: -50px;
-webkit-transition: all 1s;
transition: all 1s;
}
#diamond-narrow:after {
	content: '';
	position: absolute;
	margin: -50px; margin-top: 70px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid black;
-webkit-transition: all 1s;
transition: all 1s;
}

.diamonddiv:hover #diamond-narrow:after{
 border-top: 70px solid #8B323E;
}

.diamonddiv:hover #diamond-narrow{border-bottom: 70px solid #8B323E;}

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


#diamondlabel{
 position: fixed;
 height: 50px;
 width: 100px;
 border: 0px solid black;
 background: black;
 z-index: 1;
 opacity: .8;
 display: none;
 color: gray;
 border-radius: 5px 5px 5px 5px;
 box-sizing: border-box;
 text-align: center;
 font-size: 40pt;
 font-family: 'bodyfont';
}

.diamonddiv:nth-child(2):hover #diamondlabel,
.diamonddiv:nth-child(3):hover #diamondlabel,
.diamonddiv:nth-child(4):hover #diamondlabel{
 display: block;
}

.diamonddiv:nth-child(2) #diamondlabel{
 margin-left: 0px;
 margin-top: -180px;
}
.diamonddiv:nth-child(3) #diamondlabel{
 margin-left: -130px;
 margin-top: -75px;
}
.diamonddiv:nth-child(4) #diamondlabel{
 margin-left: 130px;
 margin-top: -75px;
}
.diamonddiv:nth-child(5) #diamondlabel{
 margin-top: -110px;
 margin-left: 110px;
}

#decisions1:target .diamonddiv,
#decisions2:target .diamonddiv,
#decisions3:target .diamonddiv{
 top: 0px;
 left: 0px;
}

.contentbox{
 position: absolute;
 left: 30px;
 top: 42px;
 height: 240px;
 width: 240px;
 border: 1px solid black;
border-radius: 0px 10px 10px 10px;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
 z-index: 0;
 overflow: hidden;
}

#decisions1:target #content1,
#decisions2:target #content2,
#decisions3:target #content3{
 opacity: 1;
 -webkit-transition: all 1s 2s;
 transition: all 1s 2s;
 z-index: 3;
}

.contentbox h1{
 position: absolute;
 left: 23px;
 top: -7px;
 text-align: right;
 font-size: 20pt;
 font-family:'direwolf';
 color: black;
letter-spacing: 3px;
}

#contentcontent{
 position: absolute;
 top: 40px;
 bottom: 2px;
 left: 10px;
 box-sizing: border-box;
 padding-right: 10px;
 overflow: auto;
 color: black;
 font-family: Arial;
 font-style: italic;
 font-size: 9pt;
 text-align: justify;
 text-justify: inter-word;
}

#decisions1:target .diamonddiv:nth-child(5):hover,
#decisions2:target .diamonddiv:nth-child(5):hover,
#decisions3:target .diamonddiv:nth-child(5):hover{
webkit-transition: all .5s, left 2s, top 2s;
transition: all .5s, left 2s, top 2s;
z-index: 5;}


#decisions1:target #diamondlabel,
#decisions2:target #diamondlabel,
#decisions3:target #diamondlabel{
 opacity: 1;
}

#decisions1:target .diamonddiv:nth-child(5):hover #diamondlabel,
#decisions2:target .diamonddiv:nth-child(5):hover #diamondlabel,
#decisions3:target .diamonddiv:nth-child(5):hover #diamondlabel{
 display: block;
}


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

#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(https://puu.sh/s6UGn/19d49db94c.png);
background-size: auto 90%;
background-repeat: no-repeat;
background-position: center;
}

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

#contentcontent a{
text-decoration: none;
font-weight: 600;
color: black;}

/* STAT SECTION THING */

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/Heartbeat%20Synchronicity.ttf);
 font-family:'contentfont';
}


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



#statholder{
 height: 14px;
 width: 200px;
 border: 1px solid black;
 background: #737373;
 overflow: hidden;
 margin-bottom: 1px;
position: relative;
margin-top: 3px;
margin-left: 15px;
border-radius: 3px 3px 3px 3px;
 }

#statholder:nth-child(2){
margin-top: 50px;}

#statfirst{position: absolute;
height: 14px;
width: 100%;
 margin-left: 0%;
 text-align: center;
 font-family:'free agent', arial;
font-size: 10pt; color: black;
font-style: normal; text-decoration: none;
 box-sizing: border-box;
 padding-top: 0px;
-webkit-transition: all 1s;
transition: all 1s;}

#statsecond{position: absolute;
height: 14px;
width: 100%;
margin-left: 100%;
 text-align: center;
 font-family: 'contentfont', arial;
font-size: 10pt; font-style: normal;
text-decoration: none; color: black;
font-style: italic;
 box-sizing: border-box;
 padding-top: 0px;
 -webkit-transition: all 1s;
 -webkit-transition: all 1s;
z-index: 1;
}

#statholder:hover #statsecond{
 margin-left: 0%;
}

#statholder:hover #statfirst{
opacity: 0;
}

#statsecond.linker {
color: white;}


/* STAT SECTION THING -- END */

</style>

<div id="decisions1">
 <div id="decisions2">
 <div id="decisions3">

<div id="whole">
<div id="whole2">
<div id="alterimage">
</div>
<div id="titlepiece">
ALTER
</div>
 <div id="contentarea">
 <div id="backgroundfill">
 </div>

 <a href="#decisions1" class="diamonddiv">
 <div id="diamond-narrow">
 </div>
 <div id="diamondlabel">stats
 </div>
 </a>

 <a href="#decisions2" class="diamonddiv">
 <div id="diamond-narrow">
 </div>
 <div id="diamondlabel">
 info
 </div>
 </a>

 <a href="#decisions3" class="diamonddiv">
 <div id="diamond-narrow">
 </div>
 <div id="diamondlabel">
 ooc
 </div>
 </a>

 <a href="#none" class="diamonddiv">
 <div id="diamond-narrow">
 </div>
 <div id="diamondlabel">
 reset
 </div>
 </a>

 <div class="contentbox" id="content1"> <h1>Stats and Abilities.</h1>

<div id="statholder">
<div id="statfirst">
ALIAS
</div>
<div id="statsecond">
Alter, Altered, Alternate.
</div>
</div>

<div id="statholder">
<div id="statfirst">
AGE
</div>
<div id="statsecond">
N/A.
</div>
</div>

<div id="statholder">
<div id="statfirst">
HEIGHT
</div>
<div id="statsecond">
6'1".
</div>
</div>

<div id="statholder">
<div id="statfirst">
BUILD
</div>
<div id="statsecond">
Average/Athletic.
</div>
</div>

<div id="statholder">
<div id="statfirst">
SEX/GENDER
</div>
<div id="statsecond">
Male / Male pronouns.
</div>
</div>

<div id="statholder">
<div id="statfirst">
ORIENTATION
</div>
<div id="statsecond">
Pansexual.
</div>
</div>

<div id="statholder">
<div id="statfirst">
SPECIES
</div>
<div id="statsecond">
Snekku (demon-hybrid).
</div>
</div>

<div id="statholder">
<div id="statfirst">
ORIGIN
</div>
<div id="statsecond">
Alternate-timeline variant.
</div>
</div>

<div id="statholder">
<div id="statfirst">
OCCUPATION
</div>
<div id="statsecond">
Assassin. / 'Exorcist.'
</div>
</div>

 </div>

<div class="contentbox" id="content2"> <h1>Information.</h1>
 <div id="contentcontent">
<b>Alter</b>, just short for <i>Alternate</i>, is a multiverse quantum-calculated variation on the known demonologist and devil catcher that goes by the name of <a target="_blank" href="http://roleplay.chat/profile.php?user=Arc" target=_blank>Arc Arsenal</a>. For all intents and purposes, his existence is something like a fluke. Arc, in the midst of his experimentation on himself using the souls of slave-driven devil abilities, has often experimented with the laws of causality -- the very foundations of 'cause & effect'. In the midst of this and unbeknownst to the scientist, the subjects of his experiment looked into Arc's own multitudinous variants that extended through the multiverse in its infinite probabilities and latched to a thread in which the scientist came through the same transformations but through a very different process. While in that world, the results would quickly lead the 'Alternate Arc' to die shortly after his fusion into a demon, these powers were capable of connecting that meager thread farther into theoretical realms... the result of which was pulling enough data from <i>potential</i> outcomes that the resulting corporealization of the '<b>Alter</b>' came complete with memories forged from various different bodies and persons.<br><br>
An interdimensional homunculus incredibly unaware of his origin, <b>Alter</b>'s existence in this world is a seamless one from his own perspective. The differences in his life have led to a style of living closer to that of 'Dante' from Devil May Cry, as he devours demons and devils to sustain himself and increase his abilities. Due to the more practical uses for his own prerogatives, <b>Alter</b> offers his services to the highest bidder as an assassin of hell-crafted creatures. In the meantime, he simply <i>lives</i> without any concerns about where this will take him or what the eventual end of the road may look like.
 </div>
 </div>

<div class="contentbox" id="content3"> <h1>OOC.</h1>
 <div id="contentcontent">

Character and art are owned by me.<br>
Artist is <a target="_blank" href="http://furaffinity.net/user=MagicalZombie" target=_blank>MagicalZombie</a>.<br>
Design is <a target="_blank" href="http://furaffinity.net/user=NitricAcid" target=_blank>NitricAcid</a>'s.<br>
Snekku race is owned by <a target="_blank" href="http://furaffinity.net/user=Teil" target=_blank>Teil</a>.<br>
Code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a>.<br>
Music track is <a target="_blank" href="https://youtu.be/Ujvz6NIWExw" target=_blank>三浦大知 / (RE)PLAY</a>.
 </div>
 </div>


 </div>
<div id="whole2back">
</div>

</div>
</div>


<div id="musicslice" title="daichi miura / (RE)PLAY">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="https://puu.sh/s6UnQ/5ab089bbf9.mp3" loop=3></audio>
</div>
</div>


</div></div></div></div>