simple horizontal scrollbox tutorial codes

-- CSS STYLING --

<style>

@font-face {
font-family: 'krona one';
src:
url(https://dl.dropbox.com/s/fma2yu6n4jaclgi/KronaOne-Regular.ttf)
}

@font-face {
src: url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
font-family: creamy;
}

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

#container01 > .wrapper {
width: 10em;
border-radius: .5em .5em 0em 0em;
}

#container02 > .wrapper {
height: 11em;
border-radius: 0em .5em .5em .5em;
}

#container03 > .wrapper {
width: 15em;
border-radius: 0em 0em .5em .5em;
}

#text01 {
font-family: creamy;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
position: relative;
bottom: 1.125em;
}

#text02 {
font-family: windows;
background: white;
padding: 3px;
border: 1px solid black;
border-radius: 5px;
}

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}

</style>

-- HORIZONTAL SCROLLBOX --

<style>
#hoohoo {
width: 12em;
white-space: nowrap;
overflow-x: auto;
box-sizing: border-box;
overflow-y: hidden;
height: 11em;
}

.lala {
width: 10em;
border: 1px solid black;
white-space: normal;
display: inline-block;
height: 9.75em;
padding: 10px;
vertical-align: middle;
overflow: auto;
background: white;
border: 1px solid black;
border-radius: 10px;
font-family: windows;
}

mark {
background: #c17c84;
padding: 5px;
font-size: 1em;
font-family: creamy;
border-radius: 10px;
border: 1px solid black;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

</style>
<div id="hoohoo">
<div class="lala">
<br>
<mark>about</mark>
<br><br>
<strong>name</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div> <span>
<div class="lala">
<br>
<mark>likes</mark>
<br><br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
<br><br>
<mark>music</mark>
<br><br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div> <span>
<div class="lala">
<br>
<mark>byf</mark>
<br><br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div> <span>
<div class="lala">
<br>
<mark>dni</mark>
<br><br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div> <span>
<div class="lala">
<br>
<mark>notes</mark>
<br><br>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div>
</div>

-- MUSIC PLAYER --

<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=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
display:flex;
z-index:99;
background: white;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}

#glenplayer02 a {text-decoration:none;}

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

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

.playy, .pausee {color:#F6D5F0; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
margin-left: 10px;
font-family: 'krona one';
font-size:14px;
color:#F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of music note symbol */
}

.labeltext {
margin-left:0px;
position: relative;
bottom:10px;
font-family: 'krona one';
font-size:14px;
color:#F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;/* color of song title */
}

</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">♬</div>
</div>
<div class="sonata"> <marquee> lyrics lyrics lyrics lyrics lyrics lyrics lyrics lyrics lyrics lyrics lyrics </marquee> </div>
<div class="labeltext"></div>
</div><!--end music player-->

<audio id="tune" src="https://dl.dropbox.com/s/qiiudgbz3z9uu3b/Puella%20Magi%20Madoka%20Magica%20Akogare%20Saita%20-%20Madoka%20Kaname%20%28Character%20Song%29.mp3""audio"></audio>
</body>

<div class="labeltext"> </div>