punpun code potential

<style>@import url('https://fonts.googleapis.com/css?family=Questrial');@import url('https://fonts.googleapis.com/css?family=Questrial');
 body {
background: #FFF4E0;
 overflow-y:hidden;
overflow-x:hidden;}

/*coded by [punpun]. do not steal the character. do not remove the credit. do not remove this.*/

::-webkit-scrollbar-thumb {
 width: 3px;
 background-color: #9E988B;}
::-webkit-scrollbar {
 width: 3px;
 background-color: transparent;}

h1{
 font-family: Questrial;
 font-size: 22px;
 text-align: center;
 color: #888888;
 padding-right: 5px;
 margin-bottom: 5px;
 margin-top: 1px;
 line-height: 31px;
 border-bottom: 3px double #000000;
}


#main {
 position: fixed; margin: auto; right: 0px; left:400px; top: 0; bottom: 0; width: 300px; height: 490px; background: #trans; border: 2px solid #9E988B; border-radius: 17px 0px 17px 0px; box-shadow: #9E988B 0px 0px 5px 0px; overflow: hidden; text-align: left;}

 #pic {position: absolute;right: -95px;top: -7; z-index:0; opacity: 1;}
 #pic img {width: ; height: 500;}

 #pic2 {position: absolute;right: -165px;top: -7; z-index:0; opacity: 1;}
 #pic2 img {width: ; height: 230;}

 #pic3 {position: absolute;right: -50;top: 0; z-index:0; opacity: 1;}
 #pic3 img {width: ; height: 220;}

 #pic4 {position: absolute;right: -50;top: 0; z-index:0; opacity: 1;}
 #pic4 img {width: ; height: 280;}

#botline {
 width: 0px;height: 5px;
 background: #823321;
 position: absolute;
 bottom: 100;left: 160;z-index:30;
 display:block;
-webkit-transition: all 1.2s ease-out;
-moz-transition: all 1.2s ease-out;
-ms-transition: all 1.2s ease-out;
-o-transition: all 1.2s ease-out;
 transition: all 1.2s ease-out;}
body:hover #botline{ position: absolute;
 width: 220px; left: 40; opactiy:1;
}
#main2 {
 position: fixed; margin: auto;
 right: 0px; left:400px; top: 0; bottom: 0;
 width: 300px; height: 490px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 border-radius: 17px 0px 17px 0px;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:1;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

#submain {
 position: fixed; margin: auto;
 right: 0px; left:400px; top: 0; bottom: 0;
 width: 300px; height: 490px;
 background: #888888;
 border: 2px solid #9E988B; z-index:20;
 border-radius: 17px 0px 17px 0px;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0.35;
-webkit-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
-ms-transition: all 1.6s ease-out;
-o-transition: all 1.6s ease-out;
 transition: all 1.6s ease-out;}
body:hover #submain{
opacity: 0.60;
filter:alpha(opacity=100);
}

 .head {
 position: absolute;
 left: 45;
 bottom: 130;
 color: #E6CACA;
 font-family: Playfair Display SC;
 font-size: 40px; opacity: 0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}
body:hover .head{opacity: 1; bottom: 100;
-webkit-transition-delay: 1.6s ;
-moz-transition-delay: 1.6s ;
-ms-transition-delay: 1.6s ;
-o-transition-delay: 1.6s ;
 transition-delay: 1.6s ;
}

.head2 {
 position: absolute;
 left: 67;
 bottom: 90;
 color: #E6CACA;
 font-family: Questrial;opacity: 0;
 font-size: 20px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}
body:hover .head2{
 bottom: 77;;opacity: 1;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;
}


.head3 {
 position: absolute; margin: auto;
 left:18; top: 100;
 color: #823321;
 font-family: Questrial;opacity: 1;
 font-size: 20px;z-index:100;
font-shadow: #cccc 1px 1px 1px 1px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}


.head4 {
 position: absolute; margin: auto;
 left:13; top: 100;
 color: #823321;
 font-family: Questrial;opacity: 1;
 font-size: 20px;z-index:100;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}

#line {opacity:1;/*change later pls*/
 width: 0%;height: 22px;
 background: #B8B0A1; border-radius: 4px;
 position: fixed; margin: auto;
 right: 0px; left:90px; top: 5; bottom: 0;
 display:block;
-webkit-transition: all 2.6s ease-out;
-moz-transition: all 2.6s ease-out;
-ms-transition: all 2.6s ease-out;
-o-transition: all 2.6s ease-out;
 transition: all 2.6s ease-out;}
body:hover #line{ position: fixed;
width: 815px; left:220;
}

#icon {
 position: fixed; margin: auto;
 right: 40px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon {opacity:1}
body:hover #icon {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:0.65}
#subicon {
 position: absolute; margin: auto;
 right: 0px; left:00px; top: 0; bottom:0;
 width: 100px; height: 220px;
 background: #888888;
 border: 2px solid #9E988B; z-index:99;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0.55;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
#subicon:hover{opacity:0}

#icon2 {
 position: fixed; margin: auto;
 right: 260px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon2 {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:1}

#icon3 {
 position: fixed; margin: auto;
 right: 480px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon3 {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:1}

.darts {
 position: fixed; margin: auto;
 right: 260px; left:0px; top: 365; bottom: -200;
 height: 220;
 width: 325px;
 opacity: 0; z-index: 5;
 text-align: left;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

.darts:target {
 position: absolute; bottom: 0;top: 265;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
 opacity: 1;
}

.box {
 position: absolute;
 right: 0px;
 bottom: 5px;
 height: 200;
 width: 311px;
 background-color: #E8DECC;
 border: 2px solid #9E988B; z-index:21;
 box-shadow: #9E988B 0px 0px 5px 0px;
 z-index: 5;
 color: #9E988B;
	font-family: Questrial;
	font-style: normal;
	font-variant: ;
	font-weight: 400;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 15px;
 padding: 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}
body:hover .box {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}


#boxb {
 position: fixed; margin: auto;
 right: 260px; left:0px; top: 260; bottom: 00;
 height: 200;
 width: 311px;
 background-color: #E8DECC;
 border: 2px solid #9E988B; z-index:21;
 box-shadow: #9E988B 0px 0px 5px 0px;
 z-index: 1;
 color: #9E988B;
	font-family: Questrial;
	font-style: normal;
	font-variant: ;
	font-weight: 400;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 15px;
 padding: 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}
body:hover #boxb {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}
#maindick {
 position: fixed; margin: auto; right: 0px; left:990px; top: 0; bottom: 10; width: 300px; height: 490px; background: #trans; border: 0px solid #9E988B; border-radius: 17px 0px 17px 0px; box-shadow: #9E988B 0px 0px 0px 0px; overflow: hidden; text-align: left; opacity: 0;}
body:hover #maindick {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}

 .dick {position: absolute; overflow: hidden;
 right: 0px; left:00px; top: 0; bottom: 0; z-index:0; opacity: 1; display: inline-block;}
 .dick img {width: ; height: 250;}

#cocks {
position: fixed; margin: auto; right: 0px; left:840px; top: 170; bottom: 0;opacity: 0;
width: 110px;
height: 120px;
overflow-y: auto;
text-align: center;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
body:hover #cocks{
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}

#cons{
background-color: #823321;opacity: 1;
width: 100px; height: 15px;
border-radius: 0px 8px 0px 8px;
font-family: Questrial; margin-bottom:4;
font-size: 14px;
color: #9E988B;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

#cons:hover{
background-color: #888888;color: #000000;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}



</style>
<a href="profile.php?user=Punpun" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;z-index:999;"></a>

<div id="maindick"><div class="dick"><img src="https://i.imgur.com/aHUTUVm.jpg"></div></div>
<div id="line"></div>
<a href="#00"><div id="main">
<div id="pic"><img src="https://i.imgur.com/aHUTUVm.jpg"></div>
</div>
<div id="main2"><div class="head">R A K A N</div><div class="head2">T H E  C H A R M E R</div>
<div id="submain"><div id="botline"></div></div></div>
</a>

<div id="top"></div><div id="bottom"></div>

<a href="#03"><div id="icon"><div id="subicon"></div><div class="head4"><b>POWER</div><div id="pic3"></div></div></a>
<a href="#02"><div id="icon2"><div id="subicon"></div><div class="head3">STORY</div><div id="pic4"></div></div></a>
<a href="#01"><div id="icon3"><div id="subicon"></div><div class="head3">STATS</b></div><div id="pic2"></div></div></a>


<div id="01" class="darts"><div class="box"><h1>DOSSIER</h1>
Name - <font style="float: right;">--</font><br>
Moniker (s) - <font style="float: right;">--</font><br>
Sex - <font style="float: right;">--</font><br>
Age - <font style="float: right;">--</font><br>
Orientation - <font style="float: right;">--</font><br>
Occupation - <font style="float: right;">--</font><br>
Height - <font style="float: right;">--</font><br>
Weight - <font style="float: right;"> --</font><br>
Build - <font style="float: right;">--</font><br>
Marital Status - <font style="float: right;">None</font><br><br>
<h1>PERSONA</h1>
<i>"Okay, everybody, I'm here, I'm here... the party starts now!"</i>
</div></div>

<div id="02" class="darts"><div class="box"></div>
</div>

<div id="03" class="darts"><div class="box"></div>
</div>

<div id="boxb">
<h1>OUT OF CHARACTER</h1>
[01] These are OOC lines.<br>
[02] These are OOC lines.<br>
[03] These are OOC lines.<br>
[04] These are OOC lines.<br>
[05] These are OOC lines.<br>
[06] I ain't gonna spoonfeed you all day.<br>
[07] Just edit these.<br>
[08] Heh.
</div>

<div id="cocks">
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>

</div>