<style>

@import url('https://fonts.googleapis.com/css?family=Gayathri:700&display=swap');
@font-face {font-family: outrun; src: url('https://dl.dropboxusercontent.com/s/uj0oq3rni3j9rf8/Outrun%20future.otf?dl='); }

 body {
 background-color: #121212;
 background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png"); }

 .main {
 position: absolute;
 top: 30vh;
 left: 20vw;
 height: 60vh;
 width: 90vh;
 background: #141414;
 border: solid 4px #D32C58;}


 .image {
 position: absolute;
 bottom: 3vh;
 right: 1vw;
 height: 75vh;
 width: 79vh;
 background-image: url('https://i.imgur.com/FzKlX0a.png');
 background-size: cover;
 background-repeat: no-repeat;
 filter: drop-shadow(10px 1px #D32C58);}

 .title {
 position:absolute;
 background-image:
 url('https://i.imgur.com/1Xv3h1V.gif');
 background-size: 100%;
 background-repeat:repeat;
 background-position:center;
 background-attachment: absolute;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 top: 19vh;
 left: 20vw;
 font-family: outrun;
 font-size: 6vh;
 letter-spacing: 1px;
 filter: drop-shadow(5px 0px #D32C58);}


 .box1 {
 position: absolute;
 top: 33vh;
 left: 22vw;
 height: 30vh;
 width: 40vh;
 background: #D22C58; }


 .gif {
 position: absolute;
 top: 33vh;
 left: 43vw;
 height: 30vh;
 width: 37.5vh;
 background-image: url('https://i.imgur.com/Ad1QCcH.gif');
 background-size: cover;
 background-position: center;
 filter: grayscale(100%);
 transition: ease 1s; }
 .gif:hover {
 transition: ease 1s;
 filter: none; }


 .oocb {
 position: absolute;
 bottom: 15vh;
 left: 22vw;
 height: 18vh;
 width: 38vh;
 background: #D22C58;
 font-family: roboto, sans-serif;
 font-size: 12px;
 letter-spacing: 1px;
 line-height: 10px;
 color: #941103;
 text-shadow: 1px 1px #000;
 overflow: auto;
 padding: 10px;}

 .gif2 {
 position: absolute;
 bottom: 12vh;
 left: 43vw;
 height: 24.1vh;
 width: 37.5vh;
 background-image: url('https://i.imgur.com/V2qLe0c.gif');
 background-size: cover;
 background-position: center;
 filter: grayscale(100%);
 transition: ease 1s; }
 .gif2:hover {
 transition: ease 1s;
 filter: none; }

 a.tab:active,
a.tab:link,
a.tab:visited {
 background-color: #D22C58;
 display: inline-table;
 height: 1vh;
 text-decoration: none;
 width: 2vh;
 transform: rotate(-40deg);
 margin-left: 10px;
 -webkit-transition: all 0.4s ease-in;
 -moz-transition: all 0.4s ease-in;
 -ms-transition: all 0.4s ease-in;
 -o-transition: all 0.4s ease-in;
 transition: all 0.4s ease-in;
}

a.tab:hover {
 background-color: #gray;
}

.thetabs {
 height: 3vh;
 left: 56vh;
 position: absolute;
 text-align: center;
 top: 87vh;
 width: 150px;}

.smol {
 border: none;
 color: #fff;
 font-family: calibri;
 text-transform: none;
 letter-spacing: 0px;
 font-size: 13px;
 height: 300px;
 left: 10vh;
 opacity: 0;
 overflow: auto;
 padding: 5px;
 position: fixed;
 line-height: 14px;
 text-align: left;
 width: 235px;
 top: 300px;
 z-index: 95;
}

.smol:target {
 background-color: #D22C58;
 height: 27.7vh;
 top: 33vh;
 left: 45vh;
 opacity: 1;
 overflow: auto;
 padding: 10px;
 position: fixed;
 width: 37.6vh;
 z-index: 100; }


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

 a:active, a:link, a:visited {
color: Lightblue;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress; }


h1 { font-family: 'roboto', sans-serif;
font-size: 10px;
font-weight: 100;
color: #fff;
text-transform: none;
letter-spacing: 1px;
border-bottom: 0.5px solid black;
background: transparent;
text-align: left;
margin-right: 0px;
margin-left: 0px;
line-height: 10px;
margin-top: 1px;
padding: 5px;
}

</style>
<div class="main"></div>
<div class="title">TETSUO SHIMA</div>
<div class="image"></div>
<div class="box1"></div>
<div class="gif"></div>
<div class="oocb">♦Coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=scoob">scoob</a> leave him mail for a commission! <br>
 <br>♦Golden Rule applies. <br>
 <br>♦ OP character is OP <br>
 <br>♦️ Typist taken OOC, don't be creepy.<br>
 <br>♦️ Character is 16.<br>
 <br>♦️ Romance hella earned.<br>
 <br>♦️ Character knows very little self control.<br>
 <br>♦️ Druggy boy<br>
 <br>♦️ IC =/= OOC </div>

<div class="gif2"></div>

 <div class="thetabs">
<a href="#01" class="tab">
</a>
<a href="#02" class="tab">
</a>
<a href="#03" class="tab">
</a>

 </div>

 <div id="01" class="smol">
 <h1>STATS</h1>
 <font color="2A3A57">Name</font> <font style="float:right; font-weight: ;">Tetsuo Shima</font><br>
<font color="2A3A57">Age</font> <font style="float:right; font-weight: ;">16</font><br>
 <font color="2A3A57">Height</font> <font style="float:right; font-weight: ;">5'5"</font><br>
<font color="2A3A57">Weight</font> <font style="float:right; font-weight: ;">135 pounds</font><br>
<font color="2A3A57">Orientation</font> <font style="float:right; font-weight: ;">Demisexual</font><br><br>

<font color="2A3A57">Eye color</font> <font style="float:right; font-weight: ;">Orange</font><br>
<font color="2A3A57">Hair color</font> <font style="float:right; font-weight: ;">Black</font><br>
<font color="2A3A57">Skin tone</font> <font style="float:right; font-weight: ;">White</font><br>

<font color="2A3A57">Alias</font><font style="float:right; font-weight: ;">AKIRA</font><br>

<font color="2A3A57">Species</font> <font style="float:right; font-weight: ;">Human</font><br>
<font color="2A3A57">Allignment</font> <font style="float:right; font-weight: ;">Oho, Run</font><br>
<font color="2A3A57">Paramour</font> <font style="float:right; font-weight: ;"><a target="_blank" href="https://roleplay.chat/profile.php?user=">Nah</a></font><br>
</div>

<div id="02" class="smol">
 <h1>ABOUT</h1>
Not much is known about Tetsuo’s early life. He was apparently surrendered by his mother and brought to an orphanage sometime after Kaneda, as shown in one of the flashback sequences in the film. This is also where the flashback sequence shows Tetsuo's reliance upon Kaneda since childhood.

When he is older, he takes a liking to motorbikes and, alongside Kaneda, joins The Capsules. After a collision with the Esper Takashi, he is transferred to a military institution. Here he begins to develop latent, powerful psychic abilities on the level of Akira, the individual who had engulfed the old Tokyo in a psychic explosion years prior. As these powers expand, they bestow devastatingly destructive abilities, but also cause tremendously painful headaches. The psychic trio, fearing he may cause Akira to awaken, try and fail to kill him, which encourages Tetsuo to instead seek him out. After finding out where Akira is, he leaves the facility and goes on to rampage through the city in search of him. The military, led by Colonel Shikishima, attempts in vain to stop him, fearing the threat of another Akira-sized disaster.
</div>



<div id="03" class="smol">
 <h1>ALLIES/ENEMIES</h1>


<font color="2A3A57">---</font> <font style="float:right; font-weight: ;"><a target="_blank" href="https://roleplay.chat/profile.php?user=">---</a></font> <br>
<font color="2A3A57">--</font> <font style="float:right; font-weight: ;"><a target="_blank" href="https://roleplay.chat/profile.php?user=">---</a></font> <br>
<font color="2A3A57">--</font> <font style="float:right; font-weight: ;"><a target="_blank" href="https://roleplay.chat/profile.php?user=">---</a></font>

</div>


</div>