Sinny!!

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow);
@import url(https://fonts.googleapis.com/css?family=Asul);
@import url(https://fonts.googleapis.com/css?family=Eater);

::-webkit-scrollbar-thumb:vertical
 {background-color: #CC0000;height:25px;}
::-webkit-scrollbar
 {height:10px;width:4px;background-color: transparent;}
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(11,11,11,.1);
 border-radius: 10px;
}
::-webkit-scrollbar-thumb {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(11,11,11,1);
}

body{

background-color: #FFFFFF;
background-image: url("http://i.imgur.com/cqC8GxL.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 28%;
background-position: right bottom;
}


@font-face{
 font-family: 'a Theme for murder';
 src:url(https://dl.dropboxusercontent.com/s/6rxye5rnd2xlgaq/a%20Theme%20for%20murder.ttf);
 }

@font-face{
 font-family: 'BlackAsylumDEMO';
 src:url(https://dl.dropboxusercontent.com/s/yv6g8ijf29lbaba/BlackAsylumDEMO-KCFonts.ttf);
 }



 body {
 font-family: tahoma;
 font-size: 11px;
 color: #111;
 line-height: 11px;
 text-transform: none;
 text-align: justify;
 scrollbar-face-color: #111;
 scrollbar-highlight-color: #111;
 scrollbar-3dlight-color: #111;
 scrollbar-darkshadow-color: #111;
 scrollbar-shadow-color:#111;
 scrollbar-arrow-color: #111;
 scrollbar-track-color: #888;
 cursor: busy;
 }

 table {
 color: #000;
 font-family: tahoma;
 font-size: 10px;
 line-height: 11px;
 text-align: justify;
 background: transparent;
 }


 #main {
 position: absolute;
 width: 470px;
 left: 164px;
 top: 426px;
 z-index: 3;
 margin-right: 2px;
 margin-left: 2px;
 text-align: justify;
 }

 #side {
 position: absolute;
 width: 146px;
 left: 3px;
 top: 426px;
 z-index: 2;
 margin-right: 2px;
 margin-left: 2px;
 text-align: justify;
 }

 h1 {
 margin: 0px;
 line-height: 11px;
 padding-right: 2px;
 padding-top: 2px;
 text-decoration: none;
 font-family: arial;
 color: #DDD;
 font-size: 10px;
 font-weight: bold;
 font-style: none;
 letter-spacing: 2px;
 background: #000 url('');
 border-bottom: 4px solid #770000;
 text-transform: uppercase;
 text-align: right;
 margin-bottom: 4px;
 margin-top: 6px;
 padding-bottom: 0px;
 }


#name{
 position: fixed;
 z-index:2;
 right: 0vw;
 top: 6vh;
 color: #9C0404;
 text-shadow: 0 0 0.5vw #000;
 font-family: a Theme for murder;
 font-size: 8vw;
 letter-spacing: 0.7vw;
 opacity:0;
 -webkit-animation:namefade 1s 1;
 animation:namefade 1s 1;
 animation-delay:1s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:1s;
 -webkit-animation-fill-mode:forwards;
}
@keyframes namefade{
from{opacity:0;}
to{opacity:1;}
}

#name2{
 position: fixed;
 z-index:0;
 right: 0vw;
 bottom: 3vh;
 color: #9C0404;
 text-shadow: -0.5vw 0.5vw 0.5vw #000;
 font-family: a Theme for murder;
 font-size: 7.5vw;
 text-align: center;
 letter-spacing: 0.5vw;
 opacity:0;
 -webkit-animation:namefade 1s 1;
 animation:namefade 1s 1;
 animation-delay:1s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:1s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes namefade{
from{opacity:0;}
to{opacity:1;}
}

 #main a:hover, a:hover {
 color: #111;
 letter-spacing: 0px;
 text-decoration: none;
 cursor: default;
 text-transform: none;
 font-size: 11px;
 }

 a:visited, a:active, a:link {
 font-family: tahoma;
 color: #770000;
 letter-spacing: 0px;
 text-decoration:none;
 cursor: default;
 font-weight: bold;
 text-transform: none;
 font-size: 11px;
 }

 a:link.nav, a:visited.nav, a:active.nav {
 color: #770000;
 font-family: tahoma;
 font-size: 11px;
 line-height: 13px;
 letter-spacing: 0px;
 display: block;
 font-weight: bold;
 margin-bottom: 1px;
 word-spacing: 0px;
 text-transform: uppercase;
 background-color: #FFF;
 text-align: center;
 text-decoration: none;
 text-shadow: 0 0 0.7em #000;
 border-top: 2px solid #FFF;
 border-bottom: 2px solid #;
 border-left: 10px solid #;
 border-right: 10px solid #;
 }

 a:hover.nav {
 color: #000;
 font-family: tahoma;
 font-size: 12px;
 line-height: 13px;
 letter-spacing: 0px;
 display: block;
 font-weight: bold;
 margin-bottom: 1px;
 word-spacing: 0px;
 text-transform: uppercase;
 background-color: #FFF;
 text-align: center;
 text-decoration: none;
 text-shadow: 0px 0px 7px #888;
 border-top: 2px solid #770000;
 border-bottom: 2px solid #770000;
 border-left: 10px solid #770000;
 border-right: 10px solid #770000;
 }

 img, a:active img, a:visited img, a:link img, a:hover img {
 border: 0px;
 cursor: default;
 }

 b {color: #770000;
font-size: 12.5px;
font-weight: 900;
text-decoration: none;
text-shadow:0px 0px 7px #770000;
font-family: verdana;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}

 i {letter-spacing: 0px; color: #000;}

 u {color: #CCC text-decoration: none; border-bottom: 1px dotted #000; letter-spacing: 0px;}

 s {color: #000;}

A {
color: #550000;
font-size: 11.5px;
font-weight: 900;
text-decoration: none;
text-shadow:0px 0px 10px #ff0033;
font-family: book antique;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}

A:hover{
color: #660000;
font-size: 12px;
text-decoration: none;
text-shadow:0px 0px 10px #000;
font-weight: 900;
font-family: book antique;
cursor: url('http://imageshack.com/a/img703/695/ynrb.png'),default;}


 .box {
 position: fixed;
 left: 170px;
 top: 0px;
 width: 600px;
 height: 183px;
 padding: 5px;
 color: #000;
 font-family: verdana;
 font-variant: small-caps;
 text-align: justify;
 font-size: 11.5px;
 line-height: 12px;
 overflow: auto;
 border-left: 7px Solid #770000;
 border-right: 7px Solid #770000;
 background-color: transparent;
 opacity: 0;
 transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 z-index: 200;
 }

 .box:target {
 top: 450px;
 left: 170px;
 opacity: 7;
 transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 z-index: 200;
 }


#Abub {

position: absolute;

top: 0px;

left: 188px;

width: 200px;

height: 200px;

background-color:#000;

background-image: url('http://i58.tinypic.com/153v582.jpg');

background-size: 100% 112%;

background-position:center;

background-repeat:no-repeat;

border: 3px solid #770000;

border-radius: 500px;

overflow: hidden;

}


#Abub1 {

position: absolute;

top: 0px;

left:0px;

width: 200px;

height: 200px;

background-color:#000;

background-image: url('https://38.media.tumblr.com/ac4677395716e1c1690a343bbcb62b97/tumblr_mtyr35GU3S1sgqul0o1_500.gif');

background-size: 105% 120%;

background-position:center;

background-repeat:no-repeat;

border: 3px solid #770000;

border-radius: 500px;

overflow: hidden;

}


#Abub2 {

position: absolute;

top: 135px;

left: 130px;

width: 200px;

height: 200px;

background-color:#000000;

background-image: url('http://i60.tinypic.com/2yw7dd3.jpg');

background-size: 100% 112%;

background-position:center;

background-repeat:no-repeat;

border: 3px solid #770000;

border-radius: 500px;

overflow: hidden;

}

#Abub3 {

position: absolute;

top: 185px;

left: 0px;

width: 200px;

height: 200px;

background-color:#000000;

background-image: url('https://33.media.tumblr.com/deda5e96dfadf8bd7276323cd4a64713/tumblr_ne540uoVCU1r72ht7o1_500.gif');

background-size: 101% 105%;

background-position:center;

background-repeat:no-repeat;

border: 3px solid #770000;

border-radius: 500px;

overflow: hidden;

}

#Abub4 {

position: absolute;

top: 158px;

left: 285px;

width: 200px;

height: 200px;

background-color:#000000;

background-image: url('http://i60.tinypic.com/m94vfb.jpg');

background-size: 105% 110%;

background-position:center;

background-repeat:no-repeat;

border: 3px solid #770000;

border-radius: 500px;

overflow: hidden;

}

#Abub5 {

position: absolute;

top: 0px;

left: 360px;

width: 200px;

height: 200px;

background-color:#000000;

background-image: url('http://i61.tinypic.com/29mx8pw.jpg');

background-size: 104% 100%;

background-position:center;

background-repeat:no-repeat;

border: 3px solid #770000;

border-radius: 500px;

overflow: hidden;

}

.clear img{
width:75px;
height:80px;
padding:0px;
background:transparent;
float: center;
border: 1px solid orchid;
border-radius: 50%;
margin:5px 5px 0px 0px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.clear img:hover{
width:85px;
height140px;
padding:0px;
float: center;
background:transparent;
border: 1px solid black;
border-radius: 20%;
margin:5px 5px 0px 0px;}


 </style>

 <div id="main">
	<h1>Hate the Sin, love the Sinner.</h1>



 <div id="1" class="box">
Testing

 </div>

 <div id="2" class="box">

 </div>


<div id="3" class="box">

</div>
</div>


 <div id="4" class="box">

 </div>

 <div id="5" class="box">
 <div class="clear">


 </div>
 </div>
 <div id="6" class="box">


 </div>




</div>


 <div id="side">

 <h1>Curious?</h1>

 <a class="nav" href="#1">A b o u t</a>
 <a class="nav" href="#2">L o r e</a>
 <a class="nav" href="#3">F r e n e m i e s</a>
 <a class="nav" href="#4">I n t e r e s t s</a>
 <a class="nav" href="#5">G a l l e r y</a>
 <a class="nav" href="#6">O O C</a>


 <h1>Attention:</h1>
 <font color="#000">
 <b>No</b> noobs <b>or</b> illiterates.
 <br>

 <b>No</b> bullshit.

 <br>

 </font>

 </div>

<div id="Abub5"></div>

<div id="Abub4"></div>

<div id="Abub"></div>

<div id="Abub2"></div>

<div id="Abub3"></div>

<div id="Abub1"></div>

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

<div id="name2">
All hail the King
</div>


</div>

</div>

</div>