shunrei code

<style>
@import url(https://fonts.googleapis.com/css?family=Staatliches);
 @import url(https://fonts.googleapis.com/css?family=Amiko);
 @import url(https://fonts.googleapis.com/css?family=Dancing+Script);


/*B09F9C*/
::-webkit-scrollbar-thumb {
 width: 0px;
 background-color: #1C4863;}

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



 body {background-color: #bfbfbf;
background-image: url(), url();
background-attachment: fixed, fixed;
background-repeat: repeat, no-repeat;
background-size: 20%, 100% 100%, 0%;
background-position: 0% 0%, 60% 0%;
 background-attachment:tile; cursor: url(http://static.tumblr.com/obptcxj/QvHmo0l0g/cursor__6_.png), progress !important;}


.navbar {Background-color: transparent; Position: fixed; Top: 92px; Left:50px; z-index: 7000; }


.slide {Position: fixed; Height: 555555; Width: 555555; Top: 0px; Left: 0; z-index: -10; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.slide:target {Top: 0; Opacity: 1; Z-index:0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.abox { background-color: #bfbfbf; color: #453B36; font-size: 15px; font-family: 'Staatliches'; text-align: justify; position: fixed; width: 250px; height: 250px; left: 730px; bottom: 170px; line-height: 16px; padding: 5px; overflow:auto; border-radius:10px; border: 0px double #453B36; z-index:-10; }


#quote1 { position:fixed; bottom:488px; left:55px; height: 60px; width: 200px; text-align: left; font-family: 'Staatliches', text-shadow: -1px 0 gray, 0 1px gray,1px 0 gray, 0 -1px gray; font-size:70px; color: #453B36; z-index:999; text-align: center; transition: 0.5s;}


#quote1a { position:fixed; bottom:418px;left:55px; height: 60px; width: 200px; text-align: left; font-family: 'Staatliches', text-shadow: -1px 0 gray, 0 1px gray,1px 0 gray, 0 -1px gray; font-size:70px; color: #453B36; z-index:999; text-align: center; transition: 0.5s;}


#quote2 { position:fixed; bottom:348px;left:55px; height: 60px; width: 200px; text-align: left; font-family: 'Staatliches', text-shadow: -1px 0 gray, 0 1px gray,1px 0 gray, 0 -1px gray; font-size:70px; color: #453B36; z-index:999; text-align: center;}

#quote2a { position:fixed; bottom:278px;left:55px; height: 60px; width: 200px; text-align: left; font-family: 'Staatliches', text-shadow: -1px 0 gray, 0 1px gray,1px 0 gray, 0 -1px gray; font-size:70px; color: #453B36; z-index:999; text-align: center;}

#quote1:hover {text-shadow: 1px 2px 10px #000000; transition: 0.5s;
}
#quote1a:hover {text-shadow: 1px 2px 10px #000000; transition: 0.5s;
}

#quote2:hover {text-shadow: 1px 2px 10px #000000; transition: 0.5s;
}

#quote2a:hover {text-shadow: 1px 2px 10px #000000; transition: 0.5s;
}



.bar1 { background-color: #000; position: fixed; bottom: 510px; left: 350px; height: 1px; width: 70px; z-index: 20; opacity: .5; transform: rotate(45deg);}

.bar2 { background-color: #000; position: fixed; bottom: 340px; left: 368px; height: 1px; width: 70px; z-index: 20; opacity: .5; transform: rotate(160deg);}

.bar3 { background-color: #000; position: fixed; bottom: 380px; left: 505px; height: 1px; width: 70px; z-index: 20; opacity: .5; transform: rotate(10deg);}

.bar4 { background-color: #000; position: fixed; bottom: 240px; left: 510px; height: 1px; width: 70px; z-index: 20; opacity: ; transform: rotate(170deg);}

.bar5 { background-color: #000; position: fixed; bottom: 85px; left: 390px; height: 1px; width: 70px; z-index: 20; opacity: ; transform: rotate(50deg);}


 .watertext {
color: #453B36;

 font-family: 'Staatliches';
 position: fixed;
 width: 40px;
 text-align: center;
 z-index: 2;
opacity:1;

}

 .watertext:hover {opacity:1;
text-shadow: 1px 2px 10px #000000; transition: 0.5s;
}



 .topbox {
position: fixed;
background-color: #;
left: 248px;
bottom: 135px;
padding:2px;
color: #453B36;
font-family: Staatliches;
text-transform: uppercase;
Opacity: .5;
font-size: 15px;
width: 154px;
height: 200px;
overflow:auto;
border:0px Solid #3D3124;
}

 .topbox:hover {opacity:1;
-webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
transition-delay: 0s;
overflow:auto;
}

 .midbox {
position: fixed;
background-color: #;
left: 533px;
bottom: 236px;
padding:2px;
color: #453B36;
font-family: Staatliches;
text-transform: uppercase;
Opacity: .5;
font-size: 15px;
width: 154px;
height: 145px;
overflow:auto;
 border:0px Solid #3D3124;
}

 .midbox:hover {opacity:1;
-webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
transition-delay: 0s;
overflow:auto;
}

 .bottombox {
position: fixed;
background-color: #;
left: 240px;
bottom: 345px;
color: #453B36;
font-family: Staatliches;
text-transform: uppercase;
Opacity: .5;
font-size: 15px;
width: 157px;
height: 200px;
overflow:auto;
border:0px Solid #3D3124;
}


 .bottombox:hover {opacity:1;
-webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
transition-delay: 0s;
overflow:auto;
}

 .bottombox1 {
position: fixed;
background-color: #;
left: 515px;
bottom: 135px;
color: #453B36;
font-family: Staatliches;
text-transform: uppercase;
Opacity: .5;
font-size: 15px;
width: 210px;
height: 120px;
overflow:auto;
border:0px Solid #3D3124;
}

 .bottombox1:hover {opacity:1;
-webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
transition-delay: 0s;
overflow:auto;
}

 .bottombox2 {
position: fixed;
background-color: #;
left: 265px;
bottom: -26px;
color: #453B36;
font-family: Staatliches;
text-transform: uppercase;
Opacity: .5;
font-size: 15px;
width: 210px;
height: 148px;
overflow:auto;
border:0px Solid #3D3124;
}

 .bottombox2:hover {opacity:1;
-webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
transition-delay: 0s;
overflow:auto;
}

h1 {
background-color: #;
color: #453B36;
font-size: 15px;
font-family:Staatliches;
margin-top: 0px;
border-bottom: 0px solid #806242;
}

h2 {
background-color: #;
color: #453B36;
font-size: 70px;
font-family:Staatliches;
}


i, strong{ font-weight: normal; color: #E3A73B; font-family: Creepster; font-size: 3vh; }

a, a:link, a:visited { font-family: Staatliches; background-color transparent; color:#453B36; letter-spacing:0px; font-variant: none; text-decoration: none; }


 #ufuk {position: fixed;left: 300px;bottom: -30px;}
 #ufuk img {width: 355px355px;height: 550px;}

.circle3{ border-radius:150px; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; }

.circle3:hover{ border-radius:150px; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); }

.hiddenimg {
 display: none;


}

.hiddentxt {
 font-weight: bold;
 color: #453B36;


}

.hiddentxt a {
 color: #F00;
 text-decoration: none;
}

.hiddenclick {
 font-weight: bold;
 color: #F00;
 text-decoration: none;
 cursor: pointer;
}

.hiddenclick a {
 color: #F00;
 text-decoration: none;
}

.hiddenclick a:visited {
 color: #F00;
 text-decoration: none;
}

.hiddentxt:hover ~ .hiddenimg {

 display: block;
}

p{
 margin:0px;
 float:center;
 position:relative;
 cursor:pointer;
}

p:hover span{
 display:block;

}

</style>



<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>



<div id="ufuk"><img src="https://i.imgur.com/fxXus7G.png"></div>


 <div class="topbox">
<center><h1 title="Single"><p><span class="hiddentxt">Hard Abdomen</a></span><span class="hiddenimg"><img src="http://wiki.shoryuken.com/images/9/9e/%28chunlidfhk%29.gif" height="100" width="140" /></span></p></center>
</div>


<div class="Midbox">
<center><h1 title="Street Fighter"><p><span class="hiddentxt">Modest Bust</a></span><span class="hiddenimg"><img src="https://i.imgur.com/bVP5kaO.gif" height="100" width="130" /></span></p></center>
</div>

<div class="bottombox">
<center><h1 title="Chun-Li"><p><span class="hiddentxt">Classic Buns</a></span><span class="hiddenimg"><img src="https://i.imgur.com/hLmPU29.gif" height="170" width="120" /></span></p></center>
</div>

<div class="bottombox1">
<center><h1 title="Will Kick Your Ass"><p><span class="hiddentxt">Power Thighs</a></span><span class="hiddenimg"><img src="https://i.imgur.com/9zwh30o.gif" height="90" width="200" /></span></p></center>
</div>

<div class="bottombox2">
<center><h1 title="RL>IC"><p><span class="hiddentxt">Swift Feet</a></span><span class="hiddenimg"><img src="http://wiki.shoryuken.com/images/9/99/%28chunlisa2%29.gif" height="90" width="200" /></span></p></center>
</div>









 <div class="watertext" style="font-size:70px; bottom:110px;left:135px">
<center><a target="_blank" href="https://66.media.tumblr.com/cc1f0cdbf1e9e1bc9490b7f5f0da9136/tumblr_pj0jupV0291smketao1_640.jpg" class="navi">L</a>

</div>

 <div class="watertext" style="font-size:70px; bottom:30px;left:133px">
<center><a target="_blank" href="https://66.media.tumblr.com/1b00cf78b110bcb8ffd1b6090e70e106/tumblr_p7vzyiySy21ug82i3o1_1280.jpg" class="navi">I</a>

</div>

<a href="#1"><div id="quote1">C</div></a>
<a href="#2"><div id="quote1a">H</div></a>
<a href="#3"><div id="quote2">U</div></a>
<a href="#4"><div id="quote2a">N</div></a>

<div id="1" class="slide">
<div class="abox">
<center>WIP
</div></div>

<div id="2" class="slide">
<div class="abox">
<center>WIP



</div></div>

<div id="3" class="slide">
<div class="abox">

<center>WIP





</div></div>