Stone Cold

<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;}

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

#image img{
height: 100vh;
}

@keyframes info{
from{left:5vw;opacity: 0;}
to{left:10vw;}
}

@keyframes letters{
from{top: 15vh;}
to{top:20vh;opacity: 1;}
}

#why, #ayy, #ess, #aych, #aye{
position: fixed;
border: 0px #000 solid;
padding: 1%;
z-index: 6;
height: 15vh;
width: 2.75vw;
opacity: 0;
top: 15vh;
font-family: 'Ailerons';
font-size: 14vh;
color: #a4a7ab;
text-shadow: 0 0 2vh #5c5f63;
animation: letters 2s 1;
animation-fill-mode: both;
}

#why{left: 10vw;animation-delay:1s;}
#ayy{left: 15vw;animation-delay:1.25s;}
#ess{left: 20vw;animation-delay:1.5s;}
#aych{left: 25vw;animation-delay:1.75s;}
#aye{left: 30vw;animation-delay:2s;}






#box{
position: fixed;
background: rgba(0, 0, 0, 0.25);
border: 1px solid #a4a7ab;
box-shadow: 0 0 3vh #5c5f63;
padding: 1%;
z-index: 5;
height: 40vh;
width: 35vw;
bottom: 20vh;
animation: info 2s 1;
animation-fill-mode: both;
text-shadow: 0 .5vh 2vh #000;
font-family: 'Gotham';
font-size: 2.5vh;
color: #727478;
}
a{
color: #a4a7ab;
text-decoration: none;
transition: 0.5s;
}

a:hover{
transition: 0.5s;
color: #fff;
}


h1{
font-family: 'Above';
color: #727478;
font-size: 5vh;
}

</style>

<div id="why"><a href="#two">Y</a></div>
<div id="ayy"><a href="#three">A</a></div>
<div id="ess"><a href="#four">S</a></div>
<div id="aych"><a href="#five">H</a></div>
<div id="aye"><a href="#one">A</a></div>


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

<div id="box">
<div style="height: 100%; overflow-y: hidden;">
<a name="one"></a>
<div style="width:100%; height: 100%; overflow: auto; " align="center">


 </div>


 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <center><h1>Who?</h1>
 Name: Yasha Lyre<br>
 Age: 23 years old<br>
 Race: Viis<br>
 Gender: Female<br>
 Height: 6'4"<br>
 Weight: 195 lbs.<br>
 Occupation: Wandering Monk<br>

</center>


 </div>

 <a name="three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <center><h1>History</h1></center>

 </ol>
 </div>

<a name="four"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <center><h1>Headcanons and Notes</h1></center>

 <li></li>
 </ol>
 </div>

<a name="five"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <center><h1>Out of Character</h1></center>
 <ol>
<li>FFXIV Original Character.</li>
 <li>Code is mine. Don't steal.</li>
 <li>Eastern Standard Time.</li>
 <li>University Student. Likely going to be AFK half the time.</li>
 <li>OOC does not equate to IC.</li>
 <li>The info on Yasha is a biiiig work in progress.</li>
 </ol>
 </div>






</div>
</div>