cr jibeomcito #5

-- SCROLLBOX --
background: white;
height: 13.5em;
width: 13.2em;
padding: 10px;
position: absolute;
left: 1.4em;
bottom:1.4em;
overflow: auto;
border-radius: 10px

-- HIGHLIGHT --
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
border-radius: 20px;

-- HIDDEN SCROLLBAR --
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}

-- MUSIC PLAYER --
<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://pixelbank.neocities.org/decome/computers%20and%20electronics/483c42f3.gif" id="startOrStopImg" alt="Play Button">
</p>
</div>
<div id="section02">
<p style="font-family: 'Poppins', sans-serif; font-size: 0.875em; letter-spacing: 0px;">OMG by New Jeans</p>
</div>
</div>

<style>
#music-player {
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, #e0d1d3 100%);
width: 6em;
height: 1.5em;
display: inline-flex;
border-radius: 0.8em;
padding: 0.125em;
transition-delay: 0.75s;
}

@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/1067682410914906112/yt1s.com_-_NewJeans_OMG_Audio.mp3"></audio>