chainsaw's profile (+music +ooc)

<style>
@import url('https://fonts.googleapis.com/css?family=Permanent Marker');


.pfor
{display: none;
background-color: transparent;}
body {
background:url('https://i.imgur.com/f3A6pNx.png') top left fixed repeat;
background-color: #e1e1e1;
overflow: hidden;}

#profile {border: 0px; background-color: transparent;}
*{cursor: url('https://i.imgur.com/8QmAMfq.png'), default;}

::-webkit-scrollbar {width: 5px; height: 0px;
background:; }

::-webkit-scrollbar-thumb {
background-color:#000; border:1px solid #fff;
-webkit-border-radius: 10px; border-radius: 10px;
}


/*------» rustle «------*/ /*------» rustle «------*/ /*------» rustle «------*/


#opening {
position:fixed; width:100%; height:100%; left:225px; bottom:180px;}

#opening-img {
position:absolute; background-image:
url('https://i.imgur.com/XHwUng4.png');
background-position:0% 20%; background-size:500px;
background-repeat:no-repeat;
background-attachment: absolute;
width:500px; height:632px;
left:150px; bottom:-100px;
box-shadow: inset 0px 0px 20px #9c9c9c,
 0px 0px 20px #9c9c9c;
filter: blur(0px); opacity:1.0; transition: 1s;}

body:hover #opening-img {filter: blur(10px); opacity:.0; transition: 2.5s;}


/*------» images «------*/ /*------» images «------*/ /*------» images «------*/


#pic {position:absolute;
position:0% 20%;
left:150px; bottom:-100px;
box-shadow:0px 0px 20px #9c9c9c,
 0px 0px 20px #9c9c9c;
opacity:.0; transition: 1s;}


#sprite {position:absolute;
left:180px; bottom:-135px;
opacity:.0; transition: 1s;
}

#zzz {position:absolute;
left:-48px; top:-333px;
}

#bubble {position:absolute;
background-color:#e6e6e6;
border-radius:180px;
 width:50px; height:50px;
 left:-60px; top:-345px;
 }

 #arrow {position:absolute;
 color:#e6e6e6;
 font-size:22px;
 left:-74px; top:-332px;
 }


/*------» info «------*/ /*------» info «------*/ /*------» info «------*/


#container {
position:absolute;
left:430px; bottom:30px;
opacity:.0; transition: 1s;}

body:hover #pic {opacity:1.0; transition-delay: 1s;}
body:hover #container {opacity:1.0; transition-delay: 1s;}
body:hover #gif {opacity:1.0; transition-delay: 1s;}


#info {
position:absolute;
left:-120px; bottom:6px;
width:290px; height:40px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:20px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#stats {
position:absolute;
left:-16px; bottom:-48px;
width:110px; height:55px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:20px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#ability {
position:absolute;
left:91px; bottom:-48px;
width:110px; height:55px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:20px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#trainer {
position:absolute;
left:-45px; bottom:-200px;
width:225px; height:150px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:15px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#ooc {
position:absolute;
left:-53px; bottom:-140px;
width:290px; height:40px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:10px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

body:hover #bg {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #pic {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #info {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #stats {
 opacity:1.0; transition-delay: 1.8s;
 }
body:hover #ability {
 opacity:1.0; transition-delay: 2.4s;
 }
body:hover #trainer {
 opacity:1.0; transition-delay: 3s;
 }
body:hover #ooc {
 opacity:1.0; transition-delay: 3.5s;
 }
body:hover #bubble {
 opacity:1.0; transition-delay: 3.5s;
 }
body:hover #arrow {
 opacity:1.0; transition-delay: 3.5s;
 }
body:hover #zzz {
 opacity:1.0; transition-delay: 3.5s;
 }
body:hover #sprite {
 opacity:1.0; transition-delay: 1s;
 }


/*------» rocks «------*/ /*------» rocks «------*/ /*------» rocks «------*/


a {color: #888;
text-decoration: none;
font-weight: normal;
display: inline-block;
}

 	a:hover {color: red;
	text-decoration: none;
	transition: 1.5s;
	}

a[data-tooltip] {
 position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
 position: absolute;
 display: none;
 opacity: 1.0;
}
a[data-tooltip]::before {
 content: attr(data-tooltip);
 background: #3e3e3e;
 color: white;
 font-family:'courier';
 font-size:15px;
 padding: 5px;
 border-radius: 5px;
 width:80px;
 text-decoration: none;
}
a[data-tooltip]::after {
 width: 0;
 height: 0;
 border: 6px solid transparent;
 content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
 display: block;
}

a[data-tooltip][data-placement="bottom"]::before {
  top: 100%;
  left: 0;
  margin-top: 10px;
}
a[data-tooltip][data-placement="bottom"]::after {
  border-bottom-color: #3e3e3e;
  border-top: none;
  top: 100%;
  left: 10px;
  margin-top: 4px;
}


s {
text-decoration:none;
color:#888;
 font-family: "permanent marker";
 font-size:18px;
letter-spacing:2px;
text-transform:lowercase;
text-align:justify;
 padding:1px;
}


</style>



<body>
<div id="opening">
<div id="opening-img">
</div>


<div id="pic">
<img src="https://i.imgur.com/XHwUng4.png" height="632">
</div>


<div id="container">


 <div id="info">
 <br>
 <s>
 name:
 </s>  CHAINSAW
 <font style="float:right;">
 <s>age: </s>   37</font>
 </div>


 <div id="stats">
 <s>
 ht:
 </s>  6'6
 <br><br>
 <s>wt: </s>   89kg
 </div>


 <div id="ability">
 <s>
 ability:
 </s>
 <br><br>
    fur coat
 </div>


 <div id="trainer">
 trainer:
 <a data-tooltip="lee's first, given as a gift from his father." data-placement="bottom" target="_blank" href="profile.php?user=9+inch+snails">
    "lee" donovan</a>
 </div>


 <div id="ooc">
 ooc:  <br>
 miss me with ooc drama. thanks.
 </div>


 <div id="sprite">
 <a data-tooltip="LVL 57" data-placement="bottom"><img src="https://i.imgur.com/vuyLPLa.gif"></a>

 <div id="bubble">
   </div>
   <div id="arrow">
   ◀
  </div>

 <div id="zzz"><img src="https://i.imgur.com/kAjznZw.gif">
 </div>


</div>

<div id="music-player">
<div style="margin-top:4px;">
<audio controls style="opacity:0; width:150px; margin-bottom:240px; margin-left:117px;" loop="">
<source src="https://dl.dropboxusercontent.com/s/37c5pzgilicw93k/Liquid%20Negrocity%20-%20Midnight%20Crew.mp3?dl=0">
</audio>
</div>
</div>


</div>
</body>