cr draconitegf

-- FONTS --
@font-face {
font-family: handy;
src: url(https://dl.dropbox.com/s/ga9hf4idu3egjb5/handy00.ttf);
}

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

-- IMAGE--
z-index: 5;
position: absolute;
left: -1em;
top: -6em;

-- TITLE --
font-family: handy;
background: #B57A95;
padding: 15px;
width: 8em;
border-radius: 20px;
position: absolute;
left: 2.5em;
top: -1.8em;

-- SCROLLBOX LEFT --
height: 5em;
overflow: auto;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 10px;
padding: 5px;
background: white;
filter: drop-shadow(0 0 0.1rem #5C5C5C);

-- SCROLLBOX RIGHT --
height: 8em;
overflow: auto;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 10px;
padding: 5px;
background: white;
filter: drop-shadow(0 0 0.1rem #5C5C5C);

-- SECTION TITLES --
font-family: Chemre;

-- SECTION SCROLLBOX --
background: white;
border: 1px solid #706b72;
padding: 5px;
height: 8em;
overflow: auto;
border-radius: 10px;

-- BUTTON BORDER --
border: 1px solid #706b72;


-- SCROLLBAR --
<style>

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background-color: #e4e4e4;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ccc;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #e4e4e4;
border: 1px solid #aaa;
}

</style>

-- MUSIC PLAYER --
<head>
<script src="https://kit.fontawesome.com/1953b7c367.js" crossorigin="anonymous"></script>
</head>

<style>
#music-player {
display: flex;
align-items: center;
justify-content: center;
}
#music-player {
height: 1.5em;
width: 1.5em;
font-size: 1em;
padding: 0.125em;
border-radius: 50%;
border: 1px solid #fff;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(237,211,255,1) 100%);
-webkit-filter: drop-shadow(0px 0px 1.5px #e4c8f6);
position: absolute;
bottom:1.5em;
right: .5em;
z-index: 40;
-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);
}
}
#music-player:hover {
-webkit-animation: pop 0.3s ease;
}
</style>

<div id="music-player"><i class="fa-solid fa-headphones"style="font-size:1em; color:#fff;-webkit-text-stroke: 0.5px #f0d1ff;"></i></div>
<audio id="audio" src="https://dl.dropbox.com/s/l2impfql42ku4fu/iz%20one%20dreamlike.mp3?dl=0"></audio>

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