Vampire hunter D profile

<style>

@import url('https://fonts.googleapis.com/css?family=Eagle+Lake');

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

 body {
 padding-top: 80px;
 text-align: center;
 font-family: monaco, monospace;
 background-color:#07261b;
 overflow:hidden;
}


::-webkit-scrollbar
{
	width:0px;
	background-color: transparent;
}


#background{
 background: url(https://www.transparenttextures.com/patterns/tileable-wood.png);
 background-size: 12%;
width:100%;
height:100%;
top:0px;
left:0px;
position:absolute;
z-index:1;
}

#topbar{
 width:100%;
 height:50%;
 top:0px;
 left:0px;
 position:absolute;
 background-color:#000;
 transition:2s;
 transition-delay:9999999999s;
z-index:8;
}

body:hover > #topbar{
 height:15%;
 transition-delay:2s;

}

#bottombar{
 width:100%;
 height:50%;
 top:70%;
 left:0px;
 position:absolute;
 background-color:#000;
 transition:2s;
 transition-delay:999999999s;
 z-index:3;
}

body:hover > #bottombar{
 top:85%;
 transition-delay:2s;

}

@keyframes eyes {
 0% { transform: scaleX(1) scaleY(1); }
 1% { transform: scaleX(1.3) scaleY(0.1); }
 2% { transform: scaleX(1) scaleY(1); }
 60% { transform: scaleX(1) scaleY(1); }
 61% { transform: scaleX(1.3) scaleY(0.1);}
 62% { transform: scaleX(1) scaleY(1); }
 100% { transform: scaleX(1) scaleY(1); }
}




.p{
 position:fixed;
 width:280px;
 height:200px;
 background-color:transparent;
 background-image: url('http://i.imgur.com/sm0u8Vj.png');
 background-size:100%;
 animation-name:eyes;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 top:0%;
 transition:2s;
transition-delay:9999999s;
}

body:hover .p {
 transition-delay:2s;
 top:-10%
}
.p-1{
 animation-duration:5s;
 top:-10%;
 left:60%;
}

body:hover .p-1{
top:-50%;
}

.p-2{
 animation-duration:3s;
 top:10%;
 left:20%;
}

body:hover .p-2{
top:-30%
}

.p-3{
 animation-duration:4s;
 top:30%;
 left:40%;
}

body:hover .p-3{
top:-5%;
}
.p-4{
 animation-duration:6s;
 top:10%;
 left:45%;
}

body:hover .p-4{
top:-30%;
}

.p-5{
 animation-duration:1.5s;
 top:15%;
 left:0%;
}

body:hover .p-5{
top:-5%;
}

.p-6{
 animation-duration:7s;
 top:15%;
 left:70%;
}

body:hover .p-6{
top:-25%;
}

.p-7{
 animation-duration:4.5s;
 top:25%;
 left:25%;
}

body:hover .p-7{
top:-10%;
}

.p2{
 position:fixed;
 width:280px;
 height:200px;
 background-color:transparent;
 background-image: url('http://i.imgur.com/sm0u8Vj.png');
 background-size:100%;
 animation-name:eyes;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 bottom:0%;
 transition:2s;
transition-delay:9999999s;
}

body:hover .p2 {
 transition-delay:2s;
 bottom:-10%
}

.p2-1{
 animation-duration:4s;
 bottom:10%;
 left:60%;
}

body:hover .p2-1{
bottom:-5%;
}

.p2-2{
 animation-duration:3s;
 bottom:0%;
 left:0%;
}

body:hover .p2-2{
bottom:-10%;
}


.p2-3{
 animation-duration:5s;
 bottom:-10%;
 left:40%;
}

body:hover .p2-3{
bottom:-20%;
}

.p2-4{
 animation-duration:6.5s;
 bottom:0%;
 left:50%;
}

body:hover .p2-4{
bottom:-10%;
}

.p2-5{
 animation-duration:7s;
 bottom:-5%;
 left:75%;
}

body:hover .p2-5{
bottom:-10%;
}

.p2-6{
 animation-duration:10s;
 bottom:5%;
 left:15%;
}

body:hover .p2-6{
bottom:-3%;
}







#image{
 position:absolute;
 width:500px;
 height:450px;
 background-image:url('http://i.imgur.com/0JVH2VX.png');
 background-size:contain;
 background-repeat:no-repeat;
 top:50%;
 left:50%;
margin-top:-225px;
margin-left:27px;
 opacity:1;

z-index:5;
}

#cross{
  background-image:url('http://i.imgur.com/yKkv08R.png');
  background-size:contain;
  background-repeat:no-repeat;
  height:350px;
  width:350px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-285px;
  margin-top:-175px;
}

#backgroundmenu{
width:700px;
height:400px;
background-color:#999999;
background-image:url('http://img02.deviantart.net/94b4/i/2012/125/3/5/grid___png_file_transparent__by_alexandoria-d4ym86u.png');
background-size:10%;
position:fixed;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-350px;
z-index:10;
border-radius:50px;
border:solid 1px #5B1212;
-webkit-box-shadow: 10px 10px 60px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 60px 2px rgba(0,0,0,0.75);
box-shadow: 10px 10px 60px 2px rgba(0,0,0,0.75);
opacity:0;
transition:2s;
transition-delay:999999s;
}

body:hover > #backgroundmenu{
opacity:1;
transition-delay:2.5s;
}

#navi{
  background-color:transparent;
  position:absolute;
  top:50%;
  left:50%;
  height:200px;
  width:75px;
  margin-top:-135px;
  margin-left:-60px;
  z-index:10;
}

  #navi a {
 opacity:1;
 display:inline-block;
 width:65px;
 height:70px;
 background-color:transparent;
 transition:1s
}

#navi a:hover{
  -webkit-filter: drop-shadow(2px 2px 1px rgba(214, 46, 46, 1));
}

#box1{
 width:200px;
 height:130px;
 position:absolute;
 top:50%;
 left:50%;
 background-image:url(https://68.media.tumblr.com/1be20521410218b730f1febfa3c257ff/tumblr_of6t3nzQkJ1umk4ogo1_400.gif);
 background-size:120%;
 background-position:center;
 margin-top:-150px;
 margin-left:-300px;
 border-radius:10px;
 border:solid 1px #5B1212;
 opacity:0;
transition:1s;
transition-delay:9999999999s;
 }

#backgroundmenu:hover > #box1{
opacity:1;
transition-delay:2s;
}

 #box2{
 width:200px;
 height:130px;
 position:absolute;
 top:50%;
 left:50%;
 background-image:url(https://68.media.tumblr.com/f8460198ad43c319853cc3d10369e6e2/tumblr_ndxq66PCEB1qe10n4o1_500.gif);
 background-size:120%;
 background-position:center;
 margin-top:0px;
 margin-left:-300px;
 border-radius:10px;
 border:solid 1px #5B1212;
 opacity:0;
transition:1s;
transition-delay:9999999999s;
 }

#backgroundmenu:hover > #box2{
opacity:1;
transition-delay:2s;
}

#one, #two{
   width:190px;
 height:120px;
 position:absolute;
 background-color:#5B1212;
 opacity:0;
  border-radius:10px;
  transition:1s;
  z-index:1;
font-family: 'Josefin Sans', sans-serif;
font-size:7pt;
color:#dadada;
text-align:left;
padding:5px;
}

#one:target, #two:target{
  opacity:1;
  z-index:10;
}


#three, #four{
     width:190px;
 height:120px;
 position:absolute;
 background-color:#5B1212;
 opacity:0;
  border-radius:10px;
  transition:1s;
  z-index:1;
font-family: 'Josefin Sans', sans-serif;
font-size:7pt;
color:#dadada;
text-align:left;
padding:5px;
}

#three:target, #four:target{
  opacity:1;
  z-index:10;
}

h1{
font-family: 'Eagle Lake', cursive;
font-size:8pt;
font-weight:400;
border-bottom:solid .2px #999999;
text-align:center;
color:#999999;
line-height:2px;
margin:0px;
    padding:0px;
}

b{
text-shadow:1px 1px 2px #97e0b1;
}

a{
color:#6F6F6F;
text-decoration:none;
transition:1s;
}

a:hover{
color:#dadada;
}
</style>

<div id="background">
</div>
<div id="topbar">
<div class="p p-1"></div><div class="p p-2"></div><div class="p p-3"></div><div class="p p-4"></div><div class="p p-5"></div><div class="p p-6"></div><div class="p p-7"></div>
</div>

<div id="bottombar">
 <div class="p2 p2-1"></div>
 <div class="p2 p2-2"></div>
 <div class="p2 p2-3"></div>
 <div class="p2 p2-4"></div>
 <div class="p2 p2-5"></div>
 <div class="p2 p2-6"></div>
</div>
<div id="backgroundmenu">
<div id="image"></div>
<div id="cross"></div>
<div id="navi">
  <a  href="#one"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Peter's_Cross.svg/1200px-Peter's_Cross.svg.png" width="30" height="50"></a><br>
  <a href="#two"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Peter's_Cross.svg/1200px-Peter's_Cross.svg.png" width="30" height="50"></a>
    <a  href="#three"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Peter's_Cross.svg/1200px-Peter's_Cross.svg.png" width="30" height="50"></a><br>
  <a href="#four"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Peter's_Cross.svg/1200px-Peter's_Cross.svg.png" width="30" height="50"></a>
  </div>

<div id="box1">
  <div id="one">
<h1>Thing</h1><br>
<span style="float: left;">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left;">Thing</span> <span style="float: right;">Thing</span><br>

</div>
  <div id="two">
<h1>Thing</h1><br>
You write stuff here.
</div>

</div>
<div id="box2">
 <div id="three">
<h1>Thing</h1><br>
You also write stuff here.

</div>
  <div id="four">
<h1>Thing</h1><br>
<b>00</b> This profile was commissioned and made by the <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">Hound of Tindalos </a>, send him a rpc mail or PM him for inquiries on codes.

</div>
</div>