Ona Sashihai 12/15/2020

<style>
 @import url('https://www.themonster.xyz/styles/fancy-fonts.css');
 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;500&family=Cormorant+SC:wght@300;400;500&family=Cormorant+Upright:wght@300;400;500&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: #73342f;
}

#image{
 position: fixed;
 bottom: 0vh;
 right: 0vw;
 filter: drop-shadow(-1vh 1vh 4vh #000);
 z-index: 10;
}

#image img{
 height: 105vh;
}

.box{
 position: fixed;
 z-index: 4;background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)), url(https://i.imgur.com/nZeFy9T.jpg);
 background-size: cover;
 background-position: center;
 height: 70vh;
 width: 70vw;
 bottom: 10vh;
 left: 15vw;
 box-shadow: 0 0 1vh #000;
}


#title{
 position: fixed;
 z-index: 8;
 height: 15vh;
 top: 20vh;
 width: 60vw;
 left: 10vw;
 color: #fff;
 font-family: 'Brilliantte';
 font-size: 15vh;
 text-align: center;
 text-shadow: 0 0 1vh #fff;
}

#info1, #info2, #info3, #info4, #info5{
 position: fixed;
 padding: 1%;
 background: #2f5773;
 font-family: 'Cormorant Garamond';
 font-size: 1.75vh;
 color: #fff;
 overflow: auto;
box-shadow: 0 0 1vh #000;
}

#info1, #info2{
 width: 15vw;
 left: 42vw;
 height: 20vh;
 z-index: 11;
}
#info1{bottom: 40vh;}
#info2{bottom: 13vh;}

#info3{z-index: 6;}

#info3, #info4, #info5{
 height: 47vh;
 width: 15vw;
 bottom: 13vh;
 left: 20vw;
 font-size: 1.5vh;
}


.nav1, .nav2, .nav3{
 position: fixed;
 z-index: 8;
 height: 10vh;
 width: 10vh;
 left: 37vw;
transition: 0.2s;
}

h1{
 font-family: 'Cormorant SC';
 font-size: 3.5vh;
 font-weight: lighter;
}

.r{float:right;text-align: right;}

a{color: #fff;
transition: 0.2s;
text-decoration: underline;}
a:hover{color: #f58f6c;
transition: 0.2s;
text-shadow: 0 0 1vh #f58f6c;}


.appear{opacity: 0; transition: 2s;z-index: 4;}
.appear:target{opacity: 1;transition: 1s;z-index: 7;}


.friend{
 height: 10vh;
}

.nav1{background: url(https://xivapi.com//cj/1/scholar.png);background-size: cover;background-position: center;bottom: 53vh;}
.nav1:hover{transition: 0.2s;filter:drop-shadow(0 0 1vh #fff);}
.nav2{background: url(https://xivapi.com//cj/1/gunbreaker.png);background-size: cover;background-position: center;bottom: 34vh;}
.nav2:hover{transition: 0.2s;filter:drop-shadow(0 0 1vh #fff);}
.nav3{background: url(https://xivapi.com//cj/1/redmage.png);background-size: cover;background-position: center;bottom: 15vh;}
.nav3:hover{transition: 0.2s;filter:drop-shadow(0 0 1vh #fff);}

</style>

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

<div class="box"></div>

<a href="#info3"><div class="nav1"></div></a>
<a href="#info4"><div class="nav2"></div></a>
<a href="#info5"><div class="nav3"></div></a>

<div id="title">Ona Sashihai</div>
<div id="info1">
 <h1>Stats</h1>


 Name<div class="r">Ona Sashihai</div><br>
 Gender<div class="r">Female</div><br>
 Age<div class="r">28 years old.</div><br>
 Job(s)<div class="r">RDM/WHM/GNB</div><br>
 <br>
 Height<div class="r">4'10" / 147.32 cm</div><br>
 Weight<div class="r">105 lbs. / 47 kg.</div><br>
 Sexuality<div class="r">Homoflexible</div><br>
 Relationship<div class="r"><a target="_blank" href="https://roleplay.chat/profile.php?user=Nara." title="Open!">Happily married.~</a></div><br>
 <br>
 Birthplace<div class="r">Azim Steppe</div><br>
 Nameday<div class="r">9th Sun of the 5th Umbral Moon</div><br>
 Race<div class="r">Au Ra, Xaela - Seeker, Miqo'te</div><br>
 Home<div class="r">Kugane, Hingashi</div><br>
</div>
<div id="info2">
 <h1>OOC</h1>
 <ol>
 <li>This is an FFXIV OC, of course.</li><br>
 <li>In-Room Approach is MANDATORY.</li><br>
 <li>Don't DM me a starter post.</li><br>
 <li>Character and <a target="_blank" href="https://i.imgur.com/7PIk2oz.png">Artwork</a> is mine.</li><br>
<li><a target="_blank" href="https://www.f-list.net/c/bleckness">F-list</a> for shits n' giggles.</li>
 <li>This layout was constructed by <a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows.</a> Please do not steal or appropriate this layout.</li>

</div>


<div id="info3">
 <h1>In the Beginning...</h1>
 <p>The world was whole.</p>
 <p>People were free. Free from the fear of hostility, free from the entrapments of mortality. Free to live, love, laugh, and create.</p>
 <p>But then, the world was face with a terrible threat. A Calamity, that would shake the lands, and tear them asunder. That would surely mean the end to this everlasting peace the people had known. So the governing authority came together and decided that, with their collective power, they would bring about the creation of a consciousness. The world's consciousness, so that it may defend itself from this calamity. And it worked. The people, with their collective abilities, averted this calamity.
 </p>
 <p>Zodiark was born. And those who brought about his creation meant for him to continue his existence. But there was some who felt that Zodiark should be kept in check. Those who felt this way went about creating a second great being: Hydaelyn.
 </p>
 <p>These two great beings embodied a great dichotomy. Darkness and Light.
 And, as this dichotomy is wont to do, they came at odds. And this conflict brought about yet another calamity. One that the first solution wouldn't be able to solve.
 This calamity literally shattered the world into thirteen shards, each one a reflection of the original world, and each world's people only a fraction of the original peoples which inhabited the original world.</p>
 <p>The Source, the remnant from which the shards all split from, is where Ona comes from. A Xaela, hailing from the eastern province of Hingashe. She was adopted when she was a baby, raised by Hyur parents in a village outside of Kugane. In her early childhood, her family moved to Kugane, where they opened a small clothier's shop. The time Ona spent in the shop was spent either learning the merchant's trade or learning how to make clothes. Talents she'd keep with her, although talents that would go out of practice.
 </p>
 <p>Years later, in her early adulthood, she'd make for the western world. Eorzea, where she'd begin her life as an adventurer. Giving help to the helpless, and to begin her training with the lance, and to eventually become a dragoon.</p>
<br>
<p>Now, in the present, Ona is a veteran adventurer. She is married to the love of her life, and has given birth to a beautiful baby girl, Suka. However, through a poor choice of wording involving 'black cat' and 'All Saints' Wake', the pixies of Il Mheg have turned Ona into a Miqo'te, and the former Xaela is now adjusting to her new body and its quirks.

</div>
<div id="info4" class="appear">
 <h1>Friends</h1>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Nara."><img src="https://i.imgur.com/hyJadKT.png" class="friend"></a>
 <div class="r">Nara -<br>Wife and Lover.<br>
 My other, better half,<br>
 whom I could never do without.</div><br>
 <br><br>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Tephrite"><img src="https://i.imgur.com/ACmpe7R.jpg?1" class="friend"></a>
 <div class="r">Tephrite -<br>Steppe Brother!<br>
 A total dork, <br>
 but an awesome person.</div><br>
 <br><br>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=ADjudicator"><img src="https://i.imgur.com/00V69ae.png?1" class="friend"></a>
 <div class="r">Laine -<br>Steppe sister!<br>
 Sister from another mister, <br>
 and a pretty fantastic individual.</div><br>
 </div>

</div>
<div id="info5" class="appear">Three</div>