LI CODE [REMASTERED]

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Fondamento|Oxanium|Macondo+Swash+Caps);

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

body {background-color:#344483;
background-image: url('https://www.transparenttextures.com/patterns/gravel.png');
background-repeat: repeat; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent; }
::-webkit-scrollbar-thumb { border-radius: 0px; background-color: transparent; }

#whole {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}


#box{position: absolute;
bottom: 25px;
left: 461px;
background-color: #212C57;
height: 431px;
width: 878px;
background-image:url('https://www.transparenttextures.com/patterns/black-twill.png');
background-position:center;
background-repeat: repeat;
border: 3.7px solid #081121;
z-index: 1;}

#fighter{
position:absolute;
bottom:29px;
left:981px;
height:430px;
width:358px;
border-radius:0%;
background-image:url('https://media.discordapp.net/attachments/387771904926154762/798366081815019530/trial.png?width=394&height=473');
background-size:100%;
background-position:top;
background-repeat: no-repeat;
border-left: 2.5px solid #081121;
z-index:5;
}

#info{position: absolute;
bottom: 143px;
left: 470px;
background-color: #0A0E1C;
background-image:url('https://www.transparenttextures.com/patterns/black-orchid.png');
background-repeat: repeat;
font-family: 'Macondo Swash Caps', cursive;
height: 307px;
width: 300px;
color:#ADB7CF;
font-size: 15px;
text-align: left;
border: 2px solid #4B6195;
z-index: 5;
}

#friends{position: absolute;
bottom: 35px;
left: 470px;
background-color: #0A0E1C;
background-image:url('https://www.transparenttextures.com/patterns/black-orchid.png');
background-repeat: repeat;
font-family: 'Macondo Swash Caps', cursive;
height: 98px;
width: 300px;
color:#ADB7CF;
font-size: 15px;
text-align: left;
border: 2px solid #4B6195;
z-index: 5;
}

#info2{position: absolute;
bottom: 274px;
left: 780px;
background-color: #0A0E1C;
background-image:url('https://www.transparenttextures.com/patterns/black-orchid.png');
background-repeat: repeat;
font-family: 'Macondo Swash Caps', cursive;
height: 177px;
width: 193px;
color:#ADB7CF;
font-size: 15px;
text-align: left;
border: 2px solid #4B6195;
z-index: 5;
}

#ooc{position: absolute;
bottom: 66px;
left: 780px;
background-color: #0A0E1C;
background-image:url('https://www.transparenttextures.com/patterns/black-orchid.png');
background-repeat: repeat;
font-family: 'Macondo Swash Caps', cursive;
height: 197px;
width: 193px;
color:#ADB7CF;
font-size: 15px;
text-align: left;
border: 2px solid #4B6195;
z-index: 5;
}

a{color:#4D66B4;
text-decoration:none;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
a:hover{ color:#5E6781;
text-decoration:none;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
i{color: #A5B5D3;}
b{color: #A88992;}
h1{color:#965D6E;margin:0px;margin-bottom:6px;margin-top:6px;font-size:17px;font-family: 'Fondamento', cursive;letter-spacing:2px;text-align:right;background-color:#112355; line-height:6px;}

#tab1{position: absolute;
bottom: 35px;
left: 784px;
background-color: #3C4A78;
width: 38px;
height: 20px;
border: 1.5px solid #081121;
z-index: 4;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
#tab1:hover {border: 1.5px solid #4B6195;
background-color: #5163A1;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}

#tab2{position: absolute;
bottom: 35px;
left: 832px;
background-color: #3C4A78;
width: 38px;
height: 20px;
border: 1.5px solid #081121;
z-index: 4;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
#tab2:hover {border: 1.5px solid #4B6195;
background-color: #5163A1;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}

#tab3{position: absolute;
bottom: 35px;
left: 880.4px;
background-color: #3C4A78;
width: 38px;
height: 20px;
border: 1.5px solid #081121;
z-index: 4;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
#tab3:hover {border: 1.5px solid #4B6195;
background-color: #5163A1;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}

#tab4{position: absolute;
bottom: 35px;
left: 929px;
background-color: #3C4A78;
width: 38px;
height: 20px;
border: 1.5px solid #081121;
z-index: 4;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
#tab4:hover {border: 1.5px solid #4B6195;
background-color: #5163A1;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}

.friend { width: 50px;
 height:32px;
opacity: 1;
 border: 2px dotted #3D527B;
border-Radius: 10%;
margin-right: 0px;
margin-top: 1px;
margin-bottom:0px;
opacity: 0.8;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
.friend:hover { opacity: 0.7;
 border: 2px dotted #6982B5;
margin-right: 0px;
margin-top: 1px;
margin-bottom:0px;
border-Radius: 100%;
-webkit-transition:opacity 0.7s linear;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;}
</style>
<div id="whole" oncontextmenu="return false;">
<div id="box"></div>
<div id="fighter"></div>
<a href="#01"><div id="tab1"></div></a>
<a href="#02"><div id="tab2"></div></a>
<a href="#03"><div id="tab3"></div></a>
<a href="#04"><div id="tab4"></div></a>

<div id="info">
<div style="height:307px;overflow-y:hidden;">
<a name="01"></a>
<div style="height:307px;overflow:auto;">
<div style="margin: 0 auto; width: 19.3em;">
<h1>Dossier</h1>
<b>Name:</b> <font style="float:right;">Fa Li-Jie</font><br>
<b>Monikers:</b> <font style="float:right;">Li</font><br>
<b>Birthday:</b> <font style="float:right;">July 30th, 1998</font><br>
<b>Gender:</b> <font style="float:right;">Male</font><br>
<b>Age:</b> <font style="float:right;">Twenty-one</font><br>
 <b>Orientation:</b> <font style="float:right;">Heterosexual</font><br>
 <b>Marital:</b> <font style="float:right;"><a target="_blank" href="https://pbs.twimg.com/media/EUtRteZXQAAiewB.jpg" target="_blank">Holding onto a memory</a></font><br>
 <b>Hair / Eyes:</b> <font style="float:right;">Black / Dark Brown</font><br>
 <b>Height / Weight:</b> <font style="float:right;">6'1'' / 163lbs</font><br>
<b>Body:</b> <font style="float:right;">Scarred; Toned</font><br>
<b>Nationality:</b> <font style="float:right;">Chinese-American</font><br>
<b>Occupation:</b> <font style="float:right;">Singer</font><br>
<b>Species:</b> <font style="float:right;">Humanoid</font><br>
<b>Classifaction:</b> <font style="float:right;">Kinmoku</font><br>
<b>Location:</b> <font style="float:right;">Crystia City, California</font><br>
<b>Affilation:</b> <font style="float:right;">His Queen; Starlights</font><br>
<b>Alignment:</b> <font style="float:right;">Chaotic Good</font>
</div></div>

<a name="02"></a>
<div style="height:307px;overflow:auto;">
<div style="margin: 0 auto; width: 19.3em;">
<h1>Alter Ego</h1>
<b>Identity:</b> <font style="float:right;">Sailor Star Fighter</font><br>
<b>Classification:</b> <font style="float:right;">Tankei Senshi</font><br>
<b>Type:</b> <font style="float:right;">Fighter</font><br>
<b>Domain:</b> <font style="float:right;"> </font><br>
<b>Elements:</b> <font style="float:right;">Laser/Light</font><br>
<b>Forms:</b> <font style="float:right;">One</font><br>
<b>Colors:</b> <font style="float:right;">Red, Green, Blue</font><br>
<b>Weapon:</b> <font style="float:right;">Sailor Star Yell</font><br>
<b>Transform. Item:</b> <font style="float:right;">Change Star</font><br><br>
<h1>Abilities</h1>
</div></div>

<a name="03"></a>
<div style="height:307px;overflow:auto;">
<div style="margin: 0 auto; width: 19.3em;">
<h1>History</h1>
wip
</div></div>

<a name="04"></a>
<div style="height:307px;overflow:auto;">
<div style="margin: 0 auto; width: 19.3em;">
<h1>Headcanons</h1>
in time
</div></div></div></div>

<div id="info2">
<div style="height:177px;overflow-y:hidden;">
<div style="height:177px;overflow:auto;">
<div style="margin: 0 auto; width: 12em;">
<h1>Personality</h1>

</div></div></div></div>

<div id="ooc">
<div style="height:197px;overflow-y:hidden;">
<div style="height:197px;overflow:auto;">
<div style="margin: 0 auto; width: 12em;">
<h1>Out of Character</h1>
<b>★</b> Coding is mine, leave it where it is.<br>
<b>★</b> FC is Allen Deng Lun. I do not own any of the images.<br>
<b>★</b> Sailor Moon oriented character. Got an issue with Fighter being a trans dude? Hit the red x at the top of the tab. I give no fucks about what you think.<br>
<b>★</b> I work full time, if I don't reply chances are I'm either asleep or at work.<br>
<b>★</b> Story driven, smut is reserved for the poor soul that gets with him.<br>
<b>★</b> Chemistry is bomb, if I tell you no I don't wanna pair that's that, don't push.<br>
<b>★</b> Li will not be played outside of the Sailor Moon room.<br>
<b>★</b> I'm friendly enough until pushed.<br>
<b>★</b> Do not DM me a post unless it's been agreed upon.<br>
<b>★</b> Creepy ass DMs that fetishize Trans folk will be ignored and blocked. A character's race, sexuality, or gender identity isn't a fetish. You're just a shitty person.<br>
<b>★</b> Am I an asshole? Probably at times, but all in all. I'm just three gremlins in a trench coat. Feed me memes.
</div></div></div></div>

<div id="friends">
<div style="height:98px;overflow-y:hidden;">
<div style="height:98px;overflow:auto;">
<div style="margin: 0 auto; width: 19.3em;">
<h1>Connections</h1>
<a href="/profile.php?user=Lunae" target="_blank"><img src="https://i.imgur.com/TgUv5WT.gif" title="Eun Bi: They have history together.
Someone he's loved in both his lives.
An ex that still means everything to him.
He'd do anything to protect her." class="friend"></a>
<a href="/profile.php?user=Flores" target="_blank"><img src="https://i.imgur.com/QUX2gsQ.gif" title="Chun Ha: His Queen, his hero.
He's loyal to her, he'll die for her.
Where she goes, so will he.
She constantly keeps him in check." class="friend"></a>
 <a href="/profile.php?user=Sailor+Chuu" target="_blank"><img src="https://i.imgur.com/DzdDOyH.gif" title="Yin Yue: An ally. Another under his queen.
They have an odd relationship.
Company has fans thinking they're an item.
Neither can deny it. It's very stressful." class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
 <a href=" " target="_blank"><img src="https://i.imgur.com/o40UKQa.gif" title="Info here" class="friend"></a>
</div></div></div></div>