Frostnova

<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: rgb(138, 169, 170);
 overflow: hidden;
 }

 #background{
 position: fixed;
 background: url(https://i.imgur.com/ohX4nlB.jpg);
 background-size: cover;
 background-position: center;
 z-index: -1;
 filter: blur(15px);
 height: 110vh;
 width: 110vw;
 top: -5vh;
 left: -5vw;
 }


 #nav1, #nav2, #nav3, #nav4, #nav5, #nav6{
 position: fixed;
 box-shadow: 0 0 3vh #000;
 height: 70vh;
 width: 5vh;
 bottom: 5vh;
 transition: left .75s, width .75s, z-index .75s .75s;
 }

 #nav1{
 background: url(https://i.imgur.com/imy2RRs.png);
 background-position: center;
 background-size: auto 70vh;
 left: 42vw;
 z-index: 4;
 }

 #nav1:hover{z-index: 10;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

 #nav2{
 background: url(https://i.imgur.com/XNIfJ7J.png);
 background-position: center;
 background-size: auto 70vh;
 left: 45vw;
 z-index: 5;
 }

 #nav2:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

 #nav3{
 background: url(https://i.imgur.com/ZonQpAX.jpg);
 background-position: center;
 background-size: auto 70vh;
 left: 48vw;
 z-index: 6;
 }

 #nav3:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

 #nav4{
 background: url(https://i.imgur.com/akyeblZ.jpg);
 background-position: center;
 background-size: auto 70vh;
 left: 51vw;
 z-index: 7;
 }

 #nav4:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

 #nav5{
 background: url(https://i.imgur.com/GGglCWF.jpg);
 background-position: center;
 background-size: auto 70vh;
 left: 54vw;
 z-index: 8;
 }

 #nav5:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

 #nav6{
 background: url(https://i.imgur.com/6tXyS9w.jpg);
 background-position: center;
 background-size: auto 70vh;
 left: 57vw;
 z-index: 9;
 }

 #nav6:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}


 .info{
 position: absolute;
 padding: .5%;
 height: 88%;
 width: 88%;
 bottom: 5%;
 left: 5%;
 background: rgba(0, 0, 0, 0.5);
 opacity: 0;
 transition: opacity 0.75s;
 overflow: auto;
 font-family: 'Helvetica';
 font-size: 1.75vh;
 color: #fff;
 transition: opacity 0.75s;
 }

 .info:hover{opacity: 1;transition: opacity 0.75s 0.75s;}

 .r{float: right;}

 #title{
 position: fixed;
 z-index: 11;
 text-align: center;
 padding: 1%;
 height: 20vh;
 width: 50vw;
 top: 5vh;
 right: 25vw;
 }



 t{
 font-family:'Ailerons';
 font-size: 20vh;
 background: url(https://i.imgur.com/qHRLdBJ.gif);
 background-size: 110%;
 background-position: left;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 0 1vh #e8fbff);
 }

 h1{
 font-family: 'Calligraphy Dry';
 font-size: 8vh;
 font-weight: lighter;
 }

 a{
 text-decoration: underline;
 transition: 0.4s;
 color: #fff;
 }

 a:hover{
 transition: 0.4s;
 color:#3d4727;
 }

 </style>

 <div id="background"></div>
 <div id="title"><t>Frostnova</t></div>
 <div id="nav1"><div class="info">
 <center><h1>Through the Ice</h1></center>
 <p>A Caster, originally one of Reunion's squad leaders, who has defected from Reunion to join Rhodes' Island. Little is known about FrostNova other than that she was a member of Reunion who led the Yeti Squadron. Her Originium Arts power is noted to be similar to that of Talulah, though she uses ice-based powers instead of fire, and her cold, ruthless persona gave her the nickname "Yeti".</p>
 </div></div>


 <div id="nav2"><div class="info">

 <center><h1>Dossier</h1></center>
 Name:<div class="r">Frostnova</div><br>
 Race:<div class="r">Cautus</div><br>
 Gender:<div class="r">Female</div><br>
 Age:<div class="r">Late Teens</div><br>
 <br>
 Height:<div class="r">161cm</div><br>
 Weight:<div class="r">49kg</div><br>
 Hair:<div class="r">Snow White</div><br>
 Eyes:<div class="r">Silver Grey</div><br>
 <br>
 Class:<div class="r">Caster</div><br>
 Orientation:<div class="r">Unsure</div><br>
 Marital:<div class="r">Singular</div><br>
 Status:<div class="r">Standby.</div><br>

 </div></div>


 <div id="nav3"><div class="info"></div></div>


 <div id="nav4"><div class="info"></div></div>


 <div id="nav5"><div class="info"></div></div>


 <div id="nav6"><div class="info">
 <h1>Out of Character</h1>
 <ol>
 <li>IC =/= OOC</li>
 <li>Don't randomly DM</li>
 <li>Story before Smut.</li>
 <li>Don't be a dick.</li>
 <li>Golden Rule.</li>
 </div></div>