Soma

<style>

body{
 overflow: hidden;
 background: #2b0303;
background-color: #100a0a;
 background-image:url(http://i.imgur.com/sH8hzKn.png);
 background-repeat: no-repeat;
 background-size: 100% auto;
}

#whole{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 overflow: hidden;
 background-image:url(http://i.imgur.com/6cyy5hJ.png);
 background-repeat: no-repeat;
 background-size: auto 85%;
 background-position: bottom left;
-webkit-filter:drop-shadow(-10px 10px 5px black);
filter:drop-shadow(-10px 10px 5px black);
}

body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-7/oth684.cur), progress !important;}

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


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

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

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

#restofprofile{
 position: absolute;
 left: 30%;
 top: 0px;
 bottom: 0px;
 right: 0px;
}

#titlediv{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 20%;
 margin: auto;
 height: 350px;
 width: 560px;
 font-family:'titlefont';
 font-size: 200pt;
 color: #2b0303;
 letter-spacing: 3px;
 text-shadow: 1px 1px 10px black;
 border: 0px solid white;
text-align: center;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 1s;
}

#titlediv:active{
-webkit-transition: all 0s;
transition: all 0s;
text-shadow: 1px 1px 3px red;}

#titlediv:before{
content: 'Seventh Hunter';
position: absolute;
 bottom: 45px;
 left: 95px;
font-family: 'titlefont';
font-size: 30pt;
color: black;
text-shadow: 0px 0px 3px red;
opacity: .6;
text-align: center;
z-index: 1;
-webkit-transition: all 1s;
transition: all 1s;}

#titlediv:hover:before{
opacity: .9;
}

#audiodiv{
position: absolute;
zoom: 1900%;
width: 31px;
overflow: hidden;
top: 0px;
left: 0px;
opacity: 0;
}


#factscontainer{
position: absolute;
bottom: 25%;
left: 0px;
right: 0px;
margin: auto;
border: 0px solid gray;
height: 50px;
width: 550px;
opacity: 0;
 -webkit-transition: all 0s 99999s;
 transition: all 0s 99999s;
}

#titlediv:active ~ #factscontainer{
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
opacity: 1;}

#divspread{
position: absolute;
width: 550px;
height: 50px;
top: 0px;
left: 0px;
opacity: 1;
border: 0px solid red;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

#titlediv:active ~ #factscontainer #divspread{
-webkit-transition: all 0s;
transition: all 0s;
top: 100%;
opacity: 0;}

.divlinks{
position: absolute;
top: 0px;
height: 30px;
width: 145px;
border: 0px solid white;
font-size: 30pt;
letter-spacing: 3px;
font-family:'linkfont';
color: black;
font-weight: 800;
text-shadow: 0px 0px 7px red;
opacity: .7;
text-decoration: none;
font-style: italic;
-webkit-transition: all 1s;
transition: all 1s;}

.divlinks:nth-child(4){
left: 0px;}

.divlinks:nth-child(5){
left: 200px;}

.divlinks:nth-child(6){
left: 400px;}

.divlinks:hover{
-webkit-transition: all 1s;
transition: all 1s;
text-shadow: 1px 1px 4px black;
color: red;
opacity: .4;}

#contentbox{
position: fixed;
margin-top: 60px;
margin-left: 0px;
height: 100px;
width: 500px;
overflow: hidden;
border-radius: 5px 5px 5px 5px;
border-left: 3px solid #800202;
border-right: 3px solid #800202;
opacity: 0;
-webkit-transition: all 1s;
transition: all 0s;}

#contentbox:before{
content:'';
position: absolute;
top: 0px;
left: 6px;
right: 6px;
bottom: 0px;
background: black;
opacity: .7;
border-radius: 6px 6px 6px 6px;
}

.contentcontent{
position: absolute;
top: 0px;
left: 6px;
right: 6px;
bottom: 3px;
overflow: auto;
font-family: 'linkfont', 'Times';
font-size: 12pt;
font-style: italic;
color: gray;
text-shadow: 0px 0px 3px #800202;
overflow: auto;
text-align: justify;
z-index: 0;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
box-sizing: border-box;
padding: 5px;
padding-right: 7px;
letter-spacing: 2px;
line-height: 19px;
font-weight: 600;}

.contentcontent a{
color: #b3b3b3;
text-decoration: none;
font-weight: 800;
-webkit-transition: all 1s;
transition: all 1s;}

.contentcontent a:hover{
color: #800202;}

#firstie:target ~ #firstlink,
#secondie:target ~ #secondlink,
#thirdie:target ~ #thirdlink{
-webkit-transition: all 1s;
text-shadow: 1px 1px 4px black;
color: white;
opacity: .4;
}

#firstie:target ~ #contentbox,
#secondie:target ~ #contentbox,
#thirdie:target ~ #contentbox{
-webkit-transition: all 1s;
transition: all 1s;
opacity: 1;}

#firstie:target ~ #contentbox #firstdiv,
#secondie:target ~ #contentbox #seconddiv,
#thirdie:target ~ #contentbox #thirddiv{
-webkit-transition: all 1s .6s;
transition: all 1s .6s;
opacity: 1;
z-index: 1;}


</style>

<div id="whole">

 <div id="restofprofile">

 <div id="titlediv">
SOMA
 <div id="audiodiv"><audio controls src="http://k003.kiwi6.com/hotlink/v68dopiaho/Telepathic_Teddy_Bear_-_The_Bleeding_of_Mercy_The_Course_Of_Empire_.mp3" title="clicking this will introduce the content area and start background music" loop=3>
</audio></div>
 </div>


 <div id="factscontainer">

 <div id="divspread">

 <div id="firstie">
 </div>
 <div id="secondie">
 </div>
 <div id="thirdie">
 </div>

 <a class="divlinks" href="#firstie" id="firstlink">
Basics
</a>

 <a class="divlinks" href="#secondie" id="secondlink">
Tribe
</a>

 <a class="divlinks" href="#thirdie" id="thirdlink">
OOC
</a>

 <div id="contentbox">

 <div class="contentcontent" id="firstdiv">
 Soma is a male sergal, approximately six feet and six inches tall with a medium but muscular build. Currently he claims the Seventh Circle as his tribe, though this was not always the case.
 <br><br> While in his early 40's, Soma is the second-oldest member of his hunting party - but has only been with this tribe and the hunters for ten years, having originally been given over as a slave exchanged to pay a tribal debt.
 <br><br> Sexually, his raising has given to him a healthy appetite without views that emphasize monogamy or discretion based on gender... Though this will always come second to the duties he holds within his tribe or his other personal hobbies,
 which include educating himself on the world outside and honing his skills to stay at the top of his craft as he grows older.

 </div>

 <div class="contentcontent" id="seconddiv">
 A hunter for his tribe, most of Soma's days are filled with small duties here and there or assisting in the training of younger hunters. Hunting itself is rarely done as the tribe sends out its hunting party to range westward or eastward only three times
 a year, bringing their bounty back with them in amounts large enough to last over the course of a season.
 <br><br> Their methods for gaining materials that might edge into the lands of other tribes involve various meetings for trade, most of which are held in their own village. Only once per year do they send out their hunting party to trade at
 a larger gathering that involves the larger tribes and occasionally outsiders as well, taking along with them one village elder and one other representative of the tribe.<br><br> Other than these times, Soma's tribe is self-sufficient and
 rarely wander outside of their own lands.
 <br><br> The Seventh Circle is one of ten tribes that litter the landscape of the areas known to outsiders as the Western Forests. These same lands occupy a different name when whispered by men to warn their children off from wandering into
 this region, "The Grim Keep." An outlandish name, it nonetheless helps to describe both the viewed outskirts of the forests - a line of thick trees so tightly packed together that only very specific paths allow entry into its depths - and
 the function of those tribes that live within it.
 <br><br> The ten tribes that live within these lands also serve to keep the sometimes uncanny creatures that share this space from escaping into the other territories where the towns would be quickly overwhelmed. The reason for the appearance
 of these creatures is largely unknown except, as it is told, by the shamans of each tribe.

 </div>

 <div class="contentcontent" id="thirddiv">
 Coding is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>my own</a>. Please don't take it.<br> If you have any issues with the code or color combination,<br> (there's a lot of red) please contact me.<br><br> Character artist is <a target="_blank" href="http://furaffinity.net/user/ranaohara" target=_blank>Ranaohara</a>.<br> Art is owned by me.<br> Music
 used is by <a target="_blank" href="https://www.youtube.com/watch?v=COUswSlLwxE" target=_blank>Telepathic Teddy Bear</a>.
 </div>

 </div>

 </div>
 </div>

 </div>

</div>