From Shadows, 2021

<style>
 @import url('https://fonts.googleapis.com/css?family=Aguafina+Script|Dynalight|Great+Vibes|Italianno|Meie+Script|Parisienne|Petit+Formal+Script|Ruthie&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300|Chathura|Marvel|Open+Sans:300&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&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;}


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

 #image{
 position: fixed;
 z-index: 5;
 top: 0vh;
 right: 5vw;
 filter: drop-shadow(0 0 2vh #fff);
 }

 #image img{
 height: 100vh;
 }

 #bar{
 position: fixed;
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
 z-index: 2;
 height: 30vh;
 width: 100vw;
 bottom: 20vh;
 left: 0vh;
 }


 #box{
 position: fixed;
 background: rgba(91, 72, 133, 0.5);
 box-shadow: 0 0 1vh #5b4885;
 z-index: 2;
 height: 45.5vh;
 width: 40vw;
 bottom: 25vh;
 left: 10vw;
 }

 #blake, #belladonna{
 position: fixed;
 z-index: 5;
 height: 15vh;
 font-family: 'Cinzel Decorative';
 font-size: 9.5vh;
 color: #0e061f;
 transition: 0.4s;
 text-shadow: 0 0 1vh #0e061f;
 }

 #blake{
 top: 28.5vh;
 text-align: left;
 left: 10vw;
 width: 18vw;
 }
 #blake:hover{
 color: #fff;
 text-shadow: 0 0 1vh #fff;
 transition: 0.4s;
 }
 #belladonna{
 bottom: 19.5vh;
 text-align: right;
 left: 15vw;
 width: 35vw;
 }
 #belladonna:hover{
 color: #fff;
 text-shadow: 0 0 1vh #fff;
 transition: 0.4s;
 }

 #nav1, #nav2, #nav3, #nav4, #nav5{
 position: fixed;
 background: #0e061f;
 box-shadow: 0 0 1vh #0e061f;
 z-index: 6;
 height: 4vh;
 width: 4vh;
 top: 30.5vh;
 transition: 0.5s;
 transform: rotate(45deg);
 }

#nav1{
 left: 35.5vw;
}
#nav1:hover{
 background: #fff;
 box-shadow: 0 0 1vh #fff;
}

#nav2{
 left: 38.5vw;
}
#nav2:hover{
 background: #fff;
 box-shadow: 0 0 1vh #fff;
}

#nav3{
 left: 41.5vw;
}
#nav3:hover{
 background: #fff;
 box-shadow: 0 0 1vh #fff;
}

#nav4{
 left: 44.5vw;
}
#nav4:hover{
 background: #fff;
 box-shadow: 0 0 1vh #fff;
}

#nav5{
 left: 47.5vw;
}
#nav5:hover{
 background: #fff;
 box-shadow: 0 0 1vh #fff;
}



#musicslice{
 position: fixed;
 z-index: 6;
 height: 10vh;
 width: 10vh;
 bottom: 25.5vh;
 left: 10.5vw;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 0s;
 opacity: .8;
 z-index: 10;
 zoom: 100%;
 filter: drop-shadow( 0 0 1vh #000);
}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 0px 0px 0px transparent;}

#emblem{
position: absolute;
 position: fixed;
 z-index: 6;
 height: 10vh;
 width: 10vh;
 bottom: 25.5vh;
 left: 10.25vw;
background-image:url(https://i.imgur.com/XIN0LsS.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center bottom -2px;
 background-color: transparent;
}

#emblem:hover{
 transition: 0.4s;
 filter: drop-shadow( 0 0 1vh #fff);
}


#page1, #page2, #page3, #page4{
 position: fixed;
 border: .25vh #000 solid;
 box-shadow: 0 0 1vh #000;
 padding: .5%;
 height: 22.5vh;
 width: 34vw;
 left: 12.5vw;
 bottom: 35.5vh;
 font-family: 'Open Sans';
 font-size: 1.75vh;
 color: #fff;
 text-shadow: 0 0 1vh #fff;
 overflow: auto;
}


.appear{opacity: 0;z-index: 3; transition: 1s;}
.appear:target{opacity: 1;z-index: 7;transition: 1s;}
.r{float:right;}

h1{
 font-family: 'Dynalight';
 font-size: 4vh;
 font-weight: lighter;
 text-align: center;
}

o{
filter: blur(5px);
}

a{
color: #fff;
text-decoration: underline;
transition: 0.3s;
}
a:hover{
transition: 0.3s;
color: #3e2e4f;
text-shadow: 0 0 1vh #3e2e4f;
}


#img1, #img2, #img3, #img4, #img5, #imgetc{
position: fixed;
background: #000;
z-index: 1;
top: 78vh;
height: 6vh;
width: 5vw;
animation: image 2s 1;
animation-fill-mode: both;
transition: 0.5s;
}

#img1{
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
left: 12vw;
transition: 0.5s;
animation-delay: 3s;
}
#img1:hover{
background: url(https://i.imgur.com/NiK2DK0.jpg);
background-size: cover;
background-position: top;
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img2{
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
left: 18vw;
transition: 0.5s;
animation-delay: 3.2s;
}
#img2:hover{
background: url(https://i.imgur.com/4gT82pr.jpg);
background-size: cover;
background-position: top;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img3{
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
left: 24vw;
transition: 0.5s;
animation-delay: 3.4s;
}
#img3:hover{
background: url(https://i.imgur.com/muBvPXL.jpg);
background-size: cover;
background-position: top;
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img4{
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
left: 30vw;
transition: 0.5s;
animation-delay: 3.6s;
}
#img4:hover{
background: url(https://i.imgur.com/4TJKBe5.png);
background-size: cover;
background-position: top;
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img5{
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
left: 36vw;
transition: 0.5s;
animation-delay: 3.8s;
}
#img5:hover{
background: url(https://i.imgur.com/tRxjYaS.jpg);
background-size: cover;
background-position: top;
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#imgetc{
 background: #0d071a;
 box-shadow: 0 0 1vh #000;
left: 42vw;
transition: 0.5s;
animation-delay: 4s;
}
#imgetc:hover{
background: url(https://i.imgur.com/eVpWZTp.png);
background-color: #291d3b;
background-size: 25%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

</style>
</div>
</div>
<div id="background"></div>
<div id="bar"></div>
<div id="image"><img src="https://i.imgur.com/yAeyipj.png"></div>
<a target="_blank" href="https://www.youtube.com/watch?v=Pn2-oY1cX7Y"><div id="emblem"></div></a>
<div id="box"></div>
<div id="blake">Blake</div>
<div id="belladonna">Belladonna</div>
<a href="#page1"><div id="nav1"></div></a>
<a href="#page2"><div id="nav2"></div></a>
<a href="#page3"><div id="nav3"></div></a>
<a href="#page4"><div id="nav4"></div></a>
<a href="#page5"><div id="nav5"></div></a>


<a target="_blank" href="https://i.imgur.com/NiK2DK0.jpg"><div id="img1"></div></a>
<a target="_blank" href="https://i.imgur.com/4gT82pr.jpg"><div id="img2"></div></a>
<a target="_blank" href="https://i.imgur.com/muBvPXL.jpg"><div id="img3"></div></a>
<a target="_blank" href="https://i.imgur.com/4TJKBe5.png"><div id="img4"></div></a>
<a target="_blank" href="https://i.imgur.com/tRxjYaS.jpg"><div id="img5"></div></a>
<a target="_blank" href="https://imgur.com/a/9J2xJfh"><div id="imgetc"></div></a>


<div id="page1" class="appear">
 <h1>My name is Blake Belladonna.</h1>

 <p>I was born to Kali and Ghira Belladonna, the chief and chieftaness of Menagerie, were I was raised and where I lived for seventeen years. Before entering Beacon Academy to be a huntress, I trained with my father to fight the creatures of Grimm, and he taught me how to use my weapon, Gambol Shroud. Upon entering Beacon Academy, I was assigned to a team known as Team RWBY, with my teammates Ruby Rose, Weiss Schnee, and Yang Xiao Long.</p>
 <p>After studying at the academy with my team for four years, I graduated from my class with flying colors, was granted a Huntress's license, and was sent out into the world. While my main goal at Beacon was to be taught in hunting the creatures of Grimm, I also sought lessons in musicianship, and was taught how to play a multitude of instruments. After my graduation from Beacon, I moved into an apartment in Vale, where I've lived ever since. I am regularly sent on assignments to defend the city from Grimm, and occasionally perform at bars for pocket money.</p>
 <p>Lately, though, I've been finding myself gravitating around Casinos and Clubs, meeting new people, and making new friends, and forming new relationships. It's been a bit of an eye-opening experience, but not one that I'd take back.</p>
</div>

<div id="page2" class="appear">
 <h1>Dossier</h1>
Name:<div class="r"> Blake Belladonna</div><br>
Age:<div class="r"> Twenty-five years old</div><br>
Gender:<div class="r">Female</div><br>
Race:<div class="r"> Feline Faunus</div><br>
Height:<div class="r"> Five feet, seven inches tall</div><br>
<br>
Occupation(s):<div class="r"> Huntress, Musician</div><br>
Orientation:<div class="r">Homosexual</div><br>
Status:<div class="r"> Going it solo once more.</div><br>
Preference:<div class="r"> Competence.</div><br>
<br>
</div>

<div id="page3" class="appear">
 <h1>Notes and Headcanons</h1>
<li>Hair style tends to vary from the typical Volume 1-6 Waist-Length to the Volume 7/8 shoulder-length cut.</li>
<br>
<li>Chill demeanor unless you're doing something ridiculously stupid, or morally sour.</li><br>

<li>Appreciates people having a sense of humor, a sense of decency, and most of all, having common sense. Which, ironically, is not so common any more.</li><br>

<li>Has been through some shit. Don't give her any more.</li>
</div>

<div id="page4" class="appear">
 <h1>OOC</h1>
<ol>
<li>I made this code.</li>
<li>In-Room Approach is <u>mandatory.</u> I'm not going to respond to any random DMs from someone in PM Only. If you aren't going to bother interacting with me in room, don't bother DMing me.</li>
<li>I'm very picky as to who I roleplay with. Have a damn profile, for starters. If I see 'No Profile Yet', I am automatically going to ignore you.</li>
<li>If you have a problem with how I play this Blake, who is part of an <b>Alternate Universe which is not Canon</b>, then take your comments and <o>shove them up your ass.</o></li>
<li>Thanks so much for taking a look at my profile.</li>
</div>