music update Nasir

<style>
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);


/* ad3d00 | ffb038 | D19341 */
.pfor {display: none;}
body {background: #6A6561; background-size:50%; overflow: hidden;
background-image:url("http://i.picpar.com/C0hc.jpg");
background-size: 63%;
background-attachment:fixed;
background-position: bottom right;
background-repeat: no-repeat;}
#profile {border: 0px; background: transparent;}
body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;}
#whole{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}

::-webkit-scrollbar {background: transparent; width: 9px;}
::-webkit-scrollbar-thumb {border: 1px solid black; border-top: 8px transparent solid; border-right: 2px solid transparent; border-bottom: 8px transparent solid;}

::selection {background: #fe5900;}

a {
color: #FFF;
text-align: center;
font-family: impact;
font-size: 20px;
letter-spacing:2px;
text-shadow:3px 5px #000000;
line-height: 26px;
text-decoration:none;
}
#i {position: fixed;
width: 400px; height: 600px;
top: 150px; left: 200px;
background-image: url(https://i.imgur.com/LZpPXOs.png); background-color: black; background-size: cover; background-position: center;
border: 5px solid #000;
z-index: 1;
}

#holder {position: fixed;
width: 405px; height: 700px;
top: 113px; left: 203px;
overflow: hidden;
z-index: 1;}

#thewind {position: absolute;
width: 387px; height: 283px;
top: 130px; left: -200px;
text-align: center;
font-family: 'Share';
 font-size: 11px;
color: #FFF;
line-height: 14px; padding: 5px;
border: 5px solid #6b3e3c;
background-color: #877056;
transition: ease-in-out 1.2s;
transition-delay: 0.5s;
opacity: 0;}

body:hover #thewind {top: 40px; left: -2px; opacity: 1;}

body:hover #ooc {left: 1px; opacity: 1;}

body:hover #powers {right: 2px; opacity: 1;}

#ooc {position: absolute;
width: 388px; height: 67px;
bottom: 8%; left: -200px;
text-align: justify; font-family: 'Share'; font-size: 11px; color: #FFF; line-height: 14px; padding: 5px;
background-color: #877056;
border: 2px solid #6b3e3c;
transition: ease-in-out 1.2s;
transition-delay: 0.5s;
overflow: auto;
opacity: 0;}

#powers {position: absolute;
width: 388px; height: 197px;
bottom: 20.5%; right: -400px;
text-align: center; font-family: 'Share'; font-size: 11px; color: #FFF; line-height: 14px; padding: 5px;
background-color: transparent;
transition: ease-in-out 1.2s;
transition-delay: 0.5s;
overflow: auto;
opacity: 0;}

::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-track {border-radius: 0px; background-color: transparent;}
::-webkit-scrollbar-thumb {border-radius: 90px; background-color: #666; background-repeat: no-repeat; height: 34px; }




a:active, a:visited, a:link {color:#8A7E8A; text-decoration: none; letter-spacing: -0.5px;
-webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out; -webkit-transition:all 0.7s ease-in-out;
transition:all 0.7s ease-out; }
a:hover {color:#AAA; text-decoration:none; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out ; -o-transition:all 0.7s ease-in-out; -webkit-transition:all 0.7s ease-in-out; transition:all 0.7s ease-out;}

/* MUSIC PLAYER THING */

@font-face{
 font-family:'musicfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/againts.ttf);
}

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


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: black;
}

#musiclist{
 position: absolute;
 top: 30px;
 left: 10px;
 height:146.5px;
 width: 380px;
 overflow: auto;
 overflow-x: hidden;
 padding-right: 0px;
 cursor:default;
 border-top: 2px solid black;
 border-bottom: 2px solid black;
border-right: 1px solid black;
box-sizing: border-box;
}

#tracklist{
 position: relative;
 width: 100%;
 height: 31px;
 border: 1px solid black;
 box-sizing: border-box;
 border-top: 0px solid transparent;
 border-right: 2px solid black;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
 z-index: 1;
}


#infoslide{
 float: left;
 width: 100%;
 height: 100%;
 text-align: left;
 overflow: hidden;
 font-size: 12pt;
 font-weight: 600;
line-height: 31px;
 letter-spacing: 2px;
 font-family: 'musicfont', Times, Arial;
 color: black;
 -webkit-transition: all 1s;
 transition: all 1s;
 box-sizing: border-box;
 padding-left: 40px;
}

#trackplay{
 position: absolute;
 left: 0px;
 top: 0px;
 height: 100%;
 width: 0px;
 border-right: 1px solid black;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#trackplay audio{
 margin-left: -5px;
 zoom: 110%;
 margin-top: -2px;
}

#tracklist:hover #trackplay{
 width: 25px;
}

#tracklist:hover #infoslide{
 padding-left: 50px;
}

#tracklist:hover{
 -webkit-transition: all .1s;
 transition: all .1s;
 border-left: 2px solid black;
}

/* CUSTOMIZATION */

#infoslide{
 color: white;
letter-spacing: 3px;
text-shadow: 1px 1px 2px black;
}

#musiclist{
 border-color: black ;
 background-color: transparent;
}

#tracklist{
 border-color: ;
 background-color: #e96765 ;
}



</style>
<div id="i">
</div>
<div id="holder">
<div id="thewind">6'2.<br>
160 lbs.<br>
Gay.<br>
I guess a dog<br>
Name: Head Ass<br><br>

Age: Headass<br><br>

Height: Head<br><br>

Weight: Ass<br><br>

Gender: Neckass<br><br>

Orientation: Faceass<br><br>

Marital: Whole body ass<br><br>

Occupation: Head to the ass<br><br>




</div>

<div id="ooc">
 <i>

</div>
<div id="powers">
<div id="musiclist">

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/u0l8my6rv1vd9zc/Black%20Skinhead.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Blakkk Skkkinhead // Kkkanye yeezus.
 </div>
 </div>

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/2nmd8p6sjpcuybc/broccoli.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Brocolli // Yachty and Dram
 </div>
 </div>

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/paibr1jtvsopxl8/mad.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 U Mad? // Vic Mensa and Kanye West
 </div>
 </div>

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/t38rd4fvhsu44z0/Future%20-%20Stick%20Talk.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Future // Stick Talk
 </div>
 </div>

<div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/0px7kz4muojt6k7/Flatbush%20ZOMBiES%20-%20Glorious%20Thugs.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Flatbush Zombies // Glorious Thugs
 </div>
 </div>

<div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/kl3g7q7i7vxj0dp/The%20Underachievers%20-%20Herb%20Shuttles%20%28%20Official%20Music%20Video%20%29.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 The Underachievers // Herb Shuttles
 </div>
 </div>

<div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/o9qsb3qzyv1mpz2/Desiigner%20-%20Tiimmy%20Turner%20%28Official%20Audio%29.mp3?dl=0" loop=3 />
 </div>
 <div id="infoslide">
 Desiigner // Timmy Turner
 </div>
 </div>


</div>



</div>
</div>

</div>