for laddi

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


.pfor
{display: none;
background-color: transparent;}
body {
background:url('https://66.media.tumblr.com/890e30b79544c117b443f1d0675fd269/tumblr_o88m7t3SYV1v6ayv8o8_r2_75sq.png') top left fixed repeat;
background-color: #fff5d8;
overflow: hidden;}

#profile {border: 0px; background-color: transparent;}
*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}

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

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


/*------» sizzle «------*/ /*------» sizzle «------*/ /*------» sizzle «------*/


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

#opening-img {
position:absolute; background-image:
url('https://i.imgur.com/LsL0LOI.gif');
background-position:0% 20%; background-size:492px;
background-repeat:no-repeat;
background-attachment: absolute;
width:492px; height:277px;
left:150px; bottom:50px;
box-shadow: inset 0px 0px 20px #f1871c,
 0px 0px 20px #f1871c;
filter: blur(0px); opacity:1.0; transition: 1s;}

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


/*------» portrait «------*/ /*------» portrait «------*/ /*------» portrait «------*/


#pic {position:absolute;
left:225px; bottom:100px;
box-shadow:0px 0px 20px #ff7f53,
 0px 0px 20px #ff7f53;
opacity:.0; transition: 1s;}


#sprite {position:absolute;
left:90px; bottom:45px;
opacity:.0; transition: 1s;
}

#gallery {position:absolute;
left:-210px; bottom:40px;
width:240px;
opacity:.0; transition: 1s;
}

#flame {position:absolute;
left:-90px; bottom:60px;
opacity:.0; transition: 1s;
}

#flame2 {position:absolute;
left:-220px; bottom:190px;
opacity:.0; transition: 1s;
}

#flame3 {position:absolute;
left:120px; bottom:190px;
opacity:.0; transition: 1s;
}

#melody {position:absolute;
top:15px; left:120px;
}

#bubble {position:absolute;
background-color:#add6ff;
border-radius:180px;
 width:50px; height:50px;
 left:120px; top:30px;
 }

 #arrow {position:absolute;
 color:#add6ff;
 font-size:10px;
 left:-20px; bottom:270px;
 }


/*------» volcano «------*/ /*------» volcano «------*/ /*------» volcano «------*/


#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:-80px; bottom:70px;
width:219px; height:125px;
background-color: #fac8bc;
 color:#b95951;
 font-family:helvetica,arial,sans-serif;
 font-size:9px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
float:left;
overflow:auto;
box-shadow:0px 0px 20px #ff7f53,
 0px 0px 20px #ff7f53;
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 #gif {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #melody {
 opacity:1.0; transition-delay: 2.5s;
 }
body:hover #sprite {
 opacity:1.0; transition-delay: 1.8s;
 }
body:hover #flame {
 opacity:1.0; transition-delay: 2.5s;
 }
body:hover #flame2 {
 opacity:1.0; transition-delay: 3s;
 }
body:hover #flame3 {
 opacity:1.0; transition-delay: 3.3s;
 }
body:hover #gallery {
 opacity:1.0; transition-delay: 3.8s;
 }


/*------» coal «------*/ /*------» coal «------*/ /*------» coal «------*/


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

a[data-tooltip] {
 position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
 position: absolute;
 display: none;
 opacity: 0.80;
}
a[data-tooltip]::before {
 content: attr(data-tooltip);
 background: #feebbd;
 color: #f56f4d;
 font-family:helvetica,arial,sans-serif;
 font-size:9px;
 padding: 3px;
 border-radius: 5px;
 white-space: nowrap;
 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="left"]::before {
 top: -25%;
 right: 100%;
 margin-right: 10px;
}
a[data-tooltip][data-placement="left"]::after {
 border-left-color: #ffcaad;
 border-right: none;
 top: 50%;
 right: 100%;
 margin-top: -6px;
 margin-right: 4px;
}


s {
text-decoration:none;
color:#f4896f;
 font-family:georgia,serif;
 font-size:30px;
letter-spacing:2px;
text-transform:lowercase;
text-align:justify;
 text-shadow: 1px 0px 0px #fa7655,
 0px 1px 0px #fa7655,
 -1px 0px 0px #ffe291,
 0px -1px 0px #ffe291;
 padding:1px;
}

u {
text-decoration:none;
background-color:#feebbd;
color:#f56f4d;
font-family: helvetica,arial,sans-serif; font-size: 12px;
 font-size:9px;
 line-height:12px;
 letter-spacing:1px;
text-transform:uppercase;
padding:2px;
}

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


<div id="pic">
<img src="https://i.imgur.com/Q24g6Sp.gif" height="125">
</div>


<div id="container">


<div id="music-player">
<div style="margin-top:4px;">
<audio controls style="opacity: 0; width:150px; margin-bottom:85px; margin-left:130px;">
<source src="MP3LINKHERE">
</audio>
</div>
</div>


 <div id="info">

 <br><br>
 <s>
 🔥 laddi 🔥
 </s>

 <br><br>
 magby. doesn't like <br>
 many things.

 <br>
 <a data-tooltip="-------------------------"><small>[ out of character ]</small></a>

 <br><br>

 <u>type</u> fire <u>nature</u> lonely

 <br>

 <u>likes</u> <i>tba</i>, <i>tba</i>

 <br>
 <i>tba</i>

 <br><br><br>

 </div>


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


 <div id="sprite">

 <img src="https://i.imgur.com/searAn7.gif">

 </div>


<div id="flame3">

 <img src="https://i.imgur.com/bYtcxCM.gif" height="30">

 </div>


<div id="flame2">

 <img src="https://i.imgur.com/bYtcxCM.gif" height="30">

 </div>


<div id="flame">

 <img src="https://i.imgur.com/bYtcxCM.gif" height="45">

 </div>



<div id="gallery">

 <a target="_blank" href="https://roleplay.chat/profile.php?user=Teddiursa"><img src="https://i.imgur.com/x2vKNOJ.png"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=seilkie"><img src="https://i.imgur.com/f87kL5q.png"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=spud"><img src="https://i.imgur.com/liOjZeR.png"></a>

 </div>



</div>
</body>