yato ju mp scroll containers

<!--- CONTAINER 1 SCROLL --->
<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=Inter&display=swap" rel="stylesheet">

<style>
#container1 {
height: 8em;
overflow: auto;
border-radius: 0.5em;
border: 4px double #ED95BF;
background: #ffeff7;
width: 100%;
font-family: 'Inter', sans-serif;
padding: 0.5em;
color: #505050;
font-size: 0.75em;
text-align: center;
}

#pop {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-size:2em;
font-weight:bold;
color: #fff;
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
font-family: times new roman;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}
</style>

<div id="container1">
<div id="pop"><img src="https://tomomi.neocities.org/pixeles/92.png"> before you follow <img src="https://tomomi.neocities.org/pixeles/92.png"></div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<div id="pop"><img src="https://tomomi.neocities.org/pixeles/92.png"> do not interact <img src="https://tomomi.neocities.org/pixeles/92.png"></div>
text text text text text text text text text text text text text text text text text text text 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>

<!--- CONTAINER 2 SCROLL --->
<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=Inter&display=swap" rel="stylesheet">

<style>
#container2 {
height: 8em;
overflow: auto;
border-radius: 0.5em;
border: 4px double #ED95BF;
background: #ffeff7;
width: 100%;
font-family: 'Inter', sans-serif;
padding: 0.5em;
color: #505050;
font-size: 0.75em;
text-align: center;
}

#pop2 {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-size:2em;
font-weight:bold;
color: #fff;
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
font-family: times new roman;
}

@keyframes pop2 {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}
</style>

<div id="container2">
<div id="pop2"><img src="https://tomomi.neocities.org/pixeles/92.png"> interests <img src="https://tomomi.neocities.org/pixeles/92.png"></div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<div id="pop2"><img src="https://tomomi.neocities.org/pixeles/92.png"> others <img src="https://tomomi.neocities.org/pixeles/92.png"></div>
text text text text text text text text text text text text text text text text text text text 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>

<!--- CONTAINER 3 SCROLL --->
<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=Inter&display=swap" rel="stylesheet">

<style>
#container3 {
height: 8em;
overflow: auto;
border-radius: 0.5em;
border: 4px double #ED95BF;
background: #ffeff7;
width: 100%;
font-family: 'Inter', sans-serif;
padding: 0.5em;
color: #505050;
font-size: 0.75em;
text-align: center;
}

#pop3 {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-size:2em;
font-weight:bold;
color: #fff;
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
font-family: times new roman;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}
</style>

<div id="container3">
<div id="pop3"><img src="https://tomomi.neocities.org/pixeles/92.png"> notes <img src="https://tomomi.neocities.org/pixeles/92.png"text></div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<div id="pop3"><img src="https://tomomi.neocities.org/pixeles/92.png"> pls tag <img src="https://tomomi.neocities.org/pixeles/92.png"text></div>
text text text text text text text text text text text text text text text text text text text 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>