Yvetta

<style>
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Allura|Cormorant|Cormorant+Infant|Cormorant+SC|Italianno&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;}


#image{
position: fixed;
top: 5vh;
left: 15vw;
}

#image img{
height: 90vh;
}

#titlebar{
position: fixed;
background: #612b2b;
z-index: 1;
height: 4vh;
width: 35vw;
top: 30vh;
right: 15vw;
box-shadow: .5vh .5vh 1vh #000;
}

#title{
position: fixed;
z-index: 2;
text-align: center;
height: 12vh;
width: 35vw;
top: 20vh;
right:15vw;
font-family: 'Italianno';
font-size: 15vh;
color:#a86262;
text-shadow: 0vh 1vh 2vh #000;
}

#box{
position: fixed;
z-index: 0;
background: rgba(143, 33, 33, 0.7);
height: 45vh;
width: 27vw;
top: 32vh;
right: 22vw;
box-shadow: .5vh .5vh 1vh #000;
}

#info1, #info2, #info3, #info4{
position: fixed;
text-align: center;
height: 40vh;
width: 26vw;
top: 35vh;
right: 22.5vw;
font-family: 'Cormorant Infant';
font-size: 2.25vh;
color: #fff;
text-shadow: 0 1vh 2vh #000;
}

.appear{opacity: 0; z-index: 3; transition: 2s;overflow: auto;}
.appear:target{opacity: 1; z-index: 6; transition: 2s;}

#nav{
position: fixed;
z-index: 0;
background: rgba(153, 57, 57, 0.7);
height: 25vh;
width: 5vw;
top: 32vh;
right: 16vw;
box-shadow: .5vh .5vh 1vh #000;
}

#nav1, #nav2, #nav3, #nav4{
position: fixed;
text-align: center;
font-family: 'Cormorant SC';
font-size: 1.75vh;
color: #fff;
height: 2.5vh;
width: 5vw;
right: 16vw;
transition: 0.5s;
}

#nav1{top: 38vh;}
#nav1:hover{transition:0.5s;background: #fff;color:#000;font-weight: bolder;}
#nav2{top: 42vh;}
#nav2:hover{transition:0.5s;background: #fff;color:#000;font-weight: bolder;}
#nav3{top: 46vh;}
#nav3:hover{transition:0.5s;background: #fff;color:#000;font-weight: bolder;}
#nav4{top: 50vh;}
#nav4:hover{transition:0.5s;background: #fff;color:#000;font-weight: bolder;}

h1{
font-family: 'Allura';
font-size: 4vh;
font-weight: lighter;
}

#credit {
z-index:1;
position:fixed;
height:20vh;
bottom:0%;
right: 1vw;
animation: credit 1s 1;
animation-fill-mode: both;
animation-delay: 2s;
}

</style>

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

<div id="titlebar"></div>
<div id="title">Yvetta de Fiore</div>
<div id="nav"></div>
<div id="box"></div>


<a href="#info1"><div id="nav1">Dossier</div></a>
<a href="#info2"><div id="nav2">Description</div></a>
<a href="#info3"><div id="nav3">Notes</div></a>
<a href="#info4"><div id="nav4">OOC</div></a>


<div id="info1" class="appear">
<h1>Dossier</h1>
Her name is Yvetta de Fiore.<br>
She is thirty-five years old.<br>
Her gender is Female.<br>
She is Italian. Florencian, to be specific.<br>
<br>
Her height is 170 centimeters.<br>
Her weight is 64 kilograms.<br>
Her hair is a platinum blonde.<br>
Her eyes are a ruby red.<br>
<br>
She works as a professor at the Crimea State Medical University.<br>
Her preference is virtually nonexistant between either genders.<br>
She is, and always has been, single.<br></div>


<div id="info2" class="appear">
<h1>Her Story</h1>
<p>Yvetta de Fiore was born to Comillo and Amanda de Fiore, born and raised in the town of Florence, Italy. She grew up a quiet child, keeping to a small group of two to three friends through primary school all the way to high school. She was accepted into the Sapienza University of Rome due to her exemplary grades, but ended up losing contact with her childhood friends, who attended the University of Florence. </p>
<p>After attending the university for eight years, and undergoing active internship for five more years, Yvetta finally achieved her medical degree in Emergency Medicine. She went on to move to Simferepol, Crimea, where she began teaching at the Crimea State Medical University.</p>
</div>


<div id="info3" class="appear">
<h1>Notes and Headcanons</h1>
Played the trumpet in her university's wind ensemble.<br>
<br>
Particularly enjoys hot cocoa as a relaxing drink.<br>
<br>
Is a night owl.
</div>


<div id="info4" class="appear">
<h1>Out of Character</h1>
IC =/= OOC<br>
<br>
Story is nice. Smut is also nice. I prefer a mixture of both.<br>
<br>
Golden Rule.<br>
<br>
In-Room Approach is preferred.
</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.">
<img src="https://i.imgur.com/A9wLMgS.png" id="credit"/>
</a>