Raphtalia code

<style>
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}


h1 {
color: #000;
border-bottom: 1px solid #000;
font-family: 'Nothing You Could Do', cursive;
font-size: 25px;
transform: skew(20deg);
font-weight: bold;
padding: 5px;
}

body{
background: #66b3c7;
background-image: url('https://i.redd.it/gcjncdl9k9t21.png');
background-repeat: no-repeat;
	background-position: top right;
 background-size: 90%;
}


#navi1 {position: absolute;
 left: 55vw;
 top: 5vw;}

#navi1 a {background-color: #600;
background:url('https://static.zerochan.net/Tate.no.Yuusha.no.Nariagari.full.2609063.gif')
center center no-repeat;
transform: skew(-20deg);
background-size: 100%;
display: inline-block;
height: 75px;
width: 250px;
border: 2px solid #fff;

}

#navi2 {position: absolute;
 left: 52.9vw;
 top: 10.7vw;}

#navi2 a {background-color: #600;
background:url('https://data.whicdn.com/images/329588672/original.gif')
center center no-repeat;
transform: skew(-20deg);
background-size: 100%;
display: inline-block;
height: 75px;
width: 250px;
border: 2px solid #fff;

}

#navi3 {position: absolute;
 left: 50.9vw;
 top: 16.3vw;}

#navi3 a {background-color: #600;
background:url('https://media1.tenor.com/images/6c3009db81623903cc90522692753a0e/tenor.gif?itemid=13871416')
center center no-repeat;
transform: skew(-20deg);
background-size: 100%;
display: inline-block;
height: 75px;
width: 250px;
border: 2px solid #fff;

}

#navi4 {position: absolute;
 left: 48.8vw;
 top: 22vw;}

#navi4 a {background-color: #600;
background:url('https://i.pinimg.com/originals/9a/79/02/9a7902f4ff53c470f8a7eab6c6a794a8.gif')
center center no-repeat;
transform: skew(-20deg);
background-size: 100%;
display: inline-block;
height: 75px;
width: 250px;
border: 2px solid #fff;

}

.content{
position: absolute;
height: 100px;
width: 400px;
transform: skew(-20deg);
top: 4vw;
left: 16vw;
z-index: -1;
opacity: 1;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
top: 4vw;
left: 16vw;
z-index: 1;
transition: 1.2s;
-moz-transition: 1.2s;
webkit-transition: 1.2s;
-o-transition: 1.2s;
opacity: 1;
}

.contentbox{
background:url(' https://i.pinimg.com/originals/0c/e1/45/0ce1451d2d4cbaac9a31f72b4acb25fa.jpg')center center no-repeat;
 background-size: 200%;
font-family: 'Nothing You Could Do', cursive;
font-size:16px;
color: #000;
letter-spacing: 0px;
width: 500px;
height: 500px;
overflow-y:auto;
position: absolute;
line-height: 15px;
padding: 5px;
border: 10px solid rgba(255,255,255,.32);
outline: 1px solid rgba(255,255,255,.5);
outline-offset: 2px;
z-index:1;
text-shadow:none;
}




</style>



<div id="navi4"><a href="#four"></a></div>
<div id="navi3"><a href="#three"></a></div>
<div id="navi2"><a href="#two"></a></div>
<div id="navi1"><a href="#one"></a></div>
</div>
<div id="one" class="content"><div class="contentbox">
<center><h1>A Shield's Sword</h1>

 <span style="float:left;"><b>Name</b></span><span style="float:right;">Raphtalia</span><br>
<span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="
-insert-">hover</a></span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
<span style="float:left;"><b>Age</b></span><span style="float:right;">18</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;"><a title="Half-Raccoon">Demi-Human</span><br><br>

<span style="float:left;"><b>Height</b></span><span style="float:right;">5'9"</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">135lbs</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">Tea Red</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">Brown</span><br>
<span style="float:left;"><b>Build</b></span><span style="float:right;">Athletic</span><br><br>

<span style="float:left;"><b>Affiliation</b></span><span style="float:right;">Shield Hero</span><br>
<span style="float:left;"><b>Occupation</b></span><span style="float:right;"><a title="
-insert-">hover</a></span></span><br><br>

<span style="float:left;"><b>Orientation</b></span><span style="float:right;">Straight</span><br>
<span style="float:left;"><b>Relationship</b></span><span style="float:right;"><a target="_blank" href="https://roleplay.chat/profile.php?user=">None</a></span><br><br>


</div>
</div>
 <div id="two" class="content"><div class="contentbox">
<center><h1>An Unwavering Smile</h1>

Will work on at some point. Story stuff

</div>
</div>
 <div id="three" class="content"><div class="contentbox">
<center><h1>Those I Hold Dear</h1>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://vignette.wikia.nocookie.net/the-rising-of-the-shield-hero/images/3/35/Legendary_Shield.png/revision/latest/scale-to-width-down/340?cb=20150111042741" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://vignette.wikia.nocookie.net/the-rising-of-the-shield-hero/images/3/35/Legendary_Shield.png/revision/latest/scale-to-width-down/340?cb=20150111042741" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://vignette.wikia.nocookie.net/the-rising-of-the-shield-hero/images/3/35/Legendary_Shield.png/revision/latest/scale-to-width-down/340?cb=20150111042741" width="100" ></span></a><br>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://vignette.wikia.nocookie.net/the-rising-of-the-shield-hero/images/3/35/Legendary_Shield.png/revision/latest/scale-to-width-down/340?cb=20150111042741" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://vignette.wikia.nocookie.net/the-rising-of-the-shield-hero/images/3/35/Legendary_Shield.png/revision/latest/scale-to-width-down/340?cb=20150111042741" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://vignette.wikia.nocookie.net/the-rising-of-the-shield-hero/images/3/35/Legendary_Shield.png/revision/latest/scale-to-width-down/340?cb=20150111042741" width="100" ></span></a><br>
</div>
</div>
 <div id="four" class="content"><div class="contentbox">
<center><h1>OOC</h1>
<b>00</b>. Code was made for me. If you want to know who, ask  <a target="_blank" href="https://roleplay.chat/profile.php?user=Iwatani+Naofumi">Shield Hero</a>. <br><br>
<b>01</b>. Pretty DM Friendly. Wanna chat? Stay polite. <br><br>
<b>02</b>. Weird Schedule, if I don't reply, don't take it personal.<br><br>
<b>03</b>. Snowballer. Wanna write? Make it interesting.<br><br>
<b>04</b>. Want straight up smut? Bye. <br><br>
<b>05</b>. Wanna plot? I'm all ears. <br><br>
<b>06</b>. Will add on to the profile if needed. <br><br>
<b>07</b>. <br><br>
<b>08</b>. <br><br>
<b>09</b>. <br><br>
<b>10</b>. <br><br>

</div>
</div>