spinning cd w/ cover

<!-- music player made by arsha~! cr appreciated @girisgoblog pls dont repost on other pastebins -->

<style>

lol {
}

lol, .img2 { /* album's cover image u can change the size! */
position: relative;
left: -0.75em;
width: 60px;
height: 60px;
background-color: black;
color: black;
z-index: 999;
}

.img1 { /* cd image u can change the size too */
position: absolute;
left: 20px;
top: 0.375em;
width: 64px;
height: 64px;
z-index: 800;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}

@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}

.img1:hover { /* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}

@media only screen and (max-width: 600px) {

.img1 {
left: 25px;
bottom: 1em;
width: 47px;
height: 47px;
}

.img2 {
width: 48px;
height: 48px;
}

}

</style>

<body>
<div id="lol"><img class="img2"src="https://dl.dropbox.com/scl/fi/e362qggf9gs1n7v6tayh5/b0d28ef9dda70f7f5df46585b0ffffae.jpg?rlkey=hlp5nxuugmbok7mqdfbmmaapl&dl=0"><img class="img1" src="https://dl.dropbox.com/scl/fi/i1l2chqc8jalulqxdtl86/cd.png?rlkey=z152mgvkwxen4ag0p697cgnn9&dl=0" width="auto" height="45px"></div>

<script>
document.getElementById("lol").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>

<audio id="audio" src="https://dl.dropbox.com/scl/fi/mijw8gv6did7z4thgxrss/Perfect-Night.mp3?rlkey=i53y17j6427aytjmkxoh3cose&dl=0"></audio>

</body>