LESLIE [GIFT]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Voltaire|Lobster+Two|Crushed|Varela+Round');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@font-face { font-family: 'cutthecrap'; src: url('https://static.tumblr.com/ujahjev/tGWplsvls/cut_the_crap.ttf') format('truetype');}
@font-face { font-family: 'calvous'; src: url('https://static.tumblr.com/uopakca/Jmnq5fig6/calvous_spurs_stamp_demo.ttf') format('truetype');}
@font-face { font-family: 'devilnet'; src: url('https://static.tumblr.com/ujahjev/xcVplur0a/the_devil_net.ttf') format('truetype');}

body {
background-color: #fff2fb;
background-image: url('');
background-position: right;
background-size: 60%;
background-repeat: no-repeat;
}

#fairychan {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color: pink;
}

::-webkit-scrollbar {
width: 2px;
height: 3px;
}


#pinkcircle {
position: absolute;
right: 3%;
top: 4%;
height: 200px;
width: 200px;
border-radius: 50%;
background: #ffdbf5;
background-image: url('');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
box-shadow: 0px 0px 3px 3px #ff94e1;
transform: rotate(0deg);
}

#img {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
height: 200px;
width: 200px;
border-radius: 50%;
background: #ffdbf5;
background-image: url('https://64.media.tumblr.com/ca9f4bef4f22182fedb60736d0a87769/05e1f78dd0fd4db3-99/s500x750/db79e23e99442dbe2d84dafe3418eb8e5dfe78d4.gif');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
box-shadow: 0px 0px 3px 3px #ff94e1;
transform: rotate(0deg);
}

#img2 {
position: absolute;
z-index: 1;
left: 0px;
top: 215px;
height: 200px;
width: 200px;
border-radius: 50%;
background: #ffdbf5;
background-image: url('https://64.media.tumblr.com/16c3d0e5905f12c7b1d343e80849ab6d/tumblr_pksmik1ybx1vkqunjo7_400.gif');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
box-shadow: 0px 0px 3px 3px #ff94e1;
transform: rotate(0deg);
}

#img3 {
z-index: 2;
left: 0px;
top: 415px;
height: 200px;
width: 200px;
border-radius: 50%;
background: #ffdbf5;
background-image: url('https://64.media.tumblr.com/081fb02ce0de16b9fac2e203f39b9219/tumblr_pqxj79BC6f1y4dodyo2_500.gif');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
box-shadow: 0px 0px 3px 3px #ff94e1;
transform: rotate(0deg);
}

h1 {
 margin: 0px 0px 5px 0px;
 font-family: 'Poppins', sans-serif;
text-tranform: capitals;
 font-weight: 900;
font-family: poppins;
 -webkit-text-fill-color: transparent;
 -webkit-text-stroke-width: 0.8px;
 -webkit-text-stroke-color: #040404;
 font-style: italic;
 text-shadow: -4px 4px #ff94e1;
}

#title {
position: absolute;
right: 280px;
bottom: 133px;
height: 80px;
width: 410px;
text-align: left;
font-size: 80px;
transform: rotate(0deg);

}

span {
text-decoration: none;
font-family: 'Varela Round';
background-color: #ff80dc;
border: 1px dotted #fff;
border-radius: 8%;
color: #fff;
margin-right: 8px;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 17px;
line-height: 3px;
text-decoration: none;
text-shadow: 2px 2px #888;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

span:hover {
color: #eee;
text-decoration: none;
opacity: 0.7;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

#infobox {
position: absolute;
z-index: 1;
height: 340px;
width: 500px;
right: 212px;
bottom: -350px;
border-radius: 5%;
background: #fff;
box-shadow: -2px 2px #ff94e1;
background-image: url('https://www.transparenttextures.com/patterns/absurdity.png');
background-size: %;
background-repeat: repeat;
background-position: center;
}

#tinypic {
position: absolute;
z-index: 2;
height: 98px;
width: 98px;
background-image: url('https://64.media.tumblr.com/3cd0fc5bcd22f5a010e515990d0955e7/tumblr_pl0sh8LqWg1t9a4a0_1280.jpg');
background-size: 100%;
background-repeat: no-repeat;
right: 10px;
top: -60px;
box-shadow: 1px 1px #ff94e1;
}

#info1 {
position: absolute;
z-index: 2;
top: 15px;
left: 15px;
height: 300px;
width: 350px;
background: #fff;
border-radius: 2%;
padding: 5px;
box-shadow: 0px 0px 0.5px 0.5px #ff94e1;
font-family: 'Crushed';
font-size: 12px;
line-height: 14px;
color: #a3819e;
overflow-y: auto;
}

b {
font-family: 'calvous';
color: #ff80dc;
text-shadow: 1px 1px #777;
font-size: 11px;
}

a {
font-family: 'Lobster Two';
color: #fff;
text-shadow: 0px 0px 2px #000;
text-decoration: none;
}

#tab1 {
position: absolute;
z-index: 3;
right: 18px;
top: 40px;
height: 80px;
width: 80px;
background-image: url('https://66.media.tumblr.com/605736cbdc3d809b58e1751a88e4a81e/tumblr_mrcexi7CEH1rfjowdo1_500.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab2 {
position: absolute;
z-index: 3;
right: 18px;
top: 110px;
height: 80px;
width: 80px;
background-image: url('https://66.media.tumblr.com/605736cbdc3d809b58e1751a88e4a81e/tumblr_mrcexi7CEH1rfjowdo1_500.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab3 {
position: absolute;
z-index: 3;
right: 18px;
top: 180px;
height: 80px;
width: 80px;
background-image: url('https://66.media.tumblr.com/605736cbdc3d809b58e1751a88e4a81e/tumblr_mrcexi7CEH1rfjowdo1_500.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab4 {
position: absolute;
z-index: 3;
right: 18px;
top: 250px;
height: 80px;
width: 80px;
background-image: url('https://66.media.tumblr.com/605736cbdc3d809b58e1751a88e4a81e/tumblr_mrcexi7CEH1rfjowdo1_500.gif');
background-size: 100%;
background-repeat: no-repeat;
}

.friend {
width: 65px;
height:41px;
opacity: 1;
border: 1px dashed #ab1645;
border-Radius: 10%;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
opacity: 0.8;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
}

.friend:hover {
opacity: 0.7;
border: 1px dashed yellow;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
}

#music {
position: absolute;
z-index: 5;
top: 490px;
right: 750px;}

#music1{
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}

#music1:hover #music2{}

#music1:hover #music3{}

#music1:hover #musiclist{ opacity:1;}

#music3 {
position: fixed;
width:80px;
height:85px;
background-size: 100%;
background-image: url('https://www.seekpng.com/png/full/393-3939563_music-notes-tumblr-transparent-music-png.png');
background-repeat: no-repeat;
overflow:hidden;
background-color: transparent;
opacity: 0.9;
filter: grayscale(0%);
transform: rotate(-40deg);
}

</style>
<div id="fairychan" oncontextmenu="return false;">
<div id="pinkcircle"><div id="img"></div>
<div id="title"><h1>Leslie</h1>
<span title="Put some words here.">OOC</span><span style="">Short</span><span title="">Is</span><span title="">Best</span><span title="">These hover!</span>
</div>
<div id="infobox">
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#1"><div id="tab4"></div></a>
<div id="tinypic"></div>
<div id="info1">
<div style="height: 300px; overflow: hidden;">
<a name="1"></a>
<div style="height: 300px; overflow-y: auto;">
<div style="margin: 0 auto; width: 29em;">
Words go here. <B>Bold.</B> <a href="//roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu.</a> Words words words words words words words words.
</div></div>

<a name="2"></a>
<div style="height: 300px; overflow-y: auto;">
<div style="margin: 0 auto; width: 29em;">
Tab 2.
</div></div>

<a name="3"></a>
<div style="height: 300px; overflow-y: auto;">
<div style="margin: 0 auto; width: 29em;">
Tab 3.
</div></div>

<a name="4"></a>
<div style="height: 300px; overflow-y: auto;">
<div style="margin: 0 auto; width: 29em;">
<center>
<a href="//roleplay.chat/profile.php?user=Channarong" target="_blank"><img src="https://64.media.tumblr.com/8cd0ab44c1ea1d1d2eab39bab1b365c9/879c4fd8f01d3582-4f/s640x960/01a0043c0eae7e3ae65685d1f75a5da1673606be.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://c.tenor.com/06f4dM8xGCEAAAAC/astro-sanha.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://c.tenor.com/06f4dM8xGCEAAAAC/astro-sanha.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://c.tenor.com/06f4dM8xGCEAAAAC/astro-sanha.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://c.tenor.com/06f4dM8xGCEAAAAC/astro-sanha.gif" title="Info here" class="friend"></a>
</center>
</div></div></div></div>
</div>
<div id="img2"></div>

<div id="music">
<div id="music1">
<div id="music3">

<audio controls style="opacity: 0;"><source src="https://www.dropbox.com/s/cp3gjyyiismojgz/%5BMV%5D%20E%27LAST%28%EC%97%98%EB%9D%BC%EC%8A%A4%ED%8A%B8%29%20_%20Tears%20Of%20Chaos%28%EB%88%88%EB%AC%BC%EC%9E%90%EA%B5%AD%29.mp3?raw=1"></audio><script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="efa4bf266fe8bb445bebb0cb-|49" defer=""></script>


</div>

</div>