i ate one string bean | profile text

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto+Slab&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; height: 5px; background: none}
::-webkit-scrollbar-thumb {background: #fff}
.body{
	width: 650px;
    margin: auto;
    font-family: 'Noto Sans';
    padding: 10px;
    background: #eee;
    border: 1px solid rgba(0,0,0,0.2)
}
.section{
	outline: 1px solid #fff;
    outline-offset: -10px;
    background: #BA9593;
    margin: 5px;
    padding: 20px;
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-align: justify;
    color: #fff;
    display: flex;
    justify-content: center;
    box-shadow: 1px 1px 5px #000

}
h2{
	font-family: 'Roboto Slab';
    margin: 0px;
    font-size: 27px;
    font-style: italic;
    color: #E7E1E1;
    text-decoration: underline;
    text-underline-offset: 2px;
}
h3{
	font-size: 18px;
    margin: 0px;
    color: #fff
}
img{
	object-fit: cover
}
.person{
	display: inline-block;
	border: 1px solid rgba(150,0,0,0.2);
	overflow: auto;
	padding: 10px;
	background: #fff;
	height: 150px;
	width: 100px;
	color: #000;
  text-align: center;
  margin: auto;
	font-size: 12px;
    flex: 0 0 auto;
}
.inside{
    overflow: auto;
    padding-right: 10px;
}
</style>
<div class="body">
<div class="section" style="display: block">
<img src="https://64.media.tumblr.com/6b4d82de590eef0a6730ff0268e583ad/09c1f1efdbc8c63c-94/s540x810/1b06b6cb4bc62be0c6a9def8c4cfed70409a2bdf.gifv" style="width:60px; height: 60px;float: left; margin-right: 10px">
<h2>I ate one string bean</h2>
<h3>It tasted like fish vomit. That was it for me</h3>
</div>
<div style="display: flex">
<div class="section" style="width: 450px; height: 200px">
<img src="https://64.media.tumblr.com/74a1c46c733f52288647766dcf9e3124/ffb55515bfff5009-04/s540x810/89e3a608b6320957947b4b002d4b283cf611680c.gifv" style="width:100%;height: 100%">
</div>
<div class="section" style="height: 200px; width: 250px; display: flex; justify-content: center; align-items: center; text-align: center">
<div class="inside"><h3>"Why are you giving candy to a baby in the first place? Don't give candy to a baby! They can't brush their teeth!"</h3>
</div></div></div>
<div style="display: flex">
<div class="section" style="width: 300px; height: 300px;"><div class="inside">
<table style="font-size:14px;color: #fff; font-family: 'Noto Sans'">
<tr><td style="color: #E7E1E1; font-weight:bold">name.</td><td>name</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">age.</td><td>age</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">gender.</td><td>gender</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">sexuality.</td><td>sexuality</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">house.</td><td>house</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">year.</td><td>year</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">occupation.</td><td>occupation</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">martial status.</td><td>dating: gamer<br>used to date: not a gamer</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">height.</td><td>height</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">features.</td><td>a scar on butt<br> something something</td></tr>
<tr><td style="color: #E7E1E1; font-weight:bold">build.</td><td>build</td></tr>
</table>
</div></div>
<div class="section" style="width: 300px; height: 300px"><div class="inside">
<h2>about</h2>
<p>Lorem ipsum dolor sit amet, audiam recteque repudiare et eam, in mel autem tantas adversarium. Eu vocibus corpora sed. Eius dicta eripuit ad vix, ipsum deleniti suavitate ut nam. Sea tation vocent an, no possit accusata pro. Quas assum tation ex mei, usu ex iusto nobis mollis.

<p>Soluta postulant in quo, id viderer perfecto tractatos mei. At quando equidem lucilius duo, ea quo elitr concludaturque, error adolescens consetetur ei. Te mei scaevola praesent dissentiet, option qualisque eos ut, ei eum unum salutatus. Eirmod delicata ea per, no eum audiam placerat. Pri et odio eius aliquam, eum ne agam vero oblique.
</div></div></div>
<div class="section" style="height: 220px; display: block">
<!-- don't put too much info into these buds -->
<h2>relations</h2>
<div style=" display: flex; flex-wrap: no-wrap;overflow-x: auto; align-items: space-between; justify-content: space-between; margin-top: 10px">
<div class="person">
<img src="https://i.imgur.com/oYK9FhF.gif" style="height: 100px; width: 100px; margin: auto; object-fit: cover; margin-bottom: 10px;">your name fucko
</div>
<div class="person">
<img src="https://i.imgur.com/oYK9FhF.gif" style="height: 100px; width: 100px; margin: auto; object-fit: cover; margin-bottom: 10px;">your name fucko
</div>
<div class="person">
<img src="https://i.imgur.com/oYK9FhF.gif" style="height: 100px; width: 100px; margin: auto; object-fit: cover; margin-bottom: 10px;">your name fucko
</div>
<div class="person">
<img src="https://i.imgur.com/oYK9FhF.gif" style="height: 100px; width: 100px; margin: auto; object-fit: cover; margin-bottom: 10px;">your name fucko
</div>
<div class="person">
<img src="https://i.imgur.com/oYK9FhF.gif" style="height: 100px; width: 100px; margin: auto; object-fit: cover; margin-bottom: 10px;">your name fucko
</div>
<div class="person">
<img src="https://i.imgur.com/oYK9FhF.gif" style="height: 100px; width: 100px; margin: auto; object-fit: cover; margin-bottom: 10px;">your name fucko
</div>
</div>
</div>
<div style="display: flex">
<div class="section" style="height: 200px; width: 150px"><div class="inside">
<h2>playlist</h2>
<ul style="margin-left: -20px; text-align: left">
  <li>Da Police</li>
  <li>Never Going to Give You Up by Rick Astley</li>
  <li>Funkytown</li>
</ul>
</div></div>
<div class="section" style="height: 200px; width: 450px"><div class="inside">
<h2>abilities</h2>
<p>Lorem ipsum dolor sit amet, in natum magna mazim est, nam quas habemus fierent no. Meis vocibus nusquam sed no, duo ridens civibus complectitur at, veniam nullam suscipit et sed. Est magna quaeque singulis ei. Pri ut noster consequat prodesset, accumsan phaedrum adipisci ne qui. Sit minim tincidunt rationibus cu. Vivendo fabellas pro in, dicunt quaeque expetenda ea pri.

<p>Ea nominavi euripidis est, mucius scripserit per ex, qui at deserunt perpetua signiferumque. Adipisci consetetur has in. Id eos labitur accusata reformidans. Quod choro mea in, mea vocent appareat democritum ut. Scripserit inciderint at vis, eam cu novum ceteros.

<p>Et mel quod mollis, esse munere est ex. Inani mentitum sensibus pro te, quod putent ne. Est an posse fuisset gubergren. No qui democritum vituperata repudiandae, laoreet ceteros praesent id mei. Ne sea elitr lobortis constituam, ei postea iuvaret menandri eos. Mei euismod epicuri assentior ex, his diam nonumes appellantur ne.

<p>In vim eripuit delectus senserit, in veritus vocibus detraxit quo. Quot splendide duo ei, vim te tation lucilius sapientem. Qui feugait detraxit definiebas ea, nulla conclusionemque eos cu. Alii numquam tacimates ne eos. Aperiam cotidieque dissentiet sed ea, pri et meis fabellas reprimique. Sea et nihil inimicus contentiones, vel dicunt principes ne, et saepe ubique ignota usu.
</div></div>
</div>
<div style="text-align: center"><a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #000; font-size: 10px;" target="_blank">CODED BY FINCH</a>
</div></div>