Izabel

<style>
@import url('https://fonts.googleapis.com/css?family=Cookie|Lobster|Odibee+Sans|Pangolin|Permanent+Marker|Shadows+Into+Light|Yellowtail&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;}


h1{font-family: 'Yellowtail', cursive;font-size: 5vh;}
*{font-family: 'Odibee Sans', cursive;font-size:2.5vh;color:#ffae9e;}
b{color:#f7e1c8;}
t{font-family: 'Permanent Marker';font-size:14vh;color: #ffae9e;}

body{
background: #FFD5BF;
}

#image{
position: fixed;
bottom: 0vh;
left: 12vw;
opacity: 1;
}

#image img{
height: 100vh;
}

@keyframes diagonal {
 0% { transform: translatex(70vw) translatey(-100vh) skew(-10deg);}
 100% { transform: translatex(55vw) translatey(25vh) skew(-10deg);}
}

@keyframes diagonal2 {
 0% { transform: translatex(75vw) translatey(-115vh) skew(-10deg);}
 100% { transform: translatex(60vw) translatey(11vh) skew(-10deg);}
}


#box{
position: fixed;
box-shadow: 1vh 1vh 2vh #68271a;
background: linear-gradient(45deg, #c61535, #e57862, #dd4f69);
padding: 1%;
overflow: auto;
height: 50vh;
width: 32vw;
text-shadow: 1vh 1vh 1vh #4f332e;
animation: diagonal 1.5s 1;
animation-fill-mode: both;
animation-delay: 1s;
}

#title{
position: fixed;
z-index: 5;
height: 20vh;
width: 32vw;
text-align: right;
text-shadow: 1vh 1vh 1vh #4f332e;
animation: diagonal2 1.5s 1;
animation-fill-mode: both;
animation-delay: 1s;
}

</style>

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

<div id="title"><t>Izabel</t></div>
<div id="box">
<center>
<h1>The Liger who doesn't take any shit.</h1>
Izabel Craine.<br>
A Seriously Floofy <b>Liger.</b><br>
Is most definitely of the femme variety.<br>
5'10"<br>
<br>
Is cool with being called Izzy.<br>
Don't touch her floof without being given permission first.<br>
I'll work out deets later.
</div>