@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.5em;
}

#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>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground