Burnt

<style>
@import url('https://www.themonster.xyz/styles/fancy-fonts.css');
@import url('https://fonts.googleapis.com/css?family=Arizonia|Niconne|Norican|Yellowtail|Yesteryear|Zhi+Mang+Xing&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;}


body{
background: #E6E0C8;
}


#image{
position: fixed;
top: 0vh;
right: 10vw;
}

#image img{
height: 100vh;
}

#box{
position: fixed;
padding: 1%;
overflow: auto;
z-index: 5;
text-align: center;
background: #ffad42;
box-shadow: -1vh 1vh 1vh #000;
height: 38vh;
width: 32vw;
left: 12vw;
bottom: 32vh;
font-family: 'Gotham';
font-size: 2.5vh;
color: #542370;
text-shadow: 0 0 1vh #000;
}

#title{
position: fixed;
z-index: 6;
height: 20vh;
width: 45vw;
left: 10vw;
bottom: 65vh;
font-family: 'Yesteryear';
font-size: 15vh;
color: #ffd480;
text-shadow: -.5vh .5vh .75vh #000;
}

h1{
font-family: 'Arizonia';
font-size: 4vh;
color: #d8a6ff;
}


#nav1, #nav2, #nav3{
position: fixed;
z-index: 3;
background: #ffad42;
box-shadow: -1vh 1vh 1vh #000;
height: 5vh;
width: 10vw;
bottom: 60vh;
transition: .5s;
}

#nav1{left: 12.75vw;transition: .5s;}
body:hover #nav1{bottom: 25vh;}
#nav1:hover{#d8a6ff;}

#nav2{left: 23.75vw;transition: .5s;transition-delay: .1s;}
body:hover #nav2{bottom: 25vh;}
#nav2:hover{#d8a6ff;}

#nav3{left: 34.75vw;transition: .5s;transition-delay: .2s;}
body:hover #nav3{bottom: 25vh;}
#nav3:hover{#d8a6ff;}


</style>

<div id="image">
<img src="https://i.imgur.com/1MpBeRf.jpg">
</div>

<div id="title">Yang Xiao Long</div>

<a href="#one"><div id="nav1"></div></a>
<a href="#two"><div id="nav2"></div></a>
<a href="#three"><div id="nav3"></div></a>

<div id="box">
<div style="height: 100%; overflow-y: hidden;">
<a name="one"></a>
<div style="width:100%; height: 100%; overflow: auto; " align="center">
<br>
<h1>What if.</h1>
 <i>
<p>What if many things. What if bread had never been invented? What if the world had split in half? What if...</p>
<p>What if the Fall of Beacon never happened?</p>
<p>What if instead, team RWBY attended Beacon all the way up to graduation, graduated from the academy, and became huntresses as per the original plan?</p>
<p>Well, Alternate Universes are wonderful things.</p></i>

 </div>


 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <center><h1>Who?</h1>
 Name: Yang Xiao Long<br>
 Age: 23 years old<br>
 Gender: Female<br>
 Height: 5'8"<br>
 Weight: 143 lbs.<br>
 Status: <a target="_blank" href="https://roleplay.chat/profile.php?user=Schnee">Chill.</a><br>
 Occupation(s): Huntress. Dabbles in baking, and has started learning to play the drums.<br>
</center>


 </div>

 <a name="three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <center><h1>Out of Character</h1></center>
 <ol>
 <li>Tendency to be busy on the regular. If I hop on, it's more than likely to shitpost, or do a one-off.</li>
<li>Code was put together by <a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows</a> for Burnt's use. Please do not steal this code.</li>
<li>Smut is okay, but I don't prefer it.</li>
<li>I prefer talking with people who have some sense of literacy, and who have some semblance of a profile.</li>
 </ol>
 </div>




</div>
</div>