New Advances

<style>
@import url('https://fonts.googleapis.com/css?family=Merienda|ZCOOL+XiaoWei');
::-webkit-scrollbar{width:0vh;height:0vh;}
 ::-webkit-scrollbar-track{border-radius:20%;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}

*{font-family: 'ZCOOL XiaoWei', serif;}
h1{font-family: 'Merienda', cursive;color:#d12714;font-size: 6vh;text-shadow: 0 0 16px #000;}
h2{font-family: 'Merienda', cursive;color:#d12714;font-size: 4vh;text-shadow: 0 0 16px #000;}
a{text-decoration:underline;transition: 0.5s;color:#000;}
a:hover{transition:0.5s;color:#d12714;text-shadow: 0 0 8px #000;letter-spacing: .5px}
hr{color:#d8dcff;border: 1px #d12714 solid;box-shadow: 0 0 16px #000;}
.r{float:right;}

body{
background: linear-gradient(-45deg, #262f3d, #354356, #4d5663, #354356, #262f3d);
}





#image{
position: fixed;
top: 0vh;
left: 15vw;
opacity: 1;
box-shadow: 0 0 1vh #000;
}

#image img{
height: 100vh;
}

#box, #box2{
z-index: 6;
background: linear-gradient(45deg, #d8dcff, #fff, #d8dcff);
padding: 1%;
position: fixed;
overflow-x:hidden;
border: 2px #304870 solid;
opacity: 1;
}


#box{
top: -100vh;
width: 2vh;
right: 10vw;
height: 30vh;
transition: top 1s, width 1s 1s;
}

body:hover #box{
top: 15vh;
width: 40vw;
}


#box2{
top: -100vh;
width: 2vh;
right: 10vw;
height: 30vh;
transition: top 1s 1.5s, width 1s 2.5s;
}

body:hover #box2{
top: 55vh;
width: 40vw;
}

#credit {
z-index:1;
position:fixed;
height:20vh;
right:1%;
bottom:0%;
}

</style>

<div id="image"><img src="IMAGE"></div>

<div id="box">
<h1>Title/Header</h1>
<hr>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
<br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
<br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
<br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
Stat -<div class="r">Stat</div><br>
<br>
<hr>
<br>
<h2>Personality</h2>
<b><u>Strengths</u></b><br><br>
 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<b><u>Faults</b></u><br><br>
 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
<br>
 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<br>
<b><u>General</b></u><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


</div>
<div id="box2">
<h1>Further Details</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Odio morbi quis commodo odio aenean sed adipiscing diam donec. Condimentum vitae sapien pellentesque habitant morbi tristique. Quis risus sed vulputate odio. Phasellus egestas tellus rutrum tellus pellentesque eu. Ultrices gravida dictum fusce ut placerat. Condimentum id venenatis a condimentum vitae sapien pellentesque. Nec nam aliquam sem et tortor. Non consectetur a erat nam at.</p>

<p>Nisl purus in mollis nunc sed id. Vitae purus faucibus ornare suspendisse sed nisi lacus. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ultrices dui sapien eget mi proin sed libero enim. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Aliquam id diam maecenas ultricies mi eget. A scelerisque purus semper eget duis at. Eu non diam phasellus vestibulum. Consectetur lorem donec massa sapien faucibus et molestie. Sem nulla pharetra diam sit amet. Eu tincidunt tortor aliquam nulla facilisi cras. Urna nunc id cursus metus aliquam eleifend. Tincidunt dui ut ornare lectus sit amet est placerat. Amet purus gravida quis blandit turpis cursus in hac habitasse. Adipiscing bibendum est ultricies integer quis auctor. Fames ac turpis egestas sed. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Morbi tristique senectus et netus et malesuada fames.</p>

<p>Fermentum posuere urna nec tincidunt. Quis hendrerit dolor magna eget est. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Nisi vitae suscipit tellus mauris a diam maecenas sed enim. Tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet. Neque convallis a cras semper auctor neque vitae tempus quam. Purus non enim praesent elementum facilisis leo vel fringilla. Massa massa ultricies mi quis. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Ultricies integer quis auctor elit sed vulputate. Aliquet lectus proin nibh nisl condimentum. Nulla at volutpat diam ut venenatis tellus in metus.</p>
<Br><br>
<hr><br>
<h1>Out of Character</h1>
 - OOC
<br>
 - OOC<br>
<br>
 - OOC<br>
<br>
 - OOC<br>
<br>

</div>

<a href="https://roleplay.chat/profile.php?user=From+Shadows+Codes" target="_blank" title="CC#02
Firefox 1366x768
Inform me of issues.">
<img src="https://i.imgur.com/4Lo0fbN.png" id="credit"/>
</a>