cr jibeomcito #2 music

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>

<div id="music-player">
<div id="section01">
<p>
<img src="https://barbara.crd.co/assets/images/gallery21/2b2bdc93_original.gif?v=cbba7835" id="startOrStopImg" alt="Play Button">
</p>
</div>
<div id="section02">
<p style="font-family: 'Poppins', sans-serif; font-size: 0.875em; letter-spacing: 0px;">KNIGHTS THE PHANTOM THIEF by KNIGHTS</p>
</div>
</div>

<style>
#music-player {
position: absolute;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(141,166,182) 100%);
width: 6em;
height: 1.5em;
display: inline-flex;
border-radius: 0.8em;
padding: 0.125em;
transition-delay: 0.75s;
position: relative;
bottom: -0.25em;
left: 9.75em;
}

@media only screen and (max-width: 600px) {
#music-player {
left: 9.5em;
}
}

@keyframes marquee {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(-100%);
}
}

#holder:hover #music-player {
transform: translate(-5.5em, 9em);
}

#section01, #section02 {
overflow: hidden;
white-space: nowrap;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#section01 {
margin-right: 0.125em;
flex: 33%;
}

#section02 p {
transform: translateX(100%);
animation: marquee 6s linear infinite;
font-family: good-time;
letter-spacing: 0.1em;
}

@keyframes rotating {
0% {
transform: rotate(0);
}

33% {
transform: rotate(-25deg);
}

66% {
transform: rotate(25deg);
}

100% {
transform: rotate(0);
}
}

#section02 {
flex: 66%;
}

#section01 img {
height: 1.2em;
}

#section01 img:hover {
animation: rotating 0.3s linear infinite;
}
</style>

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

<audio id="audio" src="https://cdn.discordapp.com/attachments/1011654612551487558/1020593805671542815/Knights_the_Phantom_Thief.mp3"></audio>