EIRI PROF

@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One|Monoton|Work+Sans:900');

.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:#FCDADB;
background-image:url(http://i.picpar.com/vFKc.png);
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;
}

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


#picture{background-image:url(https://i.imgur.com/mlEF426.png); background-position:top; background-repeat:no-repeat; width:694px; height:1102px; position:fixed; left:10px; top:20px; bottom:400px; background-size:85%; }

#first {background-color:transparent;  position:fixed;margin:auto; top:60px; right:300px;
width: 0;
  height: 0;
  border-left: 350px solid transparent;
  border-right:350px solid transparent;
  border-top: 500px solid rgba(99,99,99,0.10);}

#second {background-color:transparent; font-family: 'Julius Sans One', sans-serif; height:590px; width:700px; position:fixed;margin:auto; right:250px; top:60px; }


#title{background-color:transparent; height:150px; font-family: 'Monoton', cursive; font-weight:1000; font-size:50px; width:800px; letter-spacing:2px; position:fixed; color:rgba(99,99,99,0.10);
top:10px; right:220px;
opacity:0;
transition-delay: 500s;
-moz-transition-delay: 500s;
-webkit-transition-delay: 500s;
-o-transition-delay:500s;}

body:hover #title{background-color:transparent; height:150px; font-weight:1000; font-family: 'Monoton', cursive;font-size:50px; width:800px; position:fixed; color:rgba(99,99,99,0.10);
top:10px;
right:220px;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:#CCC;
-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:#ed4255;
opacity:1;}

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


 #nav { position:fixed; background-color:transparent; height:10px; width:300px; background-color:transparent;  top:135px; right:40px; }
#nav a{ width:25px; height:40px; float:right; display:inline; float:right;color:#FEC8CE;  margin:10px; padding:0px; background-color:transparent; -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;font-family: 'Monoton', cursive; font-weight:1000; font-size:50px; }

#nav a:hover {width:25px; height:40px; margin:10px; padding:0px; float:right; color:ccc; background-color:transparent;  -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;font-family: 'Monoton', cursive; font-weight:1000; font-size:50px;   }




#navi a:hover {
#ccc;
}

#page {
width:600px;
text-align: center;
height:400px;
overflow: hidden;
background: transparent;
font-size:8pt;
color:#777;
font-family: 'Work Sans', sans-serif;
}

.page{
width:590px;
height:400px;
text-align: center;
overflow: auto;
background:transparent;
padding:6px; }


table {
width:450px;
height:100px;
margin-left:70px;
border-collapse:separate;
font-family: 'Work Sans', sans-serif;
color: #777777;
font-weight:900;
font-size:10px;
letter-spacing: 1px;

padding:0px;}

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

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


.bio {
  margin-top:20px;
  margin-left:115px;
  width: 0;
  height: 0;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;

  border-top: 230px solid #FEC8CE;
}
#bio {background-color:transparent;
position:fixed;
width:280px;
height:180px;
color:#777777;
font-size:9pt;
top:210px;
right:510px;
text-align: center;
font-family: 'Work Sans', sans-serif; -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; opacity:0;
}
body:hover #bio { -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; opacity:1;}


#linea {background-color:#FEC8CE; position:fixed; top:200px; left:0px; height:50px; 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 {background-color:#FEC8CE; position:fixed; top:200px; left:0px; height:50px; width:42%; -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; z-index:-99; }

#lineb {background-color:#FEC8CE; position:fixed; top:200px; right:0px; height:50px; 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 #lineb{background-color:#FEC8CE; position:fixed; top:200px; right:0px; height:50px; width:23%; -webkit-transition: all 2.5s linear;
 -moz-transition: all 2.5s linear;
 transition: all 2.5s linear; z-index:-99; }

 <div id="linea"></div>
<div id="lineb"></div><div id="title">MAGNEIRI // METALHEAD </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>
<a href="#4" title="rules." id="links">イ</a>
<a href="#5" title="rules." id="links">リ</a>
</div>


<div id="first">
<div id="second">

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

<table>
<tr><td id="left">NAME</td> <td id="right">SHIMIZU EIRI</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">ALIAS</td> <td id="right">HUMAN</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">AFFILIATION</td> <td id="right">UA ACADEMY</td></tr>
<tr><td id="left">QUIRK</td> <td id="right">MAGNETOKINESIS</td></tr>
</table>
<div class="bio">
</div>
</div>


<div id="page"><a name="2"></a>
<div class="page">
<h1>– PRIOR TO UA ACADEMY –</h1>
Eiri has never known her father, he walked out while her mom was pregnant. At 10 years old, her
<br>mother was killed in the crossfire of a villain attack - her quirk wasn't strong enough to
<br>defend herself and Pro-Heroes were simply too late. The tragedy became her motivation to
<br> become a Pro-Hero herself: wanting to protect civilians with weaker quirks, disabilities
<br> less privileged, etc. Eiri spent the last six years in her aunt's house where she had been
<br>highly unwelcome due to the poverty they already lived in. Her mother left her a huge
<br>lump sum of savings in an account that no one, not even Eiri has the information to.
<br>This caused her family to become desperate, turning to mistreat their niece and
<br> ostracize her. Growing up in this environment for the last 6 years, and the loss of her
<br>mother made her very defensive and just angry at the World. It only became
<br>worse when she entered Ketsubutsu Academy with her cousin, Shinju. Shinju
<br> had been taught to hate Eiri her whole life and later collected a clique of
<br>students that found amusement in bullying her. Eiri let it build,
<br> choosing not to confide in any teacher of the public ridicule
<br>and shame until she blew up and hurt all of them - causing
<br> the expulsion from Ketsubutsu Academy and
<br>the new opportunity at UA.

</div>
</div>

<div id="page"><a name="3"></a><div class="page">
<h1>– MAGNETOKINESIS –</h1>
 <br>MANIPULATION OF METAL & MATTER
<br> Eiri can manipulate metal at the atomic level and make it take different forms and back
<br>to the original form. Demonstrates the ability to indirectly manipulate non-metallic
<br>objects via metal ores they may contain. They can be reshaped, levitated with the
<br> help of magnetic force fields, thrown. Setbacks: There is a radius of area that
<br>metal objects and matter that can be manipulated being 9 yards and the
<br>area shrinks depending on her health. There is also a weight limit of the metal or
<br> non-metal objects that can be lifted, at the very peak being 1 metric ton. The
<br> weight that can be lifted also varies depending on her health.
<br>
<br>MAGNETIC FORCE FIELDS
<br>Usually protects herself with a personal force field that she can
<br>quickly expand to protect large areas. Can use the force fields
<br> to hit or trap an enemy, and levitate objects but not beings.
<br>
<br>WEAKNESS
<br><i>The overuse of any of these abilities will cause paralysis
<br>over time, at worst reaching the heart and lungs.
<br>For example, the larger the magnetic force field
<br>opened or the heavier the metal object lifted
<br>will bring the user's body to become
<br> taxed until proven deadly.</i>
</div>
<div id="page"><a name="4"></a><div class="page">
<h1>– AFTER UA ACADEMY –</h1>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Denki%20Kaminari" title="kaminari denki, the first friend i made at ua.
his hair might look like a straw broom,
but at least he brushes his teeth. one time,
he made me smile. he looks the cutest
when he is playing with my kitties!
kaminari-san is very kind and i'm glad we met."><img src="http://i.picpar.com/1oLc.png" style="width:50px;"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=ALIEN+QUEEN" title="majin buu mina-chan, the friend i never
knew i needed. her energy is contagious!
without trying, mina-chan has started to
change me for the better by showing me
to give people a chance. we are pocket
camp buddies!! animal crossing 4lyf.
"><img src="http://i.picpar.com/1vLc.jpg" style="width:50px;"></a>
</div>
<div id="page"><a name="5"></a><div class="page">
<h1>– STATISTICS & TRIVIA –</h1>
<br>- Works 2 part-time jobs along with other side jobs: Animal shelter, maid cafe, karaoke room,
<br> tutoring English, housekeeping, babysitting and more. Can be found working outside
<br> of school at almost any given hour.
<br>
<br>- Ranked 1st at Ketsubutsu's Academy Entrance Exam, as well as 2nd in overall grades
<br>which fell in ranking over time due to working and distraction from external issues.
<br>
<br>- Is already a grumpy Cat Lady, has an army of strays she feeds at night.
<br>Prefers their company over other people.
<br>
<br>Cooperativeness: 2/5
<br>Intelligence: 4/5
<br>Technique: 5/5
<br>Power: 5/5
<br>Speed: 2/5


</div>

</div>

<div id="picture"></div>