stevie crd co rules 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=Mali:wght@500&display=swap" rel="stylesheet">
<style>
#scroll2 {
position: absolute;
background-color:#fff;
bottom:-105px;
right:-15px;
height: 90px;
width: 45%;
border: 3px double #FFD6EA;
border-radius: 5px;
padding: 9px;
overflow: scroll;
transition: width 1s, height 1s;
/* style of the text inside scrollbox */
color: #000;
text-align: left;
font-family: 'Mali', cursive;
font-size:11.5px;
background: rgba(255, 255, 255, 0.7);
}

#cont:hover #scroll2 {
height: 150px;
width: 50%;
z-index:2;
transform-origin: 50% 50%;
background: rgba(255, 255, 255, 1);
background-color:#FFF0F6;
}

</style>

<div id="cont">
<div id="overlay"> </div>
<div id="scroll2">
<strong>byr</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
<br></br>
<strong>dfi</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
</div>