Kensai Mk II

<style>
 @import url('https://www.themonster.xyz/styles/fancy-fonts.css');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}



body{
background: url(https://i.imgur.com/WZCb8FF.jpg);
background-size: cover;
background-position: center;
}


#box{
position: fixed;
border: 1.5vh #374531 solid;
background: #5d6958;
width: 70vw;
left: 15vw;
height: 55vh;
bottom: 17.5vh;
box-shadow: 0 1vh 1vh #000;
}

#title{
position: fixed;
text-align: right;
width: 30vw;
height: 20vh;
top: 10vh;
right: 13vw;
font-family: 'Channel';
font-size: 10vh;
color: #edfce6;
text-shadow: 0 1vh 1vh #000;
z-index: 6;
}

#image{
position: fixed;
bottom: 14vh;
left: 20vw;
z-index: 5;
}

#image img{
height: 75vh;
}


#info{
position: fixed;
text-align: center;
z-index: 5;
padding: 1%;
width: 25vw;
height: 35vh;
border: 1vh #394f2f solid;
right: 22vw;
bottom: 23vh;
box-shadow: 0 1vh 1vh #000;
font-family: 'Ancient';
font-size: 2.5vh;
color: #edfce6;
text-shadow: 0 1vh 2vh #000;
}

#nav1, #nav2, #nav3, #nav4{
position: fixed;
right: 16.5vw;
z-index: 5;
filter:drop-shadow(0 0 1vh #000);
}

#nav1{transition: 0.5s;top: 38vh;}
#nav1 img{height: 5vh;}
#nav1:hover{transform:rotate(360deg);transition: 0.5s;}
#nav2{transition: 0.5s;top: 48vh;}
#nav2 img{height: 5vh;}
#nav2:hover{transform:rotate(360deg);transition: 0.5s;}
#nav3{transition: 0.5s;top: 58vh;}
#nav3 img{height: 5vh;}
#nav3:hover{transform:rotate(360deg);transition: 0.5s;}
#nav4{transition: 0.5s;top: 68vh;}
#nav4 img{height: 5vh;}
#nav4:hover{transform:rotate(360deg);transition: 0.5s;}

</style>

<div id="image"><img src="https://i.imgur.com/6FWtpb9.png"></div>

<div id="nav1"><a href="#one"><img src="https://i.imgur.com/KuQEt30.png"></a></div>
<div id="nav2"><a href="#two"><img src="https://i.imgur.com/KuQEt30.png"></a></div>
<div id="nav3"><a href="#three"><img src="https://i.imgur.com/KuQEt30.png"></a></div>
<div id="nav4"><a href="#four"><img src="https://i.imgur.com/KuQEt30.png"></a></div>


<div id="title">Kensai</div>
<div id="box"></div>
<div id="info">

<div style="height: 100%; overflow-y: hidden;">
<a name="one"></a>
<div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Mauris a diam maecenas sed. Fermentum et sollicitudin ac orci phasellus egestas. Viverra nibh cras pulvinar mattis nunc.</p>

 </div>


 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>Stats</h1>
 Name: Stat<br>
 Race:Stat<br>
 Age: Stat<br>
 Gender: Stat<br>
 Occupation: Stat<br>
 Height: Stat<br>


 </div>

 <a name="three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>Skillz</h1>
<li>List them here</li>

 </div>

<a name="four"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>OOC</h1>
<li>OOCOOCOOCOOCOOCOOCOOCOOC</li>

 </div>
</div>