Rope

<style>
@import url('https://fonts.googleapis.com/css?family=Amarante|Bellefair|Cormorant+Upright|David+Libre|Goudy+Bookletter+1911|Meddon|Sarabun&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;}

#background{
position: fixed;
background: url(https://i.imgur.com/usyy9RJ.png);
background-size: cover;
background-position: center;
filter: blur(15px);
z-index: -1;
height: 110vh;
width: 110vw;
top: -5vh;
left: -5vw;
}

#image{
position: fixed;
bottom: 5vh;
left: 10vw;
box-shadow: -1vh 1vh 1vh #000;
z-index: 3;
}

#image img{
height: 90vh;
}

#bar{
position: fixed;
z-index: 1;
bottom: 25vh;
width: 100vw;
left: 0vw;
height: 50vh;
background: rgba(78, 68, 89, 0.6);
}

#info1, #info2, #info3, #info4{
position: fixed;
height: 45vh;
width: 40vw;
bottom: 27.5vh;
right: 9vw;
font-family: 'Cormorant Upright';
font-size: 2.5vh;
color: #fff;
overflow: auto;
}

h1{
Font-family: 'Amarante';
font-size: 5vh;
font-weight: lighter;
}

#title{
position: fixed;
z-index: 4;
text-align: center;
height: 15vh;
top: 12vh;
width: 40vw;
right: 9.75vw;
font-family: 'Meddon';
font-size: 13vh;
color: #ab91c7;
text-shadow: 1vh 1vh 2vh #000;
}

#nav1, #nav2, #nav3, #nav4, #nav5{
position: fixed;
z-index: 2;
background: #564766;
clip-path: polygon(0 100%, 0 0, 100% 45%);
height: 10vh;
width: 5vw;
left: 39vw;
transition: 0.5s;
}

#nav1{bottom: 65vh;}
#nav1:hover{background: #b071f5;width: 7vw;}
#nav2{bottom: 55vh;}
#nav2:hover{background: #b071f5;width: 7vw;}
#nav3{bottom: 45vh;}
#nav3:hover{background: #b071f5;width: 7vw;}
#nav4{bottom: 35vh;}
#nav4:hover{background: #b071f5;width: 7vw;}
#nav5{bottom: 25vh;}
#nav5:hover{background: #b071f5;width: 7vw;}


a{
color: #fff;
transition: 0.4s;
}
a:hover{
transition: 0.4s;
color:#dcbdff;
text-shadow: 0 0 1vh #dcbdff;
}

.appear{opacity: 0; z-index: 3; transition: 2s;overflow: auto;}
.appear:target{opacity: 1; z-index: 6; transition: 2s;}

.r{float:right;}


</style>

<div id="background"></div>
<div id="bar"></div>
<a target="_blank" href="https://imgur.com/a/RI22DMa"><div id="image"><img src="https://i.imgur.com/a7sTATi.png"></div></a>

<div id="title">Rope</div>

<a href="#info1"><div id="nav1"></div></a>
<a href="#info2"><div id="nav2"></div></a>
<a href="#info3"><div id="nav3"></div></a>
<a href="#info4"><div id="nav4"></div></a>
<a href="#info5"><div id="nav5"></div></a>

<div id="info1" class="appear">
<center>
<h1>A Sneaky Rabbit</h1>
<p>Rope is a cat burglar from the slums of Lungmen, who got caught during a botched caper. Sent to Rhodes Island on a special recommendation from Madam Ch'en after Lungmen formed a partnership with the island. Responsible for intelligence gathering. Uses a rope and grappling hook in combat to disorient the enemy.</p>

<p>A coy thief. She smiles at everyone, but it's a polite, distant smile. Pilfering is second nature to her. She will sometimes pickpocket someone without even realizing it. At least she knows to give it back now.</p>
</p>
</div>

<div id="info2" class="appear">
<center>
<h1>Profile</h1>
</center>
Codename<div class="r">Rope</div><br>
Age<div class="r">22</div><br>
Gender<div class="r">Female</div><br>
Race<div class="r">Cautus</div><br>
Height<div class="r">155cm</div><br>
Birthday<div class="r">April 4</div><br>
Place of Birth<div class="r">Rim Billiton</div><br>
Class<div class="r">Specialist</div><br>
</div>

<div id="info3" class="appear">
<center>
<h1>Page Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

<div id="info4" class="appear">
<center>
<h1>OOC</h1>
</center>
<ol>
<li>Character is from the mobile video game, Arknights.</li>
<li>Shitpost - Multi-Para</li>
<li>Don't be a dick.</li>
<li>In-Room approach is appreciated.</li>
<li>Profile was made by <a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows</a> for Earthspirit's use, as well as her alts. Please do not steal or appropriate.</li></div>