cr angeidiarys #4 music player

<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="//glenthemes.github.io/-music-/glenplayer07.js"></script>

<style>

@font-face {
font-family: "spacerangerlasital";
src:url(https://dl.dropbox.com/s/qj5rw9r6sf4usau/spacerangerlasital.ttf);
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
--Circle-Size:55px;
--Progress-Border-Size:2px;
--Progress-Empty:#00000000;
--Progress-Fill:#00000000;
--Player-Background:#FFFFFF;
--Play-Pause-Buttons-Size:25px;
--Play-Pause-Buttons-Color:#ea4e8e;
--Player-Text-Margin:16px;

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

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

#glenplayer07 {
position: relative;
}

.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%;
border: 2px solid #ea4e8e;
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);
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

.pausee {display:none;}

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

.music-info {
margin-left:5px;
line-height:0.75em;
}

.song-name {
font-family:"spacerangerlasital";
font-size:1em;
text-transform:uppercase;
letter-spacing:1.5px;
color:#ea4e8e;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

.artist-name {
margin-top:3px;
text-align: left;
font-family:karla;
font-size:0.875em;
letter-spacing:0.3px;
color:#fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

</style>
<body>
<!-------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">IDSMILE</div>
<div class="artist-name">NIGHTCORD</div>
</div><!--music-info-->
</div><!--flamingo-->
</div><!--glenplayer07-->

<audio id="audio" src="https://cdn.discordapp.com/attachments/1011654612551487558/1028535519346442260/25-ji_Nightcord_de_x_MEIKO_-_ID_Smile_Color_Coded_Kan_Rom_Eng_Lyrics_Project_Sekai.mp3" type="audio"></audio>
<!----end music player---->