horizontal scrollbox

<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=Berkshire+Swash&family=Quicksand&display=swap" rel="stylesheet">

<style>
@font-face {
font-family: kids;
src: url(https://dl.dropbox.com/s/m1map54iyicwois/BILLO___.TTF);
}

#hoohoo { // the big container
width: 100%;
border: 1px solid #E38DAC;
border-radius:5px;
white-space: nowrap;
overflow-x: auto;
padding: .5em;
box-sizing: border-box;
height: 13em;
overflow-y: hidden;
-webkit-filter: drop-shadow(0px 0px 2px #EB9BB3);
background-image: linear-gradient(360deg, rgba(255,255,255,0.902) 20%, rgba(255,255,255,0.38) 80%), url("https://dl.dropbox.com/s/7x70q5sjz219g2q/Foto%2011-10-21%2020%2014%2055.gif");
background-size: 100%, 50%;
background-repeat: repeat, repeat;
font-family: 'Quicksand', sans-serif;
color: #955136;
}

.tomo { // i made this container for the name & pic on the left !
width: 10em;
white-space: normal;
display: inline-block;
height: 100%;
padding: .2em;
vertical-align: middle;
margin-right: 10px;
}

.lala { // this is the scrollbox w border
width: 10em;
border: 1px solid #E38DAC;
border-radius: 5px;
-webkit-filter: drop-shadow(0px 0px 2px #EB9BB3);
white-space: normal;
display: inline-block;
height: 100%;
padding: .5em;
vertical-align: middle;
margin-right: 10px;
background: rgba(255, 246, 251, 0.18);
overflow-y: scroll;
}

@media (max-width: 1000px) {  // these are adjustments to make it fit better on mobile
.lala {
width:9em;}
.lili {
width:9em;}
#hoohoo {
height:11em;}
.brown {
font-size:3em;}
}

.brown { // this is the name
text-shadow: -1px 0 #BBD6F2, 0 1px #BBD6F2, 1px 0 #BBD6F2, 0 -1px #BBD6F2, 0 0;-webkit-filter: drop-shadow(0px 0px 3px #BBD6F2);opacity: 0.8;
color: #E6F0FA;
vertical-align: middle;
font-family:kids;
font-size:3.5em;
margin-right: 10px;
z-index:2;
}

.foto { // this is the pic on the left
position: relative;
bottom:10px;
top:-10px;
z-index:1;
}

a {
color: #E38DAC;
text-decoration: none;
font-weight: bold;
}

</style>

<div id="hoohoo">
<div class="tomo"><div class="brown">name</div>
<img class=foto src="https://dl.dropbox.com/s/mkzj6yjqmbcq41t/s221.gif" alt="." style="width:70%;height:auto;"></div>
<div class="lala">
your info here
<br><br>
<a href="link here">name of the link</a>
</div>
<div class="lala">
text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="lala">
text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>