<div class="col-md-8 col-sm-12 mx-auto">
<div class="col-12 bg-faded p-2 mb-1" style="font-size: 25px; font-family: times new roman">
<div class="justify-content-between">
<p class="m-0">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">T</span>HYME
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">L</span>EGEND
</p>
<p class="mx-0 my-auto">
<a href="#abt" style="font-size: 25px; color: #89c65a"><i class="fal fa-signature my-auto fa-fw"></i></a>
.
<a href="#story" style="font-size: 25px; color: #89c65a"><i class="fal fa-book my-auto fa-fw"></i></a>
.
<a href="#design" style="font-size: 25px; color: #89c65a"><i class="fal fa-shirt my-auto fa-fw"></i></a>
.
<a href="#rships" style="font-size: 25px; color: #89c65a"><i class="fal fa-handshake my-auto fa-fw"></i></a>
.
<a href="#story" style="font-size: 25px; color: #89c65a"><i class="fal fa-comment-exclamation my-auto fa-fw"></i></a>
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-4 col-sm-12 px-0">
<div class="col-12 py-5 mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/16544204?1672609426); min-height: 200px; max-height: 200px; background-size: cover;"></div>
<div class="col-12 bg-faded p-2">
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">NICKNAME:</p>
<p class="my-0">Ty</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">AGE:</p>
<p class="my-0">16</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">GENDER:</p>
<p class="my-0">Agender</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">PRNS:</p>
<p class="my-0">She/They/Pup</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">SEXUALITY:</p>
<p class="my-0">Lesbian</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">SPECIES:</p>
<p class="my-0">Cat (Dubious)</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">BIRTHDAY:</p>
<p class="my-0">i forgor</p>
</div>
<div class="justify-content-between mb-1">
<p class="my-0" style="color: #89c65a; font-family: times new roman; font-weight: 800">WORTH:</p>
<p class="my-0">$0</p>
</div>
</div>
</div>
<div class="col-md-8 col-sm-12 pl-md-1 px-sm-0 d-block d-md-flex flex-column">
<div class="d-block bg-faded p-2" style="flex: 1 1 200px; min-height: 200px; overflow-y: auto; scroll-behavior: smooth">
<!-- about -->
<div class="col-12 px-0 mb-2" style="font-size: 25px; font-family: times new roman" id="abt">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">A</span>BOUT
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<p>Thymes interested in many things like poetry, art, and music. She writes poems whenever shes bored. Shes generally a nice person! Though she tends to feels bad when shes not the best at something. She'll feel a bit angry at the person whos "better" than her for a while, but after realizing its not worth stressing over she might ask them questions about whatever theyre skilled at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<hr>
<!-- story -->
<div class="col-12 px-0 mb-3" style="font-size: 25px; font-family: times new roman" id="story">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">S</span>TORY
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<h2 style="font-family: times new roman"><span style="color: #89c65a; font-weight: 800 ">i.</span> Childhood</h2>
<p>Thymes interested in many things like poetry, art, and music. She writes poems whenever shes bored. Shes generally a nice person! Though she tends to feels bad when shes not the best at something. She'll feel a bit angry at the person whos "better" than her for a while, but after realizing its not worth stressing over she might ask them questions about whatever theyre skilled at.</p>
<h2 style="font-family: times new roman"><span style="color: #89c65a; font-weight: 800">ii.</span> Adolescence</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h2 style="font-family: times new roman"><span style="color: #89c65a; font-weight: 800">iii.</span> Adulthood</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<hr>
<!-- design notes -->
<div class="col-12 px-0 mb-2" style="font-size: 25px; font-family: times new roman" id="design">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">D</span>ESIGN
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">N</span>OTES
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<div class="row no-gutters">
<div class="col-md-6 col-sm-12 px-2">
<ul class="fa-ul mx-2">
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> more words more words more words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> idk i dont feel like writing</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> so like</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> hows ur day been i guess</li>
</ul>
</div>
<div class="col-md-6 col-sm-12 pr-md-1 pr-sm-0">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/50484184_KLJvQBkByJAN5r5.png">
<div class="row no-gutters">
<div class="col p-2 tooltipster" style="background-color: #dfffaf" title="#dfffaf"></div>
<div class="col p-2 tooltipster" style="background-color: #c0ff61" title="#c0ff61"></div>
<div class="col p-2 tooltipster" style="background-color: #091022" title="#091022"></div>
<div class="col p-2 tooltipster" style="background-color: #00e1ff" title="#00e1ff"></div>
</div>
<div class="row no-gutters">
<div class="col p-2 tooltipster" style="background-color: #ff6185" title="#ff6185"></div>
<div class="col p-2 tooltipster" style="background-color: #ff6361" title="#ff6361"></div>
<div class="col p-2 tooltipster" style="background-color: #ff8861" title="#ff8861"></div>
<div class="col p-2 tooltipster" style="background-color: #ffb961" title="#ffb961"></div>
<div class="col p-2 tooltipster" style="background-color: #ffe761" title="#ffe761"></div>
<div class="col p-2 tooltipster" style="background-color: #f4ff61" title="#f4ff61"></div>
<div class="col p-2 tooltipster" style="background-color: #c0ff61" title="#c0ff61"></div>
<div class="col p-2 tooltipster" style="background-color: #61ff65" title="#61ff65"></div>
<div class="col p-2 tooltipster" style="background-color: #61ffc4" title="#61ffc4"></div>
<div class="col p-2 tooltipster" style="background-color: #61f2ff" title="#61f2ff"></div>
<div class="col p-2 tooltipster" style="background-color: #61afff" title="#61afff"></div>
<div class="col p-2 tooltipster" style="background-color: #6461ff" title="#6461ff"></div>
</div>
</div>
</div>
</div>
<hr>
<!-- relationships -->
<div class="col-12 px-0 mb-3" style="font-size: 25px; font-family: times new roman" id="rships">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">R</span>ELATIONSHIPS
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0 text-justify">
<div class="col-12 px-0">
<div class="row no-gutters">
<div class="col-md-4 col-sm-12 text-center text-truncate">
<div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/18377973?1672609486); min-height: 140px; background-size: cover; backgrounf-repeat: no-repeat; background-position: center"></div>
<a href="#" style="color: #89c65a; font-family: times new roman; font-size: 16px; font-weight: 800">NIGHTMARE FUEL</a>
</div>
<div class="col-md-8 col-sm-12 pl-md-2 pl-sm-0">
<div class="justify-content-between" style="font-family: times new roman; font-size: 18px; color: #89c65a">
<p class="m-0">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
<p class="font-italic faded m-0">[relationship]</p>
</div>
<hr class="my-1 faded" style="border-color: #89c65a; border-style: dashed">
<p>write about relationship here. keep it short because i hate double scrollboxes since they look like shit on mobile. like yeah bro im trying to read stop making me accidentally scroll back to the beginning This is a scroll-in-a-scroll hatepost now</p>
</div>
</div>
</div>
<hr class="my-2" style="border-style: dashed">
<div class="col-12 px-0">
<div class="row no-gutters">
<div class="col-md-4 col-sm-12 text-center text-truncate">
<div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/18999641?1674657999); min-height: 140px; background-size: cover; backgrounf-repeat: no-repeat; background-position: center"></div>
<a href="#" style="color: #89c65a; font-family: times new roman; font-size: 16px; font-weight: 800">JANET</a>
</div>
<div class="col-md-8 col-sm-12 pl-md-2 pl-sm-0">
<div class="justify-content-between" style="font-family: times new roman; font-size: 18px; color: #89c65a">
<p class="m-0">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
<p class="font-italic faded m-0">[relationship]</p>
</div>
<hr class="my-1 faded" style="border-color: #89c65a; border-style: dashed">
<p>write about relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
<hr>
<!-- trivia -->
<div class="col-12 px-0 mb-2" style="font-size: 25px; font-family: times new roman" id="trivia">
<span class="mx-1 font-weight-bold" style="color: #89c65a; font-size: 30px">T</span>RIVIA
<hr class="my-0" style="border-style: dashed">
</div>
<div class="col-12 px-0">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> more words more words more words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> words words words</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> i stole this from the design notes section</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded text-info"></i></span> maybe if y have something important in this section put the text-info after the "Faded"</li>
<li><span class="fa-li"><i class="fas fa-chevron-right faded"></i></span> idk just an idea</li>
</ul>
</div>
<!-- end of scrollbox -->
</div>
</div>
</div>
<div class="col-12 justify-content-end px-0">
<a href="/micro-wave" style="color: #89c65a" data-toggle="tooltip" title="code by micro-wave"><i class="fas fa-microwave"></i></a>
</div>
</div>