cr crdskiz pro standard codes & music player

---CODES---
<style>

@font-face {
font-family: bright fairy;
src: url(https://dl.dropbox.com/s/20oirqmtuqkb2wl/Bright%20Fairy.ttf?dl=0);
}
#scroll {
box-sizing: border-box;
white-space: nowrap;
font: 12px system-ui;
padding: 7px;
border-radius: 4px;
border: 1px solid #888;
overflow: auto;
height: 15em;
width: 15em;
}

.con {
height: 95%;
width: 95%;
white-space: normal;
display: inline-block;
padding: .2em;
vertical-align: middle;
overflow: auto;
border-radius: 4px;
border: 1px solid #888;
}
.con:nth-child(2) {
margin: 0 5px 0 5px ;
}

/** START OF THE SCROLLBAR CODE **/
::-webkit-scrollbar {
width: 16px
}
::-webkit-scrollbar:horizontal {
height: 16px
}
::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #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-thumb:horizontal {
background: url("https://dl.dropbox.com/s/tykz2yw9tctbe4c/scroll2.png"), linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
background-repeat: no-repeat;
background-size: 20% auto, cover;
background-position: center;
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-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;
}

::-webkit-scrollbar-button:horizontal {
width: 15px
}
::-webkit-scrollbar-button:horizontal:start:increment {
display: none;
}
::-webkit-scrollbar-button:horizontal:end:decrement {
display: none;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #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 0 3px;
}
::-webkit-scrollbar-button:horizontal:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #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---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
<head>
<script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: absolute;
top: 13.5em;
display:flex;
z-index:9;
}

#glenplayer02 a { text-decoration:none; }

#glenplayer02 > div { align-self:center; -webkit-align-self:center; }

.music-controls { user-select:none; -webkit-user-select:none; width:22px; font-size:16px; cursor:pointer; }

.playy, .pausee {
-webkit-background-clip: text;
-webkit-text-fill-color: #FFFFFF;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #808080;
font-size: 22px;
}

.pausee { display:none; }

</style>
<body>
<div id="glenplayer02"><div class="music-controls" onclick="songstart();"><div class="playy" style="display: block;"><span><i class="fa-solid fa-volume-low" aria-hidden="true"></i></span></div>
<div class="pausee" style="display: none;"><span><i class="fa-solid fa-volume-high" aria-hidden="true"></i></span></div></div></div>

<audio id="tune" src="https://dl.dropbox.com/scl/fi/2k057sh85w76p85ce48rp/01-I_ll-See-You-There-Tomorrow.mp3?rlkey=iq7rmm38nqj1eowvs7sn5uldv&st=yobivalv&dl=0.mp3"></audio></body>