Zaala

<style>
@import url('https://fonts.googleapis.com/css?family=Arizonia|Lateef&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: url(https://i.imgur.com/s4cYozk.png);
background-size: cover;
background-position: center;
}

#image{
position: fixed;
background: url(https://i.imgur.com/tSobyZ4.jpg);
background-size: cover;
background-position: center;
top: 5vh;
left:35.5vw;
z-index: 5;
height: 90vh;
width: 29vw;
box-shadow: 0vh 1vh 1vh #000;
}




#box1, #box2{
position: fixed;
text-align: center;
z-index: 1;
height: 90vh;
width: 29vw;
bottom: 5vh;
background: #b586d9;
}

#box1{
left: 3vw;
box-shadow: -1vh 1vh 1vh #000;
}

#box2{
right: 3vw;
box-shadow: 1vh 1vh 1vh #000;
}


#info1, #info2, #info3{
position: fixed;
padding: 1%;
background: rgba(0, 0, 0, 0.6);
height: 84vh;
bottom: 6vh;
width: 25.5vw;
z-index: 5;
opacity: 0;
transition: .75s;
font-family: 'Lateef';
font-size: 2.5vh;
color: #fff;
text-shadow: 0vh 1vh 1vh #000;
overflow: auto;
}

#info1{
left: 3.75vw;
text-align: center;
}
#info1:hover{
opacity: 1;
transition: .75s;
}

#info2{
left: 36.4vw;
}
#info2:hover{
opacity: 1;
transition: .75s;
}

#info3{
right: 3.75vw;
text-align: center;
}
#info3:hover{
opacity: 1;
transition: .75s;
}

h1{
font-family: 'Arizonia';
font-size: 10vh;
font-weight: lighter;
}

.r{float: right;}


</style>

<div id="image"></div>

<div id="box1"></div>
<div id="box2"></div>

<div id="info1">
<h1></h1></div>



<div id="info2">
<center><h1>Zaala</h1></center>
<br><br>
<br><br>
Name: <div class="r">K'zaala Gamorr</div><br>
Age: <div class="r">22 Years of Age</div><br>
Gender: <div class="r">Female</div><br>
Race: <div class="r">Miqo'te, Seeker of the Sun</div><br>
<br>
Height: <div class="r">5'1"</div><br>
Weight: <div class="r">Midweight</div><br>
Hair: <div class="r">Raven Black, Dark Red Highlights</div><br>
Eyes: <div class="r">Light Onyx</div><br>
<br>
Job of Choice: <div class="r">Red Mage</div><br>
City of Origin: <div class="r">Ul'dah</div><br>
Occupation: <div class="r">Traveling Magician</div><br>
Oriention: <div class="r">Bicurious</div><br>
Status: <div class="r">Wandering.</div><br>
Marital: <div class="r">Free as a bird, not looking.</div><br>
</div>




<div id="info3">
<h1>OOC</h1>
<li>This is MY CODE! No touchy!</li>
<li>The art is most definitely not mine. I wish I could draw half this well, but alas, I cannot.</li>
<li>I'm a full-time University Student with weekends off. I have to step away periodically for class and whatnot.</li>
<li>I play FFXIV on the regular! If you want to join my in my exploits, feel free to hit me up. We can discuss details then.</li>
<li>Don't be a dick. We're all here to have a good time. You don't need to be the person who ruins it.</li>
<li>Please approach me in-room. I won't respond to a random stranger DMing me who is idling in the Pillory or in PMs Only or something like that.</li>
</div>