gil

<style>
@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One|Monoton|Work+Sans:900');
@import url('https://fonts.googleapis.com/css?family=Aleo|Gravitas+One|Playfair+Display+SC');

.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:   #2D020A;
}

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


#picture{background-image:url(https://i.imgur.com/QTbivsB.jpg); background-position:top; background-repeat:no-repeat; width:600px; height:610px; position:fixed; left:400px; top:60px; background-size:77%; }


#picture:hover #hana {
position: absolute;
top:-3px;
left:67px;
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;
top:-54px;
bottom:0px;
left:67px;
height:594px;
width:444px;
opacity: 0;
background-color:   #2D020A;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
 color:#DBB86A;
text-align:justify;
padding:10px;
font-family:arial;
font-size:9px;
}

#title{background-color:transparent; color:#DBB86A;
height:40px; font-family: 'Gravitas One', cursive;
 font-weight:1000; font-size:40px;
width:650px; position:fixed;
bottom:5px;
left:440px;
opacity:0;
letter-spacing:4px;
transition-delay: 500s;
-moz-transition-delay: 500s;
-webkit-transition-delay: 500s;
-o-transition-delay:500s;}

body:hover #title{background-color:transparent;
height:40px; font-weight:1000; font-size:40px;
width:650px; position:fixed;
bottom:5px;
left:440px;
letter-spacing:4px;
opacity:1; -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 transition: all 1s linear;transition-delay: 2.5s;}


a
{text-decoration:none;
color:#DBB86A;
-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;
}

a:hover
{text-decoration:none;
color:#3a020d;}

#linea {background-color:#3a020d;
position:fixed; top:0px; left:400px;
 height:40px; width:0px;
 -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear;transition-delay: 500s;
-moz-transition-delay: 500s;
-webkit-transition-delay: 500s;
-o-transition-delay:500s;  z-index:-99; }
body:hover #linea {
position:fixed; top:0px; left:400px;
height:40px; width:45%;
 -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; z-index:-99; }

#lineb {background-color:#3a020d;
 position:fixed; top:10px; left:400px;
height:0px; width:40px;
-webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear;transition-delay: 500s;
-moz-transition-delay: 500s;
-webkit-transition-delay: 500s;
-o-transition-delay:500s;  z-index:-99; }
body:hover #lineb{
 position:fixed; top:20px; left:400px;
height:95%; width:40px;
-webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; z-index:-99; }

#linec {background-color:#3a020d;
position:fixed; top:10px; right:400px;
height:0px; width:40px;
-webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear;transition-delay: 500s;
-moz-transition-delay: 500s;
-webkit-transition-delay: 500s;
-o-transition-delay:500s;  z-index:-99; }
body:hover #linec{
position:fixed; top:10px; right:400px;
 height:95%; width:40px;
-webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; z-index:-99; }

#lined {background-color:#3a020d;
position:fixed; bottom:0px; right:400px;
height:40px; width:0px;
 -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear;transition-delay: 500s;
-moz-transition-delay: 500s;
-webkit-transition-delay: 500s;
-o-transition-delay:500s;  z-index:-99; }
body:hover #lined{
position:fixed; bottom:0px; right:400px;
 height:40px; width:45%;
 -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; z-index:-99; }

#personality
{
background-color:#FCDADB;
background-image:url(http://i.picpar.com/vFKc.png);
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;
width:580px;
padding:10px;
height:70px;
top:10px;
margin-left:10px;
font-size:9px;
}


 #nav { position:fixed;
background-color:transparent;
height:60px;
width:200px;
background-color:transparent;
top:-1px;
 right:360px;

}

#nav a{ width:5px; height:38px; float:right; display:inline; float:right;
margin:2px; padding:0px;
background-color:#DBB86A;
}

#nav a:hover {width:5px; height:38px; margin:2px; padding:0px; float:right; background-color:   #2D020A;
-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}

 #nav2 { position:fixed;
background-color:transparent;
height:60px;
width:200px;
background-color:transparent;
bottom:-18px;
left:180px;
 }

#nav2 a{ width:5px; height:38px; float:right; display:inline; float:right;
margin:2px; padding:0px;
background-color:#DBB86A;
}

#nav2 a:hover {width:5px; height:38px; margin:2px; padding:0px; float:right; background-color:   #2D020A;
-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }


 #page {
width:450px;
text-align: justify;
height:500px;
overflow: hidden;
background: transparent;
font-size:8pt;
}

.page{
width:440px;
height:500px;
text-align: justify;
overflow: auto;
background:transparent;
padding:6px; }

table {
width:440px;
height:400px;
margin-left:0px;
border-collapse:separate;
font-family: 'Work Sans', sans-serif;
color:#DBB86A;
font-weight:900;
font-size:14px;
letter-spacing: 1px;

padding:0px;}

td {
    padding: 0px;
}
#left{height:0px; text-align: left; }

#right {height:0px; text-align: right;}

 </style>
<div id="linea"></div>
<div id="lineb"></div>
<div id="linec"></div>
<div id="lined"></div>


<div id="nav">
<a href="#1" title="stats." id="links"></a>
<a href="#2" title="summary." id="links"></a>
<a href="#3" title="abilties." id="links"></a>
</div>

 <div id="nav2">
<a href="#4" title="stats." id="links"></a>
<a href="#5" title="summary." id="links"></a>
<a href="#6" title="abilties." id="links"></a>
</div>


<div id="picture"><div id="hana">
<div id="page"><a name="1"></a>
<div class="page">
<h1>STORY</h1>
<p>Phasellus a tortor volutpat, scelerisque arcu sed, volutpat mauris. Sed placerat ex non odio iaculis, sed suscipit dolor condimentum. Sed varius a leo eu tincidunt. Sed pharetra massa dui, at vehicula leo mollis quis. Praesent urna ante, dignissim in dictum ut, iaculis ac risus. Donec suscipit ligula vel tincidunt pharetra. Integer at placerat justo. Curabitur fermentum bibendum velit ut pellentesque. Etiam in magna finibus, maximus ante sed, imperdiet ante.</p>

<p>Suspendisse eu consectetur velit. Donec cursus efficitur sapien in pretium. Donec consequat turpis sed odio suscipit venenatis. Morbi eros ex, vulputate eget turpis vel, pretium gravida leo. Fusce ornare blandit nibh eget scelerisque. Maecenas elementum, purus quis facilisis convallis, arcu est dapibus ante, ut posuere mauris libero vitae massa. Phasellus purus purus, luctus et tortor et, lobortis mattis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus lorem sem, non feugiat ipsum rutrum non. Fusce vulputate in velit nec sollicitudin. In hac habitasse platea dictumst. Vestibulum lobortis auctor ante vel fringilla. Sed suscipit metus ut dapibus tempus. Sed vel facilisis velit, non auctor ipsum.</p>
</div>
<div id="page"><a name="2"></a>
<div class="page">

<table>
<tr><td id="left">NAME</td> <td id="right">SHIMIZU EIRI</td></tr>
<tr><td id="left">SPECIES</td> <td id="right">QUIRKED HUMAN</td></tr>
<tr><td id="left">GENDER</td> <td id="right">FEMALE</td></tr>
<tr><td id="left">AGE</td> <td id="right">16</td></tr>
<tr><td id="left">HEIGHT</td> <td id="right">154CM</td></tr>
<tr><td id="left">WEIGHT</td> <td id="right">54KG</td></tr>
<tr><td id="left">HERO ALIAS</td> <td id="right">MAGNEIRI</td></tr>
<tr><td id="left">OCCUPATION</td> <td id="right">STUDENT & PART-TIMER</td></tr>
<tr><td id="left">APPEARANCE</td> <td id="right"><a target="_blank" href="https://imgur.com/a/O3ZEayi">REFERENCE</a></td></tr>
<tr><td id="left">ORIENTATION</td> <td id="right">BISEXUAL</td></tr>
<tr><td id="left">MARITAL STATUS</td> <td id="right">SINGLE</td></tr>
<tr><td id="left">AFFILIATION</td> <td id="right">YUEEI ACADEMY</td></tr>
<tr><td id="left">QUIRK</td> <td id="right">MAGNETOKINESIS</td></tr>
<tr><td id="left">HEALTH</td> <td id="right">GOOD / RECOVERING INJURY: LEFT ARM</td></tr>
</table>
</div>
<div id="page"><a name="3"></a>
<div class="page">
fjvgfdidfr

</div>

<div id="page"><a name="4"></a>
<div class="page">
booty

</div>
<div id="page"><a name="5"></a>
<div class="page">
hole

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

a
 </div>
<div id="title">KING OF HEROES</div>