Amiya

<style>
@import url('https://fonts.googleapis.com/css?family=Exo+2|Oxanium|Spartan&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&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/tgLAdw0.png);
background-color: #2e3136;
}

#image{
position: fixed;
bottom: 10vh;
right: 10vw;
z-index: 5;
border: .15vh #fff solid;
box-shadow: 0 0 .5vh #000;
}

#image img{
height: 80vh;
}

#icon{
position: fixed;
top: 12vh;
right: 40vw;
z-index: 6;
transition: 0.3s;
}
#icon img{
height: 15vh;
}

#leftarrow{
position: fixed;
z-index: 6;
width: 0;
height: 0;
border-top: 3vh solid transparent;
border-bottom: 3vh solid transparent;
border-right: 3vh solid #fff;
top: 15vh;
right: 47vw;
transform: rotate( 30.5deg);
transition: 0.3s;
}

#leftarrow:hover{
transition: 0.3s;
top: 14.5vh;
right: 47.25vw;
}

#rightarrow{
position: fixed;
z-index: 6;
width: 0;
height: 0;
border-top: 3vh solid transparent;
border-bottom: 3vh solid transparent;
border-left: 3vh solid #fff;
top: 15vh;
right: 40vw;
transform: rotate( -30.5deg);
transition: 0.3s;
}


#rightarrow:hover{
transition: 0.3s;
top: 14.5vh;
right: 39.75vw;
}

#bottomarrow{
position: fixed;
z-index: 6;
width: 0;
height: 0;
border-top: 3vh solid #fff;
border-bottom: 3vh solid transparent;
border-left: 3vh solid transparent;
border-right: 3vh solid transparent;
top: 28.25vh;
right: 42.75vw;
transition: 0.3s;
}

#bottomarrow:hover{
transition: 0.3s;
top: 28.75vh;
}

#bar{
position: fixed;
background: #70deff;
box-shadow: 0 0 1vh #000;
width: 100vw;
bottom: 15vh;
height: 20vh;
right: 0vw;
z-index: 1;
}


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


#info1, #info2, #info3{
position: fixed;
padding: 1%;
background: rgba(0, 0, 0, 0.95);
border: .15vh #fff solid;
box-shadow: 0 0 1vh #000;
height: 40vh;
width: 40vw;
bottom:20vh;
left: 10vw;
color: #fff;
font-family: 'Noto Sans';
font-size: 1.75vh;
overflow: auto;
}

#info1{
background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(https://i.imgur.com/4bPhwTc.png);
background-size: cover;
background-position: center;
}

#info2{
background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(https://i.imgur.com/qaK0Q4p.jpg);
background-size: cover;
background-position: center;
}

#info3{
background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(https://i.imgur.com/0RE1anu.png);
background-size: cover;
background-position: center;
}

h1{
font-family: 'Oxanium';
font-size: 4.5vh;
}

h2{
font-size: 2.5vh;
border-bottom: .15vh #fff solid;
}

.r{float:right}

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

a:hover{
color: #ff0d0d;
transition: 0.25s;
}

</style>

<div id="image"><img src="https://i.imgur.com/g43hKrz.png"></div>
<a href="#reset"><div id="icon"><img src="https://i.imgur.com/kCf62r6.png"></div></a>
<div id="bar"></div>
<a href="#info1"><div id="leftarrow"></div></a>
<a href="#info2"><div id="rightarrow"></div></a>
<a href="#info3"><div id="bottomarrow"></div></a>


<div id="info1" class="appear">
<h1>Amiya</h1>
<h2><img src="https://i.imgur.com/tgbuI5p.png"> Profile</h2>
<p>The public face of Rhodes Island and its top executive. Although Amiya appears to be a young and inexperienced girl, she is universally trusted and highly qualified for her position.
Amiya now leads the island in fighting for the future of the Infected and striving to exorcise the dark shadow of Originium from the land.</p>
<h2><img src="https://i.imgur.com/tgbuI5p.png"> Clinical Analysis</h2>
<p>Imaging test for this Operator showed blurry outline of internal organs with visible unusual dark spots. Unusually high concentration of Originium particles were present in her circulation, indicating signs of infection and confirming her as infected at this stage.</p>
<p>[Cell-Originium Assimilation] 19%</p>
<p>[Blood Originium-Crystal Density] 0.27u/L</p>
<h2><img src="https://i.imgur.com/tgbuI5p.png"> ? ? ?</h2>
? ? ? ? ? ?
</div>


<div id="info2" class="appear">
<h1>Dossier</h1>
Name<div class="r">Amiya</div><br>
Date of Birth<div class="r">Dec. 23</div><br>
Place of Birth<div class="r">Rim Billton</div><br>
Race<div class="r">Cautus/Chimera. <a target="_blank" href="https://i.redd.it/rf6tjs2ovfk41.png">Pertaining to her ears.</a></div><br>
Age<div class="r">18</div><br>
Height<div class="r">142 cm</div><br>
Role<div class="r">Caster</div><br>
Marital<div class="r"><a target="_blank" href="https://roleplay.chat/profile.php?user=Chien">Angry Dragon</a></div><br>
Status<div class="r">Standby</div><br>
</div>


<div id="info3" class="appear">
<h1>Out of Character</h1>
<ol>
<li>Layout is mine. i worked very hard on it, please do not steal.</li>
<li>Neither the character nor her art are mine, both belong to their respective developers/artists.</li>
<li>I will write as Amiya to the best of my ability.</li>
<li>Amiya belongs to the game Arknights.</li>
<li><a target="_blank" href="https://imgur.com/a/H4SEWbE">Extra Images</a></div>