<style>
@import url('https://fonts.googleapis.com/css?family=Allan|Happy+Monkey|Vampiro+One');
::-webkit-scrollbar { width: 0.3vw; height: 0.3vw;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
::-webkit-scrollbar-thumb { border-radius:0px; background-color: transparent;}

body{
background: #fff;
}



*{font-family: 'Happy Monkey', cursive;color: #d6fffd;font-size: 2.4vh;}
h1{font-family: 'Vampiro One', cursive;font-size: 6.4vh;color: #fff;}
a{font-family: 'Allan', cursive;text-decoration:none;transition:0.5s;}
a:hover{transition:0.5s;color: #a5fffc;letter-spacing: 2px;}


@keyframes sepia{
from{filter:sepia(100%);opacity:0;}
to{filter:sepia(0%);opacity:1;right:0vw;}
}

@keyframes sepiacredit{
from{filter:sepia(100%);opacity:0;}
to{filter:sepia(0%);opacity:1;left:2vw;}
}


@keyframes sepia1{
from{filter:sepia(100%);opacity:0;}
to{filter:sepia(0%);opacity:1;left:8vw;}
}

@keyframes sepia2{
from{filter:sepia(100%);opacity:0;}
to{filter:sepia(0%);opacity:1;left:13vw;}
}

@keyframes sepia3{
from{filter:sepia(100%);opacity:0;}
to{filter:sepia(0%);opacity:1;left:18vw;}
}

#image{
 position: fixed;
 right:-5vw;
 bottom: 0vh;
 opacity:1;
 animation: sepia 2s 1;
 animation-fill-mode:both;
}

#image img{
height: 100vh;
}



#box1, #box2, #box3{
position: fixed;
background:linear-gradient(-45deg, #4286f4, #89c1bf, #4eceb2);
padding: 1%;
overflow: auto;
box-shadow: -.5vh 0.5vh 0.5vh black;
text-shadow: -.25vh 0.25vh 0.25vh black;
}

#box1{
z-index: 1;
top: 2vw;
left: 0vw;
height: 12vw;
width: 24vw;
opacity: 0;
animation: sepia1 2s 1;
animation-fill-mode: both;
animation-delay: 1s;
}

#box2{
z-index: 1;
top: 17vw;
left: 5vw;
height: 12vw;
width: 24vw;
opacity: 0;
animation: sepia2 2s 1;
animation-fill-mode: both;
animation-delay: 1.5s;
}

#box3{
z-index: 1;
top: 32vw;
left: 10vw;
height: 12vw;
width: 24vw;
opacity: 0;
animation: sepia3 2s 1;
animation-fill-mode: both;
animation-delay: 2s;
}

#credit {
z-index:1;
position:fixed;
height:15vh;
left:-5vw;
bottom:0vw;
 animation: sepiacredit 2s 1;
 animation-fill-mode:both;
}


</style>

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

<div id="box1">
<center>
<br>
<h1>Just</h1>
<br><br><br>
<a href=""></a>
<br><br>
Name: Meszline Ducant<br>
Age: Twenty<br>
Status: Single<br>
Height: 5'5"<br>

</div>

<div id="box2">
<center>
<br>
<h1>A</h1>
<br><br><br>
<p>There's nothing too alarming to know about Meszline, she's your run of the mill feline with a knack for socializing. She's a fondness for the supernatural and a knack for getting herself into mischief, though every woman has their own special secrets to keep. <br>
<br>
She's partial to her mother and father, with additional love for her older sister having been something of a role model throughout her life despite their difference in hobbies. Trusting to a fault yet sharper than a whip, Meszline is a either a force to be reckoned with, or the warm best friend one can think back fondly on for the remainder of their years. Life is what you make of it after all!</p>
</div>

<div id="box3">
<center>
<br>
<h1>Cat</h1>
<br><br><br>
<li>I can't really think of any interesting OOC notes to place, so uh... Neat.</li>
</div>

<a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes" target="_blank" title="Thanks so much for using this layout! Please inform me of any issues if they should arise.">
<img src="https://i.imgur.com/vpoOTsg.png" id="credit"/>
</a>