Assasin of black

<style>

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

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


body{
background-color:#fff;
transition:1s ease;
overflow:hidden;
transition-delay:999999s;
}

body:hover{
background-color:#2e2e2e;
transition-delay:1s;
}

#mainimg{
background-image:url('http://i.imgur.com/cY4fQ3s.png');
background-size:100%;
background-repeat:no-repeat;
width:300px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-250px;
-webkit-filter: brightness(0%);
transition:1s ease;
z-index:10;
transition-delay:999999s;
}

body:hover > #mainimg{
-webkit-filter: brightness(100%);
transition-delay:1s;

}

#backgroundimg {
background-image:url('http://i.imgur.com/755U1Mm.png');
background-size:100%;
background-repeat:no-repeat;
width:300px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-250px;
transition:1s ease;
z-index:9;
transition-delay:999999s;
}

body:hover > #backgroundimg{
position:absolute;
top:50%;
left:50%;
margin-top:-210px;
margin-left:-270px;
transition-delay:1s;
}

#box{
width:370px;
height:180px;
background-color:#ac2323;
position:absolute;
top:50%;
left:50%;
margin-top:-77px;
margin-left:-150px;
opacity:0;
border:1px solid #fff;
transition:1s ease;
transition-delay:999999s;
}

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

#one{
width:150px;
height:150px;
background-color:#ac2323;
position:absolute;
right:0%;
top:0%;
margin-top:10px;
margin-right:0px;
z-index:5;
opacity:1;
color:#fff;
font-family: 'Josefin Slab', serif;
font-size:9pt;
overflow:auto;
padding:10px;
}

#one:target;{
z-index:7
}



 #two, #three, #four {
width:150px;
height:150px;
background-color:#ac2323;
position:absolute;
right:0%;
top:0%;
margin-top:10px;
margin-right:10px
opacity:0;
z-index:5;
color:#fff;
font-family: 'Josefin Slab', serif;
font-size:9pt;
overflow:auto;
text-align:right;
padding:10px;
line-height:5px;
}

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

 span{
 background:#ac2323;
 border:solid 1px #fff;
 color: #fff;
 font-size: 13px;
 height: 30px;
 letter-spacing: 1px;
 font-family: 'Josefin Slab', serif;
 line-height: 30px;
 text-align: center;
 text-transform: uppercase;
 display:none;
 padding:0 20px;
 transform:skewX(10deg) rotate(280deg);
}



#navi1{
width:50px;
height:30px;
background-color:#ac2323;
position:absolute;
top:50%;
left:50%;
margin-top:113px;
margin-left:50px;
transform:skewX(20deg) rotate(90deg);
opacity:0;
transition:1s ease;
z-index:9;
transition-delay:999999s;
}

body:hover > #navi1{
opacity:1;
transition-delay:1.3s;
}

#navi1 a{
width:50px;
height:30px;
background-color:#ac2323;
position:absolute;
 border-top:1px solid #fff;
 border-left: 1px solid transparent;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
transition: 1s ease;
}

#navi1 a:hover{
background-color:#fff;]
}

#navi1 a:hover span{
display:block;
position:fixed;
 top: 0px;
 left:40px;
}


#navi2{
width:50px;
height:30px;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:113px;
margin-left:85px;
transform:skewX(20deg) rotate(90deg);
opacity:0;
transition:1s ease;
z-index:9;
transition-delay:999999s;
}

body:hover > #navi2{
opacity:1;
transition-delay:1.5s;
}

#navi2 a{
width:50px;
height:30px;
background-color:#ac2323;
position:absolute;
 border-top:1px solid #fff;
 border-left: 1px solid transparent;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
transition: 1s ease;
}

#navi2 a:hover{
background-color:#fff;
}

#navi2 a:hover span{
display:block;
position:fixed;
 top: 0px;
 left:35px;
}

#navi3{
width:50px;
height:30px;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:113px;
margin-left:120px;
transform:skewX(20deg) rotate(90deg);
opacity:0;
transition:1s ease;
z-index:9;
transition-delay:999999s;
}

body:hover > #navi3{
opacity:1;
transition-delay:1.7s;
}
#navi3 a{
width:50px;
height:30px;
background-color:#ac2323;
position:absolute;
 border-top:1px solid #fff;
 border-left: 1px solid transparent;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
transition: 1s ease;
}

#navi3 a:hover{
background-color:#fff;
}

#navi3 a:hover span{
display:block;
position:fixed;
 top: 0px;
 left:25px;
}

#navi4{
width:50px;
height:30px;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:113px;
margin-left:155px;
transform:skewX(20deg) rotate(90deg);
opacity:0;
transition:1s ease;
z-index:9;
transition-delay:999999s;
}

body:hover > #navi4{
opacity:1;
transition-delay:1.9s;
}
#navi4 a{
width:50px;
height:30px;
background-color:#ac2323;
position:absolute;
 border-top:1px solid #fff;
 border-left: 1px solid transparent;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
transition: 1s ease;
}

#navi4 a:hover{
background-color:#fff;
}

#navi4 a:hover span{
display:block;
position:fixed;
 top: 0px;
 left:40px;
}

h1{
color:#fff;
font-family: 'Josefin Slab', serif;
font-size:12pt;
line-height:0px;
text-align:left;
text-shadow: 1px 1px #000;
font-weight:600;
}

b{
color:#000;
font-family: 'Josefin Slab', serif;
font-size:9pt;
}

a {
color:#2e2e2e;
font-family: 'Josefin Slab', serif;
font-size:9pt;
text-decoration:none;
transition:1s ease;
}

a:hover {
color:#fff;
}

</style>

<div id="mainimg">
</div>

<div id="backgroundimg">
</div>

<div id="box">
<div id="two">
<h1>Stats</h1><br>
<font style="float:left;"><b>Thing</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; †</font>  Thing
</div>
<div id="three">
<h1>Abilities</h1>
</div>
<div id="four">
<h1>Story</h1>
</div>
<div id="one">
<h1>OOC</h1>
<b>00</b> This code was made for me by <a href="https://roleplay.chat/profile.php?user=King+Hassan"> papa assassin </a> PM him if you have inquiries over codes and commissions.<br>
</div>
</div>

<div id="navi1">
<a href="#one"><span>OOC</span> </a>
</div>
<div id="navi2">
<a href="#two"><span>Stats</span> </a>
</div>
<div id="navi3">
<a href="#three"><span>Abilities</span> </a>
</div>
<div id="navi4">
<a href="#four"><span>Story</span> </a>
</div>