<style>
@import 'https://fonts.googleapis.com/css?family=Cinzel+Decorative|Crimson+Text';
::-webkit-scrollbar { width: 0.8vw; height: 0.8vw;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: #1414AF;}
::-webkit-scrollbar-thumb { border: 0.4vh solid #311B44; border-radius:0px; background-color: #FFFFFF;}


body{
 background-color: #000;
 background-image:url('https://i.imgur.com/W3SHdzY.jpg');
 background-size: cover;
}

#infobox{
 position: fixed;
 left: 33vw;
 top: 10vh;
 height: 80vh;
 width: 32vw;
 border: 2vh double #940912;
 overflow: hidden;
 color: #FFFFFF;
 background: rgba(0,0,0,0.9);
 text-shadow: #000000 0.3vh 0.3vh 0.3vh;
 box-shadow: #000000 0.3vh 0.3vh 0.3vh;
 font-size: 2.5vh;
 font-family: Crimson Text;
 opacity: 0;

 -webkit-animation:infoin 0.5s 1;
 animation:infoin 0.5s 1;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

 #infobox img{
 width: 100%;
}

@keyframes infoin{
from{opacity:0; top: -80vh;}
to{opacity:1; top: 10vh;}
}
@-webkit-keyframes infoin{
from{opacity:0; top -80vh;}
to{opacity:1; top: 10vh;}
}

#player{
 position: absolute;
 top:12vh;
 left:30vw;
 border-radius: 50%;
 box-shadow: #FFFFFF 0vh 0vh 1vh;
 width: 34px;
 overflow: hidden;
 background-color: #FFFFFF;
 opacity: 0;

-webkit-animation:playerin 0.5s 1;
 animation:playerin 0.5s 1;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes playerin{
from{opacity:0; top: -5vh;}
to{opacity:1; top: 12vh;}
}
@-webkit-keyframes playerin{
from{opacity:0; top -5vh;}
to{opacity:1; top: 12vh;}
}

#name{
 position: fixed;
 z-index:1;
 left: 34.5vw;
 top: 0vh;
 color: #FFF;
 text-shadow: #FFF 0vh 0vh 1vh;
 font-family: Cinzel Decorative;
 font-size: 10vh;
 opacity: 0;

 -webkit-animation:namein 0.3s 1;
 animation:namein 0.3s 1;
 animation-delay:4.9s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.9s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes namein{
from{opacity:0; top: -10vh;}
to{opacity:1; top: 0vh;}
}
@-webkit-keyframes namein{
from{opacity:0; top: -10vh;}
to{opacity:1; top: 0vh;}
}

#credit{
position: fixed;
z-index: 10;
right: 0.3vh;
bottom: 0.3vh;
background: rgba(0,0,0,0.9);
border: 0.3vh solid #940912;
color: #FFFFFF;
text-shadow: #000000 0.3vh 0.3vh 0.3vh;
font-family: Crimson Text;
font-size: 2vh;
padding: 0.5vh;
}

a{
color: #FFFFFF;
 text-decoration: none;
 transition: 0.5s;
}
a:hover{
color: #940912;
}

#introQuote{
position: fixed;
left: 0vw;
top: 0vh;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
opacity: 1;
z-index: 10;
font-family: Cinzel Decorative;
font-size: 10vh;
color: #000000;
text-shadow: #FFFFFF 0vh 0vh 1vh;

 -webkit-animation:picturein 2s 1;
 animation:picturein 2s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes picturein{
from{opacity:1;}
to{opacity:0; left: 100vw;}
}
@-webkit-keyframes picturein{
from{opacity:1;}
to{opacity:0; left: 100vw;}
}

#buttons {
 list-style-type: none;
 margin: 0vh;
 padding: 0vh;
 height: auto;
 background: #940912;
 border: 0.4vh solid #940912;
 position: absolute;
 z-index:3;
 top: 90vh;
 left: 33vw;
 overflow: hidden;
 box-shadow: #000000 0.3vh 0.3vh 0.3vh;
 font-family: Cinzel Decorative;
 opacity: 0;

 -webkit-animation:buttonsin 0.5s 1;
 animation:buttonsin 0.5s 1;
 animation-delay:4.2s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.2s;
 -webkit-animation-fill-mode:forwards;
}
#buttons a {
 transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
 display: inline;
 color:#FFFFFF;
 text-shadow: #000000 0.3vh 0.3vh 0.3vh;
 font-size: 2.4vh;
 padding: 0.5vh 0.5vh 0.5vh 0.5vh;
 text-decoration: none;
}
#buttons a:hover{
 background-color: #000000;
 color:#940912;
 text-shadow: #940912 0vh 0vh 1vh;
}

@keyframes buttonsin{
from{opacity:0; top: -1vh;}
to{opacity:1; top: 90vh;}
}
@-webkit-keyframes buttonsin{
from{opacity:0; top -1vh;}
to{opacity:1; top: 90vh;}
}

h1{
 color: #940912;
 text-shadow: 0.3vh 0.3vh 0.3vh #000;
 font-family: Play;
 font-size: 3vh;
}

hr{
 border-color: #940912;
 box-shadow: 0.3vh 0.3vh 0.3vh #000;
 width: 85%;
}

.clouds {
position:absolute;
left:0;
bottom:0;
width:100%;
height:50%;
display:block;
overflow: visible;
pointer-events: none;
opacity: 0.5;
background:transparent url('http://i.imgur.com/nptVSPv.png') repeat top center;
z-index:1;
-moz-animation:move-scrolling-front 150s linear infinite;
-ms-animation:move-scrolling-front 150s linear infinite;
-o-animation:move-scrolling-front 150s linear infinite;
-webkit-animation:move-scrolling-front 150s linear infinite;
animation:move-scrolling-front 150s linear infinite;
}

@keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-webkit-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-moz-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-ms-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:200% 0%}
}

</style>


<div class="clouds">
</div>

<div id="credit">
Code by Aishurel<br>
<a href="http://pastebin.com/khvm8x8g" target="new">Please steal!</a>
</div>

<div id="introQuote">
<div style="width:100%; height: 70%; overflow: hidden;" align="center">
<br><br>
"Always follow your inner wolf, It will lead you to where you truly belong."
</div>
</div>

<div id="buttons">
<center>
<a href="#one">Home</a>
<a href="#two">Stats</a>
<a href="#three">Details</a>
<a href="#four">OOC</a>
</center>
</div>

<div id="name">
Jasmine
</div>

<center>
<div id="infobox">
<div style="height: 100%; overflow-y: hidden;">


<a name="one"></a>
<div style="width:100%; height: 100%; overflow: hidden; " align="center">

<img src="https://s-media-cache-ak0.pinimg.com/736x/f8/f1/4f/f8f14f366ea860a71a54a87bdb966626.jpg"style="width:425px;height:525px;">
</div>

<a name="two"></a>
<div style="width:90%; height: 100%; overflow: auto;" align="center">

<h1>Stats</h1>
<hr>
<p align = "left">
<i>
Name: Jasmine Hartwell<br>
Gender: Female<br>
Apparent Age: 22<br>
Height: 5'10"<br>
Orientation: Heterosexual<br>
Relationship: Single/Un-Mated<br>
Occupation: Delta in Dark Howls Pack
</i>
</p>

<h1>Powers</h1>
<hr>
<p align = "left">
<i>
Ability one: possess smell, hearing, and sight  that are superior to humans, can even sense others of her kind as well as Vampires.<br>
Ability two: Display inhuman physical strength, speed, reflexes, endurance and agility even when in human form.<br>
Ability three: Can shapeshift with little to no pain at all and only the very first shift requires a full moon.<br>
Ability four: Heals faster than a normal human being.
</i>
</p>

<h1>Likes&Dislikes</h1>
<hr>
<p align = "left">
<i>
Likes: Writing in her journal, Running in both her human form and her wolf form, Cooking and learning new recipes, Dancing either by herself or with others.<br>
Dislikes: Rude People that think there stuff don't stink, Bullies that pick on someone weaker than them, Being snuck up on, brings up bad memories make sure you announce yourself or you may get hit.<br>
Bad Habits: Tends to curse a lot when she is angry. Used to smoke weed when she was a teen.
</i>
</p>
</div>

<a name="four"></a>
<div style="width:90%; height: 100%; overflow: auto;" align="center">
<h1>OOC</h1>
<hr>
<p align = "left">
<i>
<font color = "#940912">•</font>Code belongs to Aishurel. Click the credit to steal it
<br>
<font color = "#940912">•</font>Real Life may Interfere with Rp Please don't get mad
<br>
<font color = "#940912">•</font>Story preferred over smut
<br>
<font color = "#940912">•</font>Will Not Give Out Personal Info
<br>
<font color = "#940912">•</font>Pm Friendly(No smut in my pm unless its part of the Rp we are doing)
<br>
<font color = "#940912">•</font>In Character(in main rooms and Pms unless text is in brackets)
<br>
<font color = "#940912">•</font>Smut is allowed as story progresses
<br>
<font color = "#940912">•</font>No oneliners. Please be at lease Semi-lit if you wish to Rp with me
<br>
</i>
</p>
</div>

<a name="three"></a>
<div style="width:90%; height: 100%; top: 100px; overflow: auto;" align="center">

<h1>About</h1>

<p align = "left">
<i>
<p>
Jaz wasn't born a Lycan, she was bitten at 13 in a werewolf attack on her family home. She only had her brother and she had to watch him die trying to protect her before she was dragged away to some facility deep in the mountains. There she spent most of her time strapped to a bed while unknown chemicals were pumped into her body. She was the human experiment and the torture never ended. At least till the first full moon she had, she was so angry she shifted mid being strapped down and attacked everyone that had attacked her. Once they were all dead Jaz took off and ran through the woods. Constantly on the move so she never got captured again. Her body covered in scars and bruises that took a while to heal. Now she is weary around others of her kind and well others in general though she trys to make friends. Her Lycan form is a black wolf with golden eyes. Only shows temper when provoked other wise she is calm and quiet.
<h2>Present Time</h2>
<p>
Jasmine found her self in a quiet little town called Fenster Falls. She Befriended another Wolf by the Name of Rosabella who let Jaz move into her house and stay there. After a small trip back to her home she was able to get all her family affairs in order and obtain the money her parents set aside for her. She went back to Fenster Falls with possession of her brothers Jeep and things that belonged to her parents. She has met many people in Fenster and would like to meet many more. She has started to consider the quiet town her new forever home.
</p>
<h2>On The Road Again</h2>
<p>
As much as Jaz liked Fenster, It was slowly becoming apparent to her that she needed to be with her own kind. So she packed her bags and was on the road again. She would miss her friends in Fenster Falls but she would visit some time.
</p>
<h2>New Home</h2>
<p>
During her traveling she came across a territory that was owned by the Dark Howls Pack. After speaking with the Alpha she went through an Initiation and became the newest Delta in the pack. She now has her own room in the pack manor and a new family that will help her and teach her. A new life has started for the young wolf and it can only get better from here.
</i>
</p>
</div>


</div>
</div>
</center>