yea

<style type="text/css">

.pfor {
display: none;
}

::-webkit-scrollbar-thumb:vertical {background-color:#00ffa6;}
::-webkit-scrollbar {height:0px;width:5px;background-color:#ffffff;}


img
{margin-bottom:-3px;}

body
{
background-color:;
background-image:url(http://i.picpar.com/czec.png);
background-size:2%;
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;
}

#profile {
background-color: transparent;
border: 0px;
}

a
{text-decoration:none;
color:#ff7300;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
opacity:1;}

a:hover
{text-decoration:none;
color:;
opacity:1;}

blockquote
{border-left:2px solid;
padding-left:5px;}

.title {letter-spacing:2;
text-align:center;
font-family:consolas;
color:#fff;
position:relative;
top:60px;
left:60px;
}

.title:a {
font-size:12pt;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

.title:hover {opacity:1;
color:#111;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#navi {
 position: absolute;
 margin-top:100px;
 right:0px;
 left:0px;
}

#navi a {
 float: left;
display: block;
 width: 10px;
 height: 5px;
 background: #fff;
 padding:2px;
transition:all 1s ease-out;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;
 margin-bottom: 5px;
}


#navi a:hover {
background-color:transparent;
}



#first {
background-color:#ccc;
background-image:url(http://i.picpar.com/dzec.png);
width:200px;
background-size:80%;
background-repeat:no-repeat;
height:240px;
position:fixed;
top:200px;
right:800px;
border:white 6px solid;
}

#first:hover #hana {
position: absolute;
bottom:10px;
left:210px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}


#hana {
position: absolute;
bottom:0px;
left:210px;
height:240px;
width:400px;
opacity: 0;
background:#fff;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#111;
text-align:justify;
padding:10px;
font-family:arial;
font-size:9px;
}

#page {
width: 300px;
text-align: justify;
height: 300px;
overflow: hidden;
background: transparent; padding: 0px;}

.page{
WIDTH: 290px; padding: 0px;
height: 300px; text-align: justify;
overflow: auto; }

h1 {font-family:arial bold;
color:#111;
font-size:15px;
text-align:left; }

#triangle
{background-color:#F7447C; height:150px; width:190px; position:absolute; top:50px; left:320px; color:fff; font-family:arial; font-size:7pt; padding:10px;}
.tri {  width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;

    border-right:10px solid #F7447C; position:absolute; left:310px; top:120px;}

 i{font-family:BELL MT;font-size:7pt;color:111;}
b{font-family:BELL MT; font-size:8pt; color:ccc;}

{font-family:baskerville;
</style>
<div id="first"><div class="title">fate
</div>
<div id="navi">
<a href="#1" title="story." id="links"></a>
<a href="#2" title="stats." id="links"></a>
<a href="#3" title="relationships." id="links"></a>
<a href="#4" title="ooc." id="links"></a>
</div>
<div id="hana">
<div id="page"><a name="1"></a>
<div class="page">
<h1>STORY</h1>
<p>it began as flecks of a dream-like world, foggy images when suzume was awake. as a child, she would tell her grandmother things about strangers in grocery stores that didn't quite make sense. "she has a baby." referring to a sole teenager that didn't look pregnant, but would be two weeks from then. whispers of jumbled numbers and letters danced around her ears during exams in middle school, she never made below a 95%. her first boyfriend would cheat on her with the most popular girl in school, but she ended up dumping him first out of fear. from okinawa to sapporo, people have either called or visited suzume in her tiny flat in shinjuku-ku, tokyo. they came for their fortunes to be accurately told, even skeptical customers turning to vouch for her and spread the name. she opened a chat site called: 運命チャットルーム, or fate chatroom which at first seemed generic enough, people only entering to ridicule yet another fake psychic. her readings were free, and her accuracy caused the word to spread. but it spread to places that were an enigma and possibly even unwanted, confusing: the yakuza.</p>
</div>

<div id="page"><a name="2"></a>
<div CLASS="page">
<h1>STATISTICS</h1>
name: yoneda suzume
<br>nicknames: yone ( rice )
<br>age: 24
<br>gender: female
<br>height: 5'4"
<br>weight: 135lb
<br>shape: out of it
<br>hair: dark brown
<br>eyes: dark brown
<br>ethnicity: japanese
<br>orientation: heterosexual
<br>occupation: part-time bank teller, full time clairvoyant/empath
<br>health: social anxiety disorder
<br>personality: reserved, intelligent, clumsy, awkward, selfless
</div></div>

<div id="page"><a name="3"></a>
<div class="page">


</div></div>


<div id="page"><a name="4"></a>
<div class="page"><h1>OUT OF CHARACTER</h1>
- <p>this profile in no way parodies or makes fun of those who truly do have or think they might have social anxiety disorder. in fact, i chose to make this character with social anxiety disorder to educate and possibly enlighten people who do not understand it or how it feels to live with it. people with social anxiety can rise, function, and succeed in society - i completely believe this.</p>
</i>
<div class="tri"></div>
<div id="triangle">
<p><i>disclaimer on playing with a psychic:</i> people hate it when others conveniently know information prior to a character conveying it to them directly. it ruins an element of surprise, and can even make one feel like they have the upper hand in a plot twist. in this case, writing with me can and will have this happen. it is literally the concept of my character, it's a given. <i>however,</i> i will always talk to you through predictions she might have to make sure you're alright with it.</div>
</div></div>
</div>