pro-standard cr nork2004 codes & music player

---CODES---
<style>
@font-face {
font-family:'nintendo';
src: url(https://dl.dropbox.com/s/8w4sembeqyz4rsq/Nintendo-DS-BIOS.ttf);
}
@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}
::-webkit-scrollbar {
width: 16px
}
::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
::-webkit-scrollbar-thumb:vertical {
background: url("https://dl.dropbox.com/s/9a29qbkza3gmgl7/scroll1.png"), linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
background-repeat: no-repeat;
background-size: 65% auto, cover;
background-position: center;
}

::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 15px
}
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 3px 0 0;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 0 3px 0;
}
</style>

---MUSIC PLAYER---
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>

<style>
@font-face {
font-family:'nintendo';
src: url(https://dl.dropbox.com/s/8w4sembeqyz4rsq/Nintendo-DS-BIOS.ttf);
}
#musicplayer{
display:grid;
grid-template-columns:30px auto;
align-items:center;
width: 125px;
font-size:15px;
line-height: 140%;
background:white;
border: 1px solid black;
border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(-270deg, #FFFFFF 0%, #1377BB 50%, #68b0d6 100%);
}
@media only screen and (max-width: 600px) {
#musicplayer {
width: 100px;
}
}
#musictitle{
overflow: hidden;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
white-space: nowrap;
display:inline-block;
font-family:'nintendo';
color: white;
}

#musicpixel{
width:100%;
position:relative;
left: 10px;
min-height: 20px;
border-right: 1px solid black;
}

.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;

background:white;
}

#musicpixel img{
display:block;
}

.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}

@keyframes marquee{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}

</style>

<div id='musicplayer'>
<div id='musicpixel'>
<img src='https://dl.dropbox.com/scl/fi/4bid2cm3z3jxgvriallx0/JVWwAWa.gif?rlkey=phwm99nx36v3fh4uj8b4asrkz&st=otar33vm&dl=0.gif'>
<div class='overlay'>
<div class='playpause'><i class="fas fa-play"></i></div>
</div>
</div>
<div id='musictitle'>
<span class='marquee'>I'll see you there tomorrow cr ramdons</span>
</div>
</div>

<audio id='musicsrc' loop src='https://dl.dropbox.com/scl/fi/2k057sh85w76p85ce48rp/01-I_ll-See-You-There-Tomorrow.mp3?rlkey=iq7rmm38nqj1eowvs7sn5uldv&st=xpspb0tt&dl=0.mp3'></audio>

<script>
document.querySelector('.playpause').addEventListener('click', playpause);

function playpause(){
if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
document.querySelector('#musicsrc').play();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
} else{
document.querySelector('#musicsrc').pause();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
}

}
</script>