Atalanta Alter

<style>

@import url('https://www.themonster.xyz/styles/fancy-fonts.css');
::-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:#000;
}

 #image{
 position: fixed;
 bottom: 0vh;
 left: 0vw;
 }

 #image img{
 height: 100vh;
 }


 @keyframes box{
 from{right:-50vw;}
 to{right: 8vw;}
 }

 @keyframes title{
 from{right:-50vw;}
 to{right: 6vw;}
 }

 @keyframes nav{
 from{right:-50vw;}
 to{right: 41vw;}
 }



 #nav1{
 z-index: 6;
 position: fixed;
 background: url(https://i.imgur.com/EdJCJ3L.gif);
 background-size: cover;
 height: 12vh;
 width: 12vw;
 top: 18vh;
 right: 41vw;
 animation: nav 1s 1;
 animation-fill-mode: both;
 animation-delay: 1s;
 transition: 0.5s;
 }

 #nav1:hover{
 box-shadow: 0vh 0vh 2vh #cbaaff;
 transition: 0.5s;
 }

 #nav2{
 z-index: 6;
 position: fixed;
 background: url(https://66.media.tumblr.com/6de1cef7375e1988f4178e6a69c265b3/tumblr_p0chj9clAF1tw63yro3_500.gif);
 background-size: cover;
 height: 12vh;
 width: 12vw;
 top: 34vh;
 right: 41vw;
 animation: nav 1s 1;
 animation-fill-mode: both;
 animation-delay: 1.25s;
 transition: 0.5s;
 }

 #nav2:hover{
 box-shadow: 0vh 0vh 2vh #cbaaff;
 transition: 0.5s;
 }


 #nav3{
 z-index: 6;
 position: fixed;
 background: url(https://i.imgur.com/Krgu7Dd.gif);
 background-size: cover;
 height: 12vh;
 width: 12vw;
 top: 50vh;
 right: 41vw;
 animation: nav 1s 1;
 animation-fill-mode: both;
 animation-delay: 1.5s;
 transition: 0.5s;
 }


 #nav3:hover{
 box-shadow: 0vh 0vh 2vh #cbaaff;
 transition: 0.5s;
 }

 #box{
 position: fixed;
 z-index: 10;
 padding: 1%;
 box-shadow: 1vh 1vh 6vh #4e4c51;
 background: linear-gradient(40deg, #14101e, #211b33, #14101e);
 height: 50vh;
 width: 30vw;
 top: 15vh;
 right: 8vw;
 font-family: 'Odachi';
 font-size: 2.8vh;
 color: #fff;
 text-shadow: .2vh .2vh .2vh #000;
 animation: box 1s 1;
 animation-fill-mode: both;
 animation-delay: .25s;
 }

 #title{
 position: fixed;
 z-index: 11;
 padding: 1%;
 height: 22vh;
 width: 50vw;
 bottom: 10vh;
 right: 6vw;
 border: 0px #fff solid;
 animation: title 1s 1;
 animation-fill-mode: both;
 animation-delay: .5s;
 }



 t{
 font-family:'Signature';
 font-size: 16vh;
 background: url(https://thumbs.gfycat.com/ClearWelllitEmu-max-1mb.gif);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0.25vh 0.25vh .5vh #4e4c51);
 }


 h1{
 font-family: 'Skytree';
 font-size: 5vh;
 }


a{
text-decoration: none;
transition: 0.4s;
color:#829fce;
}

a:hover{
transition: 0.4s;
color: #edff93;
}


</style>

<a href="#one"><div id="nav1"></div></a>
<a href="#two"><div id="nav2"></div></a>
<a href="#three"><div id="nav3"></div></a>


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

<div id="title"><t>Atalanta Alter</t></div>

<div id="box">
<div style="height: 100%; overflow-y: hidden;">
<a name="one"></a>
<div style="width:100%; height: 100%; overflow: auto; " align="left">
 <h1>The Berserker</h1>
<p>Berserker's True Name is Atalanta (Alter). The appearance of Atalanta who went through a transformation due to her personal Noble Phantasm, the Pelt of the Calydonian Boar. Also known as Atalanta Metamorphosis. A rare existence who, while being Demon Beast-ified due to the Pelt of the Calydonian Boar and having her status elevated to equal an A-class Mad Enhancement, is capable of composed thinking.</p>
<p>It's not a transformation left relying fully on rage, but since she is already in a beast-like state when summoned, the rank is lower compared to the time when it's used as a Noble Phantasm.</p>

 </div>


 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <h1>Stats</h1>

Name: Atalanta.<br>
Nicknames/Titles: Cat, Berserker, Altalanta.<br>
Race: Heroic Spirit.<br>
Origin: Greek Legend.<br>
Gender: Female.<br>
Master: None.<br>
<br>
Height: 166 cm<br>
Weight: 57 kg<br>
Preference: None.<br>
Status: Alone.<br>



 </div>

 <a name="Three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <h1>Out of Character</h1>
 <ol>
 <li>Code created by yours truly.</li>
 <li>PM Friendly.</li>
 <li>Semi-Para to Para+</li>
 <li>Story+Smut</li>
 <li>I reserve the right to deny RP.</li>
 <li>No Profile = No RP</li>
 <li>Character from the Fate / Grand Order™ Universe</li>
<li><a target="_blank" href="https://imgur.com/a/4NYkEGD">Extra Images!</a>
 </ol>
 </div>




</div>
</div>