help im dumb sometimes

<style>
@import url('https://fonts.googleapis.com/css?family=Kalam:300|Molle:400i|PT+Sans+Narrow');
 ::-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{font-family: 'Molle', cursive;font-size: 6vh;}
*{font-family: 'Kalam', cursive;font-size:2.8vh;color:#ffae9e;}
b{color:#f7e1c8;}

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: 0px 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: 0px 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: 0px 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: 0px solid #fff;

}

.content{
position: absolute;
height: 100px;
width: 400px;
top: 4vw;
left: 30vw;
z-index: -1;
opacity: 0;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

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

.contentbox{

background: #f0f0e9;
font-family: 'Cormorant Garamond', serif;
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>No Stone Unturned</h1>

 <span style="float:left;"><b>Name</b></span><span style="float:right;">Annabelle Greenwick</span><br>
<span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="TBA">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;">23</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;">5'7"</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">123lbs</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;">Blue(Current)</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;">Ever Grande City Tribute</span><br>
<span style="float:left;"><b>Affiliation</b></span><span style="float:right;">Journalist</span><br><br>

<span style="float:left;"><b>Orientation</b></span><span style="float:right;">Wouldn't you like to know</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>No Lead Unfollowed</h1>

Will work on at some point. Story stuff

</div>
</div>
 <div id="three" class="content"><div class="contentbox">
<center><h1>A Crack Team</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="http://i.picpar.com/RN3e.gif" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://media1.giphy.com/media/WytSQL7115G6uPwDwK/source.gif" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://media1.giphy.com/media/WytSQL7115G6uPwDwK/source.gif" width="100" ></span></a><br>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://media1.giphy.com/media/WytSQL7115G6uPwDwK/source.gif" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://media1.giphy.com/media/WytSQL7115G6uPwDwK/source.gif" width="100" ></span></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user="><span title="TBA"><img src="https://media1.giphy.com/media/WytSQL7115G6uPwDwK/source.gif" 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>