cr iasita on codepen, scrollboxes

<style>

i {
color: #f4bcd6;
font-size: 16px;
}

#contt {
position: relative;
left: 0.5em;
width: 10em;
height: 16em;
overflow-x: scroll;
white-space: nowrap;
background: #fff2f8;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
border-radius: 5px;
}

.boxs {
white-space: normal;
display: inline-block;
vertical-align: middle;
background: #fff;
height: 100%;
width: 100%;
border: 1px solid #eaeaea;
background: rgb(255, 255, 255, 0.5);
border-radius: 4px;
margin-right: 1px;
overflow-y: scroll;
padding: 5px;
font-size: 13px;
line-height: 1.2;
font-family: kosugi maru;
}

.fa-folder-open , .fa-question-circle , .fa-music , .fa-video{
line-height: 0;
-webkit-filter: drop-shadow(0px 0px 1px rgba(255,255,255,.4));
font-size: 15px;
}

mark {
background: #FEE9F3;
padding-left: 3px;
padding-right: 3px;
border-radius: 5px 0;
border: 1px solid #eaeaea;
margin-right: 5px;
font-size: 13.5px;
}

.ic {
border-radius: 50%;
background: #FEE9F3;
width: 5em; height: 5em;
position: absolute;
left: 30%;
top: 10%;
z-index: 98;
padding; 8px;
border: 8px solid #FEE9F3;
overflow: hidden;
object-fit: cover;
}

.ari {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 10px;
opacity: 0.8;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}

.arii {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 10px;
opacity: 0.6;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}

</style>

<div id="contt">
<div class="boxs">
<img class=ari src="https://i.imgur.com/We9dYpT.jpg">
<mark><i class="fas fa-folder-open"></i> ABOUT ME</mark> <br>
info info info info info info info info info info info info info info info info info info info

<br></br>
<mark><i class="fas fa-question-circle"></i> GUIDELINES</mark> <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 info info info info info info info info info info info info info info

</div>
<div class="boxs">
<img class=arii src="https://i.imgur.com/DrSPHON.jpg">
<mark><i class="fas fa-music"></i> MUSIC</mark> <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 info info info info info info info info

</div>
</div>