cr aicoholdrink #3 scrollboxes

<head>
<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=DM+Sans&display=swap" rel="stylesheet">

<script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".about_body").hide();
$(".about_head").click(function() {
$(this).next(".about_body").slideToggle('active');
});
});
</script>
<style type="text/css">
@font-face {
font-family:'antre';
src: url(https://dl.dropbox.com/s/xaspbkonff6y9uf/antre.otf);
}

.about_list {
padding: 0px;
background: #ffe6ec;
box-shadow: 0 0 7px 10px #ffe6ec;
margin-top: 1px;
margin-left: 1px;
z-index: 1;
}

.about_head {
font-family:'antre';
text-shadow: -1px 0 #ffa9c2, 0 1px #000, 1px 0 #000, 0 -1px #ffa9c2;
font-size: 1.5em;
text-align: center;
color: #fff;
height:1em;
}

.about_body {
font-family: 'DM Sans', sans-serif;
font-size: 0.875em;
color: #424242;
text-align: center;
display: none;
height: 50px;
overflow: auto;
text-align: left;
padding-top: 10px;
line-height: 1.25em;
}

mark {
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,212,222,1) 93%);
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
border: 1px solid #e3c3ca;
border-radius: 1em;
}

@media only screen and (max-width: 600px) {
.about_body {
height: 50px;
}
}
</style>

<body>
<div class="about_list">
<p class="about_head">about</p>
<div class="about_body">
info info info info info info info info info info info info info info info info info info info info
</div>
</div>

<br><br>

<div class="about_list">
<p class="about_head">criteria</p>
<div class="about_body">
info info info info info info info info info info info info info info info info info info info info
</div>
</div>

<br><br>

<div class="about_list">
<p class="about_head">interests</p>
<div class="about_body">
info info info info info info info info info info info info info info info info info info info info
</div>
</div>

</body>