Myrah

<style>
  @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Cedarville+Cursive|Cookie|Great+Vibes|Rochester|Sacramento');
 ::-webkit-scrollbar {width: 0.3vw; height: 0.3vw;}
 ::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
 ::-webkit-scrollbar-thumb { border-radius: 0px; background-color: transparent;}



 body {
   overflow: hidden;
   background-color: #000000;
   background-image: url('http://i935.photobucket.com/albums/ad199/Fatora/Steampunk%20pics/Steampunk_Wallpaper_by_FlameRaven.jpg');
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-size: cover;
 }

  img {
 user-drag: none;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 -webkit-user-drag: none;
 -ms-user-select: none;
 }

 a {
   text-decoration: none;
   color: #FFFFFF;
 }

 h1 {
   font-family: Cedarville Cursive;
   font-size: 5vh;
 }

 .s {
   float: right;
 }

 #elle {
   position: fixed;
   background: transparent;
   height: 100%;
   width: 35%;
   top: 0;
   right: 0;
 }

 .belle {
   position: absolute;
   right: 0%;
   bottom: 0%;
 }

 #name {
   position: fixed;
   background: transparent;
   height: 15%;
   width: 100%;
   bottom: 6%;
   left: 0%;
   z-index: 1;
 }

 .lilith {
   position: absolute;
   font-family: Great Vibes;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 gold, 0 2px black;
   color: #8c1e3b;
   font-size: 15vh;
   left: 3%;
   bottom: 0%;
 }

 #name:hover .navi{
   opacity: 1;
   transition-duration: 1s;
   z-index: 1;
 }

 .navi {
   position: absolute;
   background: transparent;
   border: 5px dotted;
   border-radius: 10px;
   border-color: #FFFFFF;
   color: #000000;
   height: 30%;
   width: 23%;
   font-size: 4vh;
   font-family: cookie;
   right: 33%;
   bottom: 40%;
   opacity: 0;
   transition-duration: 1s;
   z-index: 1;
 }

#quote {
   z-index: -2;
   position: fixed;
   height: 60%;
   width: 60%;
   font-family: Sacramento;
   font-size: 6.5vh;
   color: #000;
    text-shadow: 1px 0 black, 0 2px yellow, 2px 0 yellow, 0 1px black;
   text-shadow: 0vh 0vw 2vh #fff;
   background: transparent;
   left: 5%;
   top: 40%;
   opacity: 1;
   animation: pulse 2s 1;
   -webkit-animation: pulse 2s 1;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

@keyframes pulse{
  from{opacity: 1;}
  to{opacity: 0.5;}
}

@-webkit-keyframes pulse{
  from{opacity: 1;}
  to{opacity: 0.5;}
}


 #one {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 0s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

 #two {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 0s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

 #three {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 0s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

  #four {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 1s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

  #five {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: transparent;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 1s;
   font-family: Amatic SC;
   color: #FFFFFF;
 }

#one:target {
  opacity: 1;
  transition-duration: 1s;
  z-index: 4;
}

#two:target {
  opacity: 1;
  transition-duration: 0s;
  z-index: 4;
}

#three:target {
  opacity: 1;
  transition-duration: 0s;
  z-index: 4;
}

#four:target {
  opacity: 1;
  transition-duration: 0s;
  z-index: 4;
}

#five:target {
  opacity: 1;
  transition-duration: 1s;
}

.clouds {
position:fixed;
left:0;
bottom:-5%;
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 id="elle">
<div class="belle">
  <img src="http://i.imgur.com/pCMaR5g.png" style="height:90%" draggable="false">
</div></div>
<div id="name">
  <div class="lilith"><Font color=#fff>Myrah</font></div>
  <div class="navi">
    <center>
      <a href="#one">Stats</a> .
      <a href="#two">Family</a> .
      <a href="#three">Friends</a> .
      <a href="#four">OOC</a> .
      <a href="#five">⟲</a>
    </center>
  </div>
</div>
<div id="block"></div>
<div id="quote"><align="left">Words are words,<br> Feelings and bullets hurt.</font></div>
<div id="one">
<center><h1><b>Stats</b></h1></center>
 Name <div class="s">Myrah</div><br>
 Moniker <div class="s">My or Rah</div><br>
 Age <div class="s">My or Rah</div><br>
 Species <div class="s">Early 20's</div><br>
 Height <div class="s">4'9</div><br>
 Complexion <div class="s">Pale</div><br>
 Hair <div class="s">White</div><br>
 Eyes <div class="s">Purple</div><br>
 Persona <div class="s">hyper</div><br>
 Relationship<div class="s">Single</div><br>
Employment<div class="s">Librarian</div><br>
Skills<div class="s">Too many to list</div><br>
Alignment<div class="s">Neutral Good. </div><br>
Gear<div class="s">Backpack Purse, lip gloss,wallet full of cash,magnetic book marks,and make up bag with mirror.
</div><br>


</div>
<div id="two">
<center><h1><b>Family/Gallery</b></h1>



</div>
<div id="three">
 <center><h1><b>My Friends</b></h1></center>
 names here
 <center><h1><b>My Enemies</b></h1></center>
 more names here
</div>
<div id="four">
 <center><h1><b>Rules</b></h1></center>
 <font size="5vh">
 <font color="#E6E200">⚙</font> OCC and IC are two different worlds, <br>
 <font color="#E6E200">⚙</font> Don't just assume something sexual will happen because that is earned not just given. <br>
 <font color="#E6E200">⚙</font> Don't start a story with out discussing the plot, setting, and boundaries with me<br>
 <font color="#E6E200">⚙</font> Also one last thing, DON'T DO ONE LINERS!!! <br>
 <font color="#E6E200">⚙</font>Multi-para to Semi-para is very well appreciated and detail is orgasmic to the eyes. <br>
 <font color="#E6E200>⚙</font> Semi-PM Friendly<br><br>
 <center>v scroll for more v</center>
 </font>
 <center><h1><b>Typist Info</b></h1></center>
 <font color="#E6E200">⚙</font> 20 y.o.<br>
 <font color="#E6E200">⚙</font> Male<br>
 <font color="#E6E200">⚙</font>Designed By:\Snow/ <br>
 <font color="#E6E200">⚙</font> Get the code <a href="http://pastebin.com/wF5QzGvP"><b>Coded by moi.</b></a><br>
<br><br>
</div>
<div id"five"></div>
<div class="clouds"></div>