Shield Hero 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;
font-weight: bold;
padding: 5px;
}

body{
background: #5a7145;
background-image: url('https://images.wallpapersden.com/image/download/naofumi-iwatani-from-the-rising-of-the-shield-hero_64429_3840x2160.jpg');
background-repeat: no-repeat;
	background-position: bottom left;
 background-size: 90%;
}


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

#navi1 a {background-color: #600;
background:url('https://data.whicdn.com/images/330986933/original.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: 32.1vw;
 top: 10.7vw;}

#navi2 a {background-color: #600;
background:url('https://trustthegaijinhome.files.wordpress.com/2019/07/naofumi-and-the-curse-shield.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: 34.1vw;
 top: 16.3vw;}

#navi3 a {background-color: #600;
background:url('https://pa1.narvii.com/7091/af5f0171519f5e8bde7fec9e2e7e7069a7c095d8r1-540-304_hq.gif')
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: 36.2vw;
 top: 22vw;}

#navi4 a {background-color: #600;
background:url('https://66.media.tumblr.com/c13b80f0c869307c6ad2139e9ed9b5bc/tumblr_pwf2hyEmG31wrb3z2o1_500.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: 49vw;
z-index: -1;
opacity: 1;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
top: 4vw;
left: 49vw;
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>The Shield Hero</h1>

 <span style="float:left;"><b>Name</b></span><span style="float:right;">Naofumi Iwatani</span><br>
<span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="
Mr. Naofumi
Mr. Iwatani
Master
Kiddo
Shield Devil">hover</a></span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
<span style="float:left;"><b>Age</b></span><span style="float:right;">20</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">Human</span><br><br>

<span style="float:left;"><b>Height</b></span><span style="float:right;">6'2"</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">170lbs</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">Green</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">Black</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;">Cardinal Hero</span><br>
<span style="float:left;"><b>Occupation</b></span><span style="float:right;"><a title="
Legendary Hero
Merchant
Accessory Maker
Potion Maker
Count of Melromarc">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>Cast Aside and Betrayed</h1>

Will work on at some point. Story stuff

</div>
</div>
 <div id="three" class="content"><div class="contentbox">
<center><h1>Lights found in Darkness</h1>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Bou"><span title="Bou. The Muscle of the Investigation Team. Even journalism gets a little rough. One of her trusted."><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>. I made the code. If you want help, please ask. <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>