circle music player by glenthemes

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
<style>
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
 --Circle-Size:38px;
 --Progress-Border-Size:2px;
 --Progress-Empty:#000;
 --Progress-Fill:#FFFFFF;
 --Player-Background:#FFFFFF;
 --Play-Pause-Buttons-Size:14px;
 --Play-Pause-Buttons-Color:#ED93B4A3;
 --Player-Text-Margin:16px;

 --Song-Name-Font-Size:10px;
 --Song-Name-Color:#FFFFFF;

 --Artist-Name-Font-Size:11px;
 --Artist-Name-Color:#FFFFFF;
}

#glenplayer07 {
 position:fixed;
 bottom:0;margin-bottom:30px;
 left:0;margin-left:30px;
 z-index:99;
}

.flamingo {
 display:flex;
 align-items:center;
}

.circleofdeath {
 width:var(--Circle-Size);
 height:var(--Circle-Size);
 border-radius:100%;
 overflow:hidden;
}

.tinfoil {
 width:var(--Circle-Size);
 height:var(--Circle-Size);
 background:var(--Progress-Empty);
 border-radius:100%;
}

.oven {
 background:var(--Progress-Fill);
}

.oliveoil {
 width:100%;
 height:100%;
}

.crust {
 position:absolute;
 top:0;
 display:flex;
 align-items:center;
 justify-content:center;
 width:var(--Circle-Size);
 height:var(--Circle-Size);
}

.cherry {
 display:flex;
 align-items:center;
 justify-content:center;
 width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
 height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
 background:var(--Player-Background);
 border-radius:100%;
 cursor:pointer;
 z-index:1;
}

.music-controls {display:flex;align-items:center}

.music-controls .material-icons {
 font-size:var(--Play-Pause-Buttons-Size);
 color:var(--Play-Pause-Buttons-Color);
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.music-info {
 margin-left:var(--Player-Text-Margin);
 line-height:1em;
}

.song-name {
 font-family:arial;
 font-size:var(--Song-Name-Font-Size);
 text-transform:uppercase;
 letter-spacing:0.3px;
 color:var(--Song-Name-Color);
}

.artist-name {
 margin-top:3px;
 font-family:arial;
 font-size:var(--Artist-Name-Font-Size);
 letter-spacing:0.3px;
 color:var(--Artist-Name-Color);
}
</style>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer07">
 <div class="flamingo">
 <div class="circleofdeath">
 <div class="tinfoil">
 <div class="oliveoil"></div>
 </div>
 <div class="crust">
 <div class="cherry">
 <div class="music-controls">
 <i class="material-icons playy">play_arrow</i>
 <i class="material-icons pausee">pause</i>
 </div>
 </div><!--cherry-->
 </div><!--crust-->
 </div><!--circleofdeath-->

 <div class="music-info">
 <div class="song-name"> song name!! </div>
 <div class="artist-name"> artist name !! </div>
 </div><!--music-info-->
 </div><!--flamingo-->
</div><!--glenplayer07-->

<audio id="audio" src="https://dl.dropbox.com/s/nimob6mfws55qz4/Roly-Poly.mp3"audio"></audio>
<!----end music player---->