Skyfire

<style>
@import url('https://fonts.googleapis.com/css?family=Almendra|Almendra+SC|Bellefair|Junge|Lustria|Neuton:200|Qwigley|Ruthie|Scheherazade&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;
background: url(https://i.imgur.com/3mFOMsw.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
bottom: 0vh;
left: 15vw;
width: 30vw;
transition: 1s;
}

#image:hover{
transition: 1s;
background: url(https://i.imgur.com/IsN14a6.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#titlebar{
position: fixed;
background: #d63200;
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: 16vh;
right:15vw;
font-family: 'Ruthie';
font-size: 20vh;
color:#ff7300;
text-shadow: 0vh 1vh 2vh #000;
}

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

#info1, #info2, #info3, #info4{
position: fixed;
height: 40vh;
width: 26vw;
top: 35vh;
right: 22.5vw;
font-family: 'Almendra';
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(61, 36, 15, 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: 'Almendra 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: 'Qwigley';
font-size: 6vh;
font-weight: lighter;
}

h2{
font-family: 'Neuton';
font-size: 3vh;
font-weight: lighter;
border-bottom: 2px #fff solid;
}

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

a{
color: #fff;
transition: 0.4s;
}

a:hover{
color: ##ffa6a6;
transition: 0.4s;
text-shadow: 0 0 1vh #ffa6a6;
}

</style>

<a target="_blank" href="https://imgur.com/a/g7XdwSP"><div id="image"></div></a>

<div id="titlebar"></div>
<div id="title">Skyfire</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"><center>
<h1>Dossier</h1>
Designation Codename "Skyfire".<br>
Female, Feline, Born in Victoria on June 1st.<br>
Aged approximately 25 years.<br>
<br>
162 cm. in height.<br>
52 kg in weight.<br>
Hair is chestnut brown.<br>
Eyes are a dark amber.<br>
<br>
She is an Operator of the Casting class.<br>
On standby.<br>
<br>
Found herself in love with <a target="_blank" href="profile.php?user=Siege">Siege.</a></div>


<div id="info2" class="appear">
<center><h1>Description</h1></center>
<h2>Profile</h2>
<p>Skyfire is affiliated with King's Wand, the central organ of Foxtail, an Originium power research institute. A tech specialist from Victoria, she holds degrees in geology and Originium geology, and is respected in fields of Originium study both practical and theoretical.
Currently the Chief Caster stationed at Rhodes Island on loan from the King's Wand, Skyfire's mission is to jointly research Originium while providing combat mission assistance.
</p>
<h2>Clinical Analysis</h2>
<p>Imaging test for this Operator showed clear outlines of internal organs without any unusual dark signs. No unusual traces of Originium particles present in her system, no signs of infection, confirming her as Non-infected.</p>
<p>"That's a sure sign of a diva who hasn't seen much of the real world, if you ask me. She needs a lesson in the grim reality of war and just how hard the Infected have it. Skyfire should be given more hands-on combat missions to knock some sense into her."<br>
—Medic Operator Gavial</p>
<p>"A reminder, Gavial, that all physical examinations are public record."<br>
—Dr. Kal'tsit</p>
<h2>Archive 1</h2>
<p>Operator Skyfire's Originium ability far exceeds that of peers of her age. She excels at pulling fire into a huge mass and incinerating clustered targets with it.
In the process, the flame also disintegrates her outfit, even setting her hair ablaze, but never damages her.
With intense heat a brilliant glow, her power manifests like the sun itself, hence her codename.
With such immense power, the talented yet inexperienced Skyfire still cannot fully control it.
Listen for the fire alarm anywhere Skyfire may be present.</p>

</div>


<div id="info3" class="appear">
<center><h1>Notes and Headcanons</h1>

</div>


<div id="info4" class="appear">
<center><h1>Out of Character</h1>
IC =/= OOC<br>
<br>
Character is from Arknights.<br>
<br>
Golden Rule.<br>
<br>
Smut or Story. Either is fine.<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>