Sailor Mars Code

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Beth+Ellen|Cookie|Kaushan+Script|Satisfy|Rancho);

body { background-image: linear-gradient(45deg, #29040B, #690511 , #8B0510, #CA0715 );
background-size:100% 100%;
background-position:;
background-color:;
overflow:hidden;}

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

#icon{z-index:5;
position: absolute;
left:19.5vw;
bottom:21vw;
width:15vw;
height:4.5vw;
background-image: url("https://data.whicdn.com/images/240926535/original.gif");
background-size:cover;
background-position:top;
border:0.3vw solid #29040B;
box-shadow:0vw 0vw 0.2vw #000;}

#pic{z-index:5;
position: absolute;
left:1vw;
bottom:1vw;
width:18vw;
height:25vw;
background-image: url("https://i.pinimg.com/564x/3d/73/d8/3d73d86b7e4798edb1691608dbd90679.jpg");
background-size:cover;
background-position:center;
box-shadow:0vw 0vw 0.3vw #000;}

#name{ z-index:3;
position: absolute;
text-align:center;
left: 1.2vw;
bottom: 25.2vw;
font-family: "Satisfy";
font-size: 3.5vw;
color: #8B0510;
letter-spacing: 0vw;
text-shadow: -1px 0px 0px #000, 0px 1px 0px #000, 1px 0px 0px #000, 0px -1px 0px #000;}

#infobox{position: absolute;
z-index: 10;
bottom: 1vw;
left: 19.5vw;
height:18.6vw;
width:14.5vw;
overflow: hidden;
padding:0.2vw;
color: #b3817f;
line-height: 1.1vw;
border: 0.3vw solid #29040B;
background-color:#140808;
background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');
font-family: "Rancho";
font-size: 0.9vw;
box-shadow:0vw 0vw 0.2vw #000;}

#navi {position: absolute;
bottom: 2.5vw;
left: 36vw;
width: 1vw;
height:17vw;
z-index: 300;}

a.nav:link, a.nav:active, a.nav:visited{letter-spacing: 1px;
text-transform: ;
display: inline-block;
width: 1vw;
height: 1vw;
margin: 2.5vw;
margin-top:0vw;
margin-left:0vw;
background-color: #8B0510;
border:0.2vw solid #29040B;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;}
a.nav:hover{background-color: #CA0715;}

h1 {
font-size: 1.4vw;
font-family: "Cookie";
margin-top: 0.5vw;
margin-bottom: 0.3vw;
text-align:center;
border-left:2.5vw solid #000;
border-right:2.5vw solid #000;
color: #b34b48;
letter-spacing: 1.5px;
text-shadow: -1px 0px 0px #000, 0px 1px 0px #000, 1px 0px 0px #000, 0px -1px 0px #000;
font-weight:normal;}

b {color: #701512; font-family: "Kaushan Script";}

a {color: #3f4d9e;text-decoration: none;}
a:hover {color: gray;cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}

#credit{z-index:100;
position: absolute;
right:1vw;
bottom:1vw;
height: 2vw;
width:1.8vw;
background-image: url("https://i.imgur.com/OManVVn.png");
background-size:100% 100% ;}

</style>

<a target="_blank" href="https://pastebin.com/u/YandereCodes"><div id="credit"></div></a>

<div id="box">
<div id="icon"></div><div id="pic"></div>
<div id="name">Sailor Mars ; Civ Name? </div>

<div id="navi">
<center>
<a class="nav" href="#1"></a>
<a class="nav" href="#2"></a>
<a class="nav" href="#3"></a>
<a class="nav" href="#4"></a>
<a class="nav" href="#5"></a>
</center>
</div>


<div id="infobox">
<center>
<div style="height: 100%; overflow-y: hidden;">
<a name="1"></a>
<div style="width:95%; height: 100%; top: 0px; overflow: auto;" align="left">
<h1>Statistics</h1>
<B>Given Name:</B> <font style=float:right>Kang Min-seo.</font><br>
<B>Hangul:</B> <font style=float:right>강민서.</font><br>
<B>Nickname(s):</B> <font style=float:right>Minnie, Min.</font><br>
<B>Age:</B> <font style=float:right>Twenty-One.</font><br>
<B>D.o.B.:</B> <font style=float:right>December 5th, 1998 (♐︎).</font><br>
<B>P.o.B.:</B> <font style=float:right>Anyang, Gyeonggi, South Korea.</font><br>
<B>Gender:</B> <font style=float:right>Female (♀).</font><br>
<B>Species:</B> <font style=float:right>Humanoid.</font><br>
<B>Classification:</B> <font style=float:right>Jovan Humanoid.</font><br>
<B>Nationality:</B> <font style=float:right>South Korean.</font><br>
<B>Ethnicity:</B> <font style=float:right>Korean.</font><br>
<B>Orientation:</B> <font style=float:right>Demisexual.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Alignment:</B> <font style=float:right>Chaotic Good.</font><br>
<B>Occupation:</B> <font style=float:right>Botanical Science Student.</font><br>
<B>Residence:</B> <font style=float:right>Crystia City, California.</font><br>
<h1> Appearance </h1>
<B>Hair Color:</B> <font style=float:right>Black & Green.</font><br>
<B>Hair Style:</B> <font style=float:right>Bangs, Shoulders.</font><br>
<B>Eye Color:</B> <font style=float:right>Black Coffee.</font><br>
<B>Skin Tone:</B> <font style=float:right>Olive.</font><br>
<B>Complexion:</B> <font style=float:right>Normal.</font><br>
<B>Height:</B> <font style=float:right>168 cm / 5'6".</font><br>
<B>Blood Type:</b> <font style=float:right>O.</font><br>
<B>Scent:</B> <font style=float:right>Lilacs.</font><br>
<B>Faceclaim:</B> <font style=float:right>Jiyoon (4minute).</font>

</div></div>

<div style="height: 100%; overflow-y: hidden;">
<a name="2"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
<h1>Senshi Identity</h1>
<B>Identity:</B> <font style=float:right>Sailor Mars.</font><br>
<B>Classification:</b> <font style=float:right>Inner Scout.</font><br>
<B>Type:</B> <font style=float:right>Archer.</font><br>
<B>Domain:</B> <font style=float:right>Passion.</font><br>
<B>Elements:</b> <font style=float:right>Fire.</font><br>
<B>Forms:</B> <font style=float:right>TBA.</font><br>
<B>Weapon:</B> <font style=float:right>Something.</font><br>
<B>Ruling Planet:</B> <font style=float:right>Mars.</font><br>
<B>Status:</b> <font style=float:right>Martian Queen.</font><br>
<B>Colors:</b> <font style=float:right>Red, White.</font> <br>
<B>Transform. Item:</B> <font style=float:right>Mars Crystal.</font>
<h1>Attacks</h1>
</div>
</div>

<div style="height: 100%; overflow-y: hidden;">
<a name="3"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
<h1>Personality</h1>

</div>
</div>

<div style="height: 100%; overflow-y: hidden;">
<a name="4"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
<h1>Connections</h1>

</div>
</div>

<div style="height: 100%; overflow-y: hidden;">
<a name="5"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
<h1>OOC</h1>

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