blaidemaid

<style>
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Gruppo&display=swap');
body {
background-image: url("https://www.transparenttextures.com/patterns/diagmonds.png"), linear-gradient(180deg, #FF0000, #9C0000, #470000);
	background-position: fixed;
	background-repeat:repeat;
	background-position: right bottom;}
::-webkit-scrollbar {
 width: .1px;
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: #b95595;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
 background: #b95591;
}

h1 {
color: #18BE09;
border-bottom: 5px solid #18BE09;
font-family: 'Audiowide', cursive;
font-size: 50px;
text-align: center;
font-weight: bold;
padding: 5px;
}

#blade{
 position: fixed;
 bottom: 2vw;
 right: 19vw;
 z-index: 2;
opacity: 1;
transition: .8s;
height: 45vw;
width: 30vw;
}

#blade img{position: fixed;
display: inline-block;
opacity: 1;
height: 47vw;
}

.content{
position: fixed;
bottom: 46vw;
left: 20vw;
transform: scale(0%, 1%);
z-index: 1;
opacity: 1;
transition: .5s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
bottom: 46vw;
left: 20vw;
transform: scale(100%, 100%);
z-index: 0;
opacity: 1;
}

.contentbox{
background-color: #031D01;
background-image: url('https://www.transparenttextures.com/patterns/dark-mosaic.png') ;
 background-size: ;
	background-repeat:repeat;
	background-position: center;
font-family: 'Gruppo', cursive;
font-size:20px;
color: #18BE09;
padding: 12px 20px;
border-width: 5px;
border-color: #fff;
letter-spacing: 0px;
width: 380px;
height: 600px;
text-align: center;
z-index: 0;
overflow-y: scroll;
position: fixed;
opacity: 1;
}



#navi1 {position: fixed;
 left: 0vw;
 bottom: 40vw;
 z-index: 2;
vertical-align: top;
}

#navi1 a {
background-image: url('https://i.imgur.com/qJdRKb9.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
transition: .8s;
}

#navi1 a:hover {
display: inline-block;
background-image: url('https://i.imgur.com/OSlbhZL.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
}


#navi2 {position: fixed;
 left: 0vw;
 bottom: 35vw;
 z-index: 2;
vertical-align: top;
}

#navi2 a {
background-image: url('https://i.imgur.com/icv9cIN.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
transition: .8s;
}

#navi2 a:hover {
display: inline-block;
background-image: url('https://i.imgur.com/vevAR2r.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
}


#navi3 {position: fixed;
 left: 0vw;
 bottom: 30vw;
 z-index: 2;
vertical-align: top;
}

#navi3 a {
background-image: url('https://i.imgur.com/kDTUTzM.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
transition: .8s;
}

#navi3 a:hover {
display: inline-block;
background-image: url('https://i.imgur.com/B1a0pXh.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
}

#navi4 {position: fixed;
 left: 0vw;
 bottom: 25vw;
 z-index: 2;
vertical-align: top;
}

#navi4 a {
background-image: url('https://i.imgur.com/mXh9awS.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
transition: .8s;
}

#navi4 a:hover {
display: inline-block;
background-image: url('https://i.imgur.com/iRLrsvp.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
}

#navi5 {position: fixed;
 left: 0vw;
 bottom: 20vw;
 z-index: 2;
vertical-align: top;
}

#navi5 a {
background-image: url('https://i.imgur.com/npAEOz2.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
transition: .8s;
}

#navi5 a:hover {
display: inline-block;
background-image: url('https://i.imgur.com/6nz2phX.png') ;
 background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
display: inline-block;
opacity: 1;
height: 5vw;
width: 20vw;
}
</style>
<body>

<div id="navi1"><a href="#one"></a></div></div>

<div id="navi2"><a href="#two"></a></div></div>

<div id="navi3"><a href="#three"></a></div></div>

<div id="navi4"><a href="#four"></a></div></div>

<div id="navi5"><a href="#five"></a></div></div>

<div id="blade">
<img src="https://i.imgur.com/BbX7ex4.png">
</div>

 <div id="one" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.imgur.com/GQ4AC15.png" width="50" ></a></span>
<h1>Stats</h1>
<span style="float:left;"><b>Name</b></span><span style="float:right;">Peach</span><br>
<span style="float:left;"><b>Nickname</b></span><span style="float:right;">N/a</span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">Human</span><br>
<span style="float:left;"><b>Height</b></span><span style="float:right;">6'</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">150lbs</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">Blue</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">Blonde</span><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="">---</a></span><br>
<span style="float:left;"><b>Affiliation</b></span><span style="float:right;">Princess of the Mushroom Kingdom</span><br>


</div>
</div>

 <div id="two" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.imgur.com/GQ4AC15.png" width="50" ></a></span>
<h1>Stats</h1>
2


</div>
</div>

 <div id="three" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.imgur.com/GQ4AC15.png" width="50" ></a></span>
<h1>Stats</h1>
3

</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.imgur.com/GQ4AC15.png" width="50" ></a></span>
<h1>Stats</h1>
4

</div>
</div>

 <div id="four" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.imgur.com/GQ4AC15.png" width="50" ></a></span>
<h1>Stats</h1>
4

</div>
</div>



</body>