<!----------- TEDIOUS RP COMFORT MEME [Version 1 :: Custom Accent ] || by [email protected]
HANDY WEBSITES:
> Font Awesome v5 (for old icons): https://fontawesome.com/
> Font Awesome v6 (for new icons): https://fontawesome.com/v6.0/icons
> W3 Schools Bootstrap: https://www.w3schools.com/bootstrap/
> W3 Schools HTML: https://www.w3schools.com/html/default.asp
> Bootstrap Docs: https://getbootstrap.com/docs/5.1/getting-started/introduction/
MAIN CC COLORS USED:
> main accent: #d9bed9
OTHER BOOTSTRAP COLORS OF NOTE (ON DEFAULT PALETTE):
> text-white = white text
> text-muted = grayish text
> text-primary = blue text
> text-info = lighter blue text
> text-success = green text
> text-warning = orange text
> text-danger = red text
-
> bg-faded = grayish background
reminder to read my tos :3 -> https://toyhou.se/~bulletins/491483.global-tos
help me bump my thread!! -> https://toyhou.se/~forums/16.htmlcss-graphics/245374.the-codes-of-a-person-acp-s-coding-thread
THANK YOU FOR USING <3
---------------------------->
<div class="mx-auto my-lg-5" style="max-width: 950px; font-size: 13px; letter-spacing: 0.5px;">
<!--------------- TITLE ---------------->
<div id="back_to_top"></div>
<div class="row no-gutters d-flex flex-column mx-auto mb-n4">
<!-- ICON -->
<div class="col-auto justify-content-center mb-2">
<span class="badge p-2" style="font-size: 25px; border-radius: 50%; background-color: #d9bed9; z-index: 7;"><i class="fa-regular fa-globe"></i></span>
</div>
<!-- WORDS -->
<div class="col-auto justify-content-center">
<div class="card rounded-0 p-2" style="z-index: 6;">
<span class="badge px-3 py-2" style="font-size: 16px; border-radius: 0; background-color: #d9bed9; z-index: 7; ">RP COMFORT MEME</span>
</div>
</div>
</div>
<!--------------- BODY ---------------->
<div class="card rounded-0 p-3">
<div class="card card-block border-0 rounded-0 p-4 mx-n4">
<div class="row no-gutters">
<!---------------
LEGEND
STATUS
LINKS
JUMP TO BUTTONS
---------------->
<div class="col-lg-4 px-lg-3 mt-lg-n5 mb-lg-n5 pt-2 pb-2">
<div class="bg-faded h-100">
<div class="sticky-top">
<div class="px-3 py-4">
<!-----========== LEGEND ==========----->
<div class="row no-gutters">
<div class="col-lg-12 p-1 font-weight-bold" style="letter-spacing: 2px; font-size: 15px; color: #d9bed9;">LEGEND</div>
<!-- ( general ) --> <div class="col-lg-12 p-1 font-weight-bold text-muted faded" style="font-size: 12px; letter-spacing: 1px;">( general )</div>
<!-- === YES === --->
<div class="col-6 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-check-square text-success fa-fw fa-sm mr-1"></i>
</span> yes
</li>
</ul>
</div>
<!-- === NO === --->
<div class="col-6 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-times-square text-danger fa-fw fa-sm mr-1"></i>
</span> no
</li>
</ul>
</div>
<!-- === MAYBE === --->
<div class="col-6 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="fa-regular fa-square-ellipsis text-warning fa-fw fa-sm mr-1"></i>
</span> maybe
</li>
</ul>
</div>
<!-- === UNSURE/ASK === --->
<div class="col-6 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-question-square text-muted fa-fw fa-sm mr-1"></i>
</span> unsure/ask
</li>
</ul>
</div>
<!-- === FRIENDS ONLY === --->
<div class="col-6 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-lock-open text-info fa-fw fa-sm mr-1"></i>
</span> friends only
</li>
</ul>
</div>
<!-- === DEFAULT=== --->
<div class="col-6 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> default
</li>
</ul>
</div>
<!-- ( boundaries ) --> <div class="col-lg-12 p-1 mt-1 font-weight-bold text-muted faded" style="font-size: 12px; letter-spacing: 1px;">( boundaries )</div>
<!-- this section has icons intended for usage in some parts of the " boundaries " section of this comfort meme -->
<!-- === NOT AT ALL === --->
<div class="col-12 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-ban text-primary fa-fw fa-sm mr-1"></i>
</span> not okay with it at all
</li>
</ul>
</div>
<!-- === IMPLICIT === --->
<div class="col-12 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-fog text-primary fa-fw fa-sm mr-1"></i>
</span> okay if it's implicit
</li>
</ul>
</div>
<!-- === MENTIONED === --->
<div class="col-lg-12 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-comments text-primary fa-fw fa-sm mr-1"></i>
</span> okay if it's mentioned
</li>
</ul>
</div>
<!-- === SKIPPED === --->
<div class="col-12 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-booth-curtain text-primary fa-fw fa-sm mr-1"></i>
</span> okay if it's skipped/blacked-out
</li>
</ul>
</div>
<!-- === DEPICTED GRAPHICALLY === --->
<div class="col-12 p-1">
<ul class="fa-ul mb-0 pb-0 ml-4" style="font-size: 13px;">
<li><span class="fa-li">
<!-- ICON --> <i class="far fa-radiation-alt text-primary fa-fw fa-sm mr-1"></i>
</span> okay with graphic depictions
</li>
</ul>
</div>
</div>
<!---------====================--------->
<!-----========== STATUS ==========----->
<div class="row no-gutters mt-2">
<div class="col-lg-12 p-1 font-weight-bold" style="letter-spacing: 2px; font-size: 15px; color: #d9bed9;">STATUS</div>
<div class="col-lg-12 ml-1 pr-3">
<!-- 1X1 RPS -->
<div class="mb-1 justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">1x1 rps</span>
<span>
content
</span>
</div>
<!-- 1X1X1 RPS -->
<div class="mb-1 justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">1x1x1 rps</span>
<span>
content
</span>
</div>
<!-- GROUP (3+ RPS) -->
<div class="mb-1 justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">group (3+ rps)</span>
<span>
content
</span>
</div>
<!-- GROUP (10+ RPS) -->
<div class="mb-1 justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">group (10+ rps)</span>
<span>
content
</span>
</div>
<!-- RP HCs -->
<div class="mb-1 justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">rp hcs</span>
<span>
content
</span>
</div>
</div>
</div>
<!---------====================--------->
<!-----========== LINKS ===========----->
<div class="row no-gutters mt-2 mr-2">
<!------ 1 ------>
<div class="col p-1">
<div class="mb-2" style="background-color: #d9bed9;">
<a
href="ADD_LINK_HERE"
class="btn btn-block text-white btn-outline-secondary font-weight-bold border-0 p-1" style="border-radius: 0; font-size: 13px;">
link
</a>
</div>
</div>
<!------ 2 ------>
<div class="col p-1">
<div class="mb-2" style="background-color: #d9bed9;">
<a
href="ADD_LINK_HERE"
class="btn btn-block text-white btn-outline-secondary font-weight-bold border-0 p-1" style="border-radius: 0; font-size: 13px;">
link
</a>
</div>
</div>
<!------ 3 ------>
<div class="col p-1">
<div class="mb-2" style="background-color: #d9bed9;">
<a
href="ADD_LINK_HERE"
class="btn btn-block text-white btn-outline-secondary font-weight-bold border-0 p-1" style="border-radius: 0; font-size: 13px;">
link
</a>
</div>
</div>
</div>
<!---------====================--------->
<!-----======= JUMP-TO BTNS =======----->
<div class="mt-3 mr-2 text-center">
<a href="#about_me" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="about me"></i></a>
<a href="#basics" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="basics"></i></a>
<a href="#writing" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="writing"></i></a>
<a href="#characters" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="characters"></i></a>
<a href="#relationships" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="relationships"></i></a>
<a href="#boundaries" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="boundaries"></i></a>
<a href="#artwork" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="artwork"></i></a>
<a href="#extra" style="text-decoration: none; color: #d9bed9;"><i class="fas fa-circle px-1 tooltipster" title="extra"></i></a><br><br>
<a href="#back_to_top" style="text-decoration: none; color: #d9bed9;"><i class="fa-solid fa-arrow-up-from-arc p-2 fa-lg tooltipster" title="back to top"></i></a>
</div>
<!---------====================--------->
</div>
</div>
</div>
</div>
<!-------------->
<div class="col-lg-8">
<!----------------------
=================
ABOUT ME SECTION
================
----------------------->
<div id="about_me"></div>
<div class="row no-gutters">
<div class="col-12 mb-lg-0 mb-2"><div class="bg-faded p-2 font-weight-bold" style="font-size: 17px; color: #d9bed9; letter-spacing: 1px;">about me</div></div>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- NAME ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="fa-regular fa-pen-line fa-fw mr-1" style="color: #d9bed9;"></i></span>
name
</li>
</ul>
</div>
<!-- PRONOUNS -------->
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="far fa-tags fa-fw mr-1" style="color: #d9bed9;"></i></span>
prn/prn
</li>
</ul>
</div>
<!-- AGE ------------->
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="far fa-birthday-cake fa-fw mr-1" style="color: #d9bed9;"></i></span>
age
</li>
</ul>
</div>
<!-- ACTIVITY -------->
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="far fa-user-clock fa-fw mr-1" style="color: #d9bed9;"></i></span>
activity
</li>
</ul>
</div>
<!-- LITERACY LEVEL -------->
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="far fa-books fa-fw mr-1" style="color: #d9bed9;"></i></span>
<span class="align-items-center">
literacy
<a href="#LITEXPLANATION" data-toggle="collapse" aria-expanded="false" class="faded" style="color: #d9bed9;"><i class="fas fa-info-circle fa-sm ml-2"></i></a>
</span>
</li>
</ul>
</div>
<!-- TIMEZONE -------->
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="far fa-clock fa-fw mr-1" style="color: #d9bed9;"></i></span>
timezone
</li>
</ul>
</div>
<!-- CONTACT LINKS --->
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li"><i class="far fa-envelope fa-fw mr-1" style="color: #d9bed9;"></i></span>
<span class="flex-column">
<a href="LINK_HERE">link</a>
<a href="LINK_HERE">link</a>
<a href="LINK_HERE">link</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--------------------------->
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
<!--- LITERACY LEVEL EXPLANATION -->
<div class="collapse" id="LITEXPLANATION" style="font-size: 12px;">
Quick explanation of your literacy. No need for too much details as this will be explored later on. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
</div>
<!--------------------------->
</div>
<!---------- =============== ---------->
<!----------------------
=================
BASICS SECTION
================
----------------------->
<div id="basics"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">basics</div></div>
<!-- LOCATIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred roleplay medium(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- comments ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> comments
</li>
</ul>
</div>
<!-- TH messages ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> TH messages
</li>
</ul>
</div>
<!-- TH forums ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> TH forums
</li>
</ul>
</div>
<!-- private world ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> private world
</li>
</ul>
</div>
<!-- public world ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> public world
</li>
</ul>
</div>
<!-- discord ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> discord
</li>
</ul>
</div>
<!-- google docs ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> google docs
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Places where you'd like to roleplay. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- NUMBER OF PARTICIPANTS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred number of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- one person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1 person
</li>
</ul>
</div>
<!-- two people ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2 people
</li>
</ul>
</div>
<!-- three people ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 3 people
</li>
</ul>
</div>
<!-- five people ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 5 people
</li>
</ul>
</div>
<!-- 5+ people ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 5+ people
</li>
</ul>
</div>
<!-- 10+ people ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 10+ people
</li>
</ul>
</div>
<!-- many many many ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> as many as possible
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
How many people you're comfortable roleplaying with. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- AGE OF RP PARTNERS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred ages of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- 13-15 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 13-15
</li>
</ul>
</div>
<!-- 16-17 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 16-17
</li>
</ul>
</div>
<!-- 18-20 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 18-20
</li>
</ul>
</div>
<!-- 20-24 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 20-24
</li>
</ul>
</div>
<!-- 25+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 25+
</li>
</ul>
</div>
<!-- 30+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 30+
</li>
</ul>
</div>
<!-- 40+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 40+
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- depends on rp ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends on rp
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Age(s) of RP partners you're comfortable with. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- GENDER OF RP PARTNERS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred genders of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- male ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> male
</li>
</ul>
</div>
<!-- female ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> female
</li>
</ul>
</div>
<!-- transgender ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> transgender
</li>
</ul>
</div>
<!-- nonbinary ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> nonbinary
</li>
</ul>
</div>
<!-- unlabelled ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> unlabelled
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Gender(s) of RP partners you're comfortable with. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- LANGUAGE(S)
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred language(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- 1 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> language 1
</li>
</ul>
</div>
<!-- 2 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> language 2
</li>
</ul>
</div>
<!-- language 3 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> language 3
</li>
</ul>
</div>
<!-- language 4 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> language 4
</li>
</ul>
</div>
<!-- language 5 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> language 5
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Your preferred language(s) for RPing. If needed, specify your preferred language(s) for OOC discussions. This section does not indicate you are not open to having characters/being RP partners with people who speak other languages; simply, this is the list of languages you'd like to use as a medium for your roleplays. More notes.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- PREFERRED GENRES/SUBGENRES
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred genres/subgenres</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- action ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> action
</li>
</ul>
</div>
<!-- adventure ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> adventure
</li>
</ul>
</div>
<!-- slice-of-life ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> slice-of-life
</li>
</ul>
</div>
<!-- crime ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> crime
</li>
</ul>
</div>
<!-- mystery ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> mystery
</li>
</ul>
</div>
<!-- horror ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> horror
</li>
</ul>
</div>
<!-- sci-fi ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> sci-fi
</li>
</ul>
</div>
<!-- fantasy ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> fantasy
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- combination ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> combination
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Feel free to add more!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis iste obcaecati quae asperiores in dolores voluptas doloribus molestias. Iusto expedita tenetur quidem, adipisci tempora exercitationem reprehenderit perspiciatis culpa cumque libero!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
</div>
<!---------- =============== ---------->
<!----------------------
=================
WRITING SECTION
================
----------------------->
<div id="writing"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">writing</div></div>
<!-- MY TYPE OF POV
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred pov type(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- 1st person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1st person
</li>
</ul>
</div>
<!-- 2nd person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2nd person
</li>
</ul>
</div>
<!-- 3rd person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 3rd person
</li>
</ul>
</div>
<!-- past-tense ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> past-tense
</li>
</ul>
</div>
<!-- future-tense ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> future-tense
</li>
</ul>
</div>
<!-- present-tense ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> present-tense
</li>
</ul>
</div>
<!-- omniscient ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> omniscient
</li>
</ul>
</div>
<!-- subjective ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> subjective
</li>
</ul>
</div>
<!-- objective ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> objective
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The POV type(s) you like to use in RPs. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' TYPE OF POV
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred pov type(s) of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- 1st person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1st person
</li>
</ul>
</div>
<!-- 2nd person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2nd person
</li>
</ul>
</div>
<!-- 3rd person ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 3rd person
</li>
</ul>
</div>
<!-- past-tense ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> past-tense
</li>
</ul>
</div>
<!-- future-tense ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> future-tense
</li>
</ul>
</div>
<!-- present-tense ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> present-tense
</li>
</ul>
</div>
<!-- omniscient ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> omniscient
</li>
</ul>
</div>
<!-- subjective ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> subjective
</li>
</ul>
</div>
<!-- objective ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> objective
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The POV type(s) you're okay with your RP partner using. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY NARRATIVE STYLE
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred narrative style(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- script ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> script
</li>
</ul>
</div>
<!-- headcannon ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> headcannon
</li>
</ul>
</div>
<!-- paragraph ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> paragraph
</li>
</ul>
</div>
<!-- novel ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> novel
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The narrative style you prefer using. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' NARRATIVE STYLE
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred narrative style(s) of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- script ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> script
</li>
</ul>
</div>
<!-- headcannon ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> headcannon
</li>
</ul>
</div>
<!-- paragraph ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> paragraph
</li>
</ul>
</div>
<!-- novel ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> novel
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The narrative styles you're fine with your RP partner using. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY WORD COUNT
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred word count</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- >50 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> less than 50 words
</li>
</ul>
</div>
<!-- 50-100 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 50-100 words
</li>
</ul>
</div>
<!-- 200-500 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 200-500 words
</li>
</ul>
</div>
<!-- 500-700 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 500-700 words
</li>
</ul>
</div>
<!-- 700+ words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 700+ words
</li>
</ul>
</div>
<!-- 1000-2000 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1000-2000 words
</li>
</ul>
</div>
<!-- 2000+ words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2000+ words
</li>
</ul>
</div>
<!-- 5000+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 5000+ words
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Your preferred (or average) word counts. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' WORD COUNT
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred word count of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- >50 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> less than 50 words
</li>
</ul>
</div>
<!-- 50-100 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 50-100 words
</li>
</ul>
</div>
<!-- 200-500 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 200-500 words
</li>
</ul>
</div>
<!-- 500-700 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 500-700 words
</li>
</ul>
</div>
<!-- 700+ words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 700+ words
</li>
</ul>
</div>
<!-- 1000-2000 words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1000-2000 words
</li>
</ul>
</div>
<!-- 2000+ words ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2000+ words
</li>
</ul>
</div>
<!-- 5000+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 5000+ words
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The number of words you're fine getting yeet at you. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY POSTING SPEED
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my average posting speed</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- speed of light ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> speed of light
</li>
</ul>
</div>
<!-- daily ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> daily
</li>
</ul>
</div>
<!-- weekly ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> weekly
</li>
</ul>
</div>
<!-- monthly ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> monthly
</li>
</ul>
</div>
<!-- yearly ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> yearly
</li>
</ul>
</div>
<!-- slow as a snail ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> slow as a nail
</li>
</ul>
</div>
<!-- forever ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> forever
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
On average, how long it'd take for you to write a response. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' POSTING SPEED
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred posting speed of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- speed of light ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> speed of light
</li>
</ul>
</div>
<!-- daily ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> daily
</li>
</ul>
</div>
<!-- weekly ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> weekly
</li>
</ul>
</div>
<!-- monthly ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> monthly
</li>
</ul>
</div>
<!-- yearly ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> yearly
</li>
</ul>
</div>
<!-- slow as a snail ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- CAPABILITY LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> slow as a snail
</li>
</ul>
</div>
<!-- forever ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> forever
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The amount of time you're fine with your RP partner taking to respond. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
</div>
<!---------- =============== ---------->
<!----------------------
=================
CHARACTERS SECTION
================
----------------------->
<div id="characters"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">characters</div></div>
<!-- MY GENERAL CHARACTER TYPES
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred general character type(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- human ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> human
</li>
</ul>
</div>
<!-- humanoid ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> humanoid
</li>
</ul>
</div>
<!-- anthro ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> anthro
</li>
</ul>
</div>
<!-- feral ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feral
</li>
</ul>
</div>
<!-- original species ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> original species
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The type(s) of characters you prefer playing as. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' GENERAL CHARACTER TYPES
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred rp partners' general character type(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- human ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> human
</li>
</ul>
</div>
<!-- humanoid ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> humanoid
</li>
</ul>
</div>
<!-- anthro ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> anthro
</li>
</ul>
</div>
<!-- feral ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feral
</li>
</ul>
</div>
<!-- original species ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> original species
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The general character type(s) you're fine with your RP partner playing as. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY CHARACTER GENDERS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred character gender(s)</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- male ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> male
</li>
</ul>
</div>
<!-- female ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> female
</li>
</ul>
</div>
<!-- transgender ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> transgender
</li>
</ul>
</div>
<!-- nonbinary ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> nonbinary
</li>
</ul>
</div>
<!-- unlabelled ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> unlabelled
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The genders you prefer playing as. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' CHARACTER GENDERS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred character gender(s) of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- male ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> male
</li>
</ul>
</div>
<!-- female ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> female
</li>
</ul>
</div>
<!-- transgender ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> transgender
</li>
</ul>
</div>
<!-- nonbinary ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> nonbinary
</li>
</ul>
</div>
<!-- unlabelled ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> unlabelled
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The genders you'd prefer your RP partner playing as. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY CHARACTERS' ORIENTATIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred characters' orientations</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- heterosexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> heterosexual
</li>
</ul>
</div>
<!-- homosexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> homosexual
</li>
</ul>
</div>
<!-- bisexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> bisexual
</li>
</ul>
</div>
<!-- pansexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> pansexual
</li>
</ul>
</div>
<!-- demisexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> demisexual
</li>
</ul>
</div>
<!-- asexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> asexual
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Your preferred characters' orientations. Feel free to add more! Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, quidem. Neque, architecto illum. Veniam voluptatum dicta sapiente ullam cum placeat itaque! Consequuntur illum quia iure odit quod praesentium, fugit eos!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' CHARACTERS' ORIENTATIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred rp partners' characters' orientations</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- heterosexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> heterosexual
</li>
</ul>
</div>
<!-- homosexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> homosexual
</li>
</ul>
</div>
<!-- bisexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> bisexual
</li>
</ul>
</div>
<!-- pansexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> pansexual
</li>
</ul>
</div>
<!-- demisexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> demisexual
</li>
</ul>
</div>
<!-- asexual ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> asexual
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Your preferred RP partners' characters' orientations. Feel free to add more! Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, quidem. Neque, architecto illum. Veniam voluptatum dicta sapiente ullam cum placeat itaque! Consequuntur illum quia iure odit quod praesentium, fugit eos!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY CHARACTER AGES
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred character ages</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- >10 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> younger than 10
</li>
</ul>
</div>
<!-- 10-12 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 10-12
</li>
</ul>
</div>
<!-- 13-15 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 13-15
</li>
</ul>
</div>
<!-- 16-17 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 16-17
</li>
</ul>
</div>
<!-- 18+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 18+
</li>
</ul>
</div>
<!-- 20+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 20+
</li>
</ul>
</div>
<!-- 25+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 25+
</li>
</ul>
</div>
<!-- 30+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 30+
</li>
</ul>
</div>
<!-- 35+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 35+
</li>
</ul>
</div>
<!-- 40+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 40+
</li>
</ul>
</div>
<!-- 60+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 60+
</li>
</ul>
</div>
<!-- ancient ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> ancient
</li>
</ul>
</div>
<!-- ageless/immortal ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> ageless/immortal
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The ages of the characters you prefer playing as. You might need to specify whether characters of certain ages are the primary POV character or merely side characters/NPCs. This might need to be changed for characters who aren't human (such as ferals), characters in worlds that have a different means of calculating age or time, and/or characters who simply do not abide by the mortal construct of time. More notes.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' CHARACTER AGES
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred character ages of rp partners</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- >10 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> younger than 10
</li>
</ul>
</div>
<!-- 10-12 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 10-12
</li>
</ul>
</div>
<!-- 13-15 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 13-15
</li>
</ul>
</div>
<!-- 16-17 ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 16-17
</li>
</ul>
</div>
<!-- 18+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 18+
</li>
</ul>
</div>
<!-- 20+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 20+
</li>
</ul>
</div>
<!-- 25+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 25+
</li>
</ul>
</div>
<!-- 30+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 30+
</li>
</ul>
</div>
<!-- 35+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 35+
</li>
</ul>
</div>
<!-- 40+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 40+
</li>
</ul>
</div>
<!-- 60+ ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 60+
</li>
</ul>
</div>
<!-- ancient ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> ancient
</li>
</ul>
</div>
<!-- ageless/immortal ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> ageless/immortal
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The ages of the characters you'd prefer your RP partner to play as. You might need to specify whether you'd like characters of certain ages to be the primary POV character or merely side characters/NPCs. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- MY NUMBER OF CHARACTERS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">my preferred number of characters</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- 1 character ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1 character
</li>
</ul>
</div>
<!-- 2 characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2 characters
</li>
</ul>
</div>
<!-- 2-5 characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2-5 characters
</li>
</ul>
</div>
<!-- 10+ characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 10+ characters
</li>
</ul>
</div>
<!-- 20+ characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 20+ characters
</li>
</ul>
</div>
<!-- simply many ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> simply many
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The number of characters you prefer playing in an RP. You might need to specify if these characters will be main characters/have their POVs written or if they're NPCs. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, quidem. Neque, architecto illum. Veniam voluptatum dicta sapiente ullam cum placeat itaque! Consequuntur illum quia iure odit quod praesentium, fugit eos!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RP PARTNERS' NUMBER OF CHARACTERS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">preferred rp partners' number of characters</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- 1 character ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 1 character
</li>
</ul>
</div>
<!-- 2 characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2 characters
</li>
</ul>
</div>
<!-- 2-5 characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 2-5 characters
</li>
</ul>
</div>
<!-- 10+ characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 10+ characters
</li>
</ul>
</div>
<!-- 20+ characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> 20+ characters
</li>
</ul>
</div>
<!-- simply many ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> simply many
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
The number of characters you're fine with your RP partner playing in an RP. You might need to specify if you'd like these characters to be main characters/have their POVs written or if you want them to just be NPCs. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, quidem. Neque, architecto illum. Veniam voluptatum dicta sapiente ullam cum placeat itaque! Consequuntur illum quia iure odit quod praesentium, fugit eos!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
</div>
<!---------- =============== ---------->
<!----------------------
=================
RELATIONSHIPS SECTION
================
----------------------->
<div id="relationships"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">relationships</div></div>
<!-- RELATIONSHIP PLANNING
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">relationship planning</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no relationships ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no relationships
</li>
</ul>
</div>
<!-- discuss ooc first ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> discuss ooc first
</li>
</ul>
</div>
<!-- characters must interact with each other first ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> characters interact first
</li>
</ul>
</div>
<!-- depends on characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends on characters
</li>
</ul>
</div>
<!-- depends on situation ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends on situation
</li>
</ul>
</div>
<!-- surprise me ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> surprise me
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Planning for relationships, specifically when you'd like for characters to have a relationship. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RELATIONSHIP EXCLUSIVITY
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">relationship exclusivity</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- exclusive/canon ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> exclusive/canon
</li>
</ul>
</div>
<!-- multishipping (romantic) ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> romantic multishipping
</li>
</ul>
</div>
<!-- multishipping (platonic) ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> platonic multishipping
</li>
</ul>
</div>
<!-- AU relationships ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> AU relationships
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
This block doesn't pertain to character monogamy/non-monogamy; simply, you will detail whether a roleplayed relationship will be canonical, exist only in AUs, or the character(s) involved will be shipped with others eventually. Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- ROMANTIC RELATIONSHIPS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">romantic relationships</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- mxf ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> MxF
</li>
</ul>
</div>
<!-- mxm ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> MxM
</li>
</ul>
</div>
<!-- fxf ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> FxF
</li>
</ul>
</div>
<!-- nbxnb ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> NBxNB
</li>
</ul>
</div>
<!-- nbxm ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> NBxM
</li>
</ul>
</div>
<!-- nbxf ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> NBxF
</li>
</ul>
</div>
<!-- mxmxm ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> MxMxM
</li>
</ul>
</div>
<!-- fxfxf ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> FxFxF
</li>
</ul>
</div>
<!-- mxfxf ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> MxFxF
</li>
</ul>
</div>
<!-- mxmxf ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> MxMxF
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
You can always add more! :3. Notes. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates aut officiis blanditiis facilis quasi nesciunt iste odio ratione vel? Aliquid nobis ab corporis recusandae et odio aut sapiente reprehenderit. Dolor!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
<!----- COLLAPSIBLE CONTENT ------>
<div id="ACCORDION1">
<div class="row no-gutters mx-n2 mt-2">
<!-- TROPES BTN --> <div class="col px-2"><a href="#types_romance" data-toggle="collapse" class="btn btn-sm btn-block py-1 px-2 font-weight-bold text-uppercase text-white" style="font-size: 13px; background-color: #d9bed9;" aria-expanded="false">TYPES</a></div>
<!-- TROPES BTN --> <div class="col px-2"><a href="#tropes_romance" data-toggle="collapse" class="btn btn-sm btn-block py-1 px-2 font-weight-bold text-uppercase text-white" style="font-size: 13px; background-color: #d9bed9;" aria-expanded="false">TROPES</a></div>
<!-- DYNAMICS BTN --> <div class="col px-2"><a href="#dynamics_romance" data-toggle="collapse" class="btn btn-sm btn-block py-1 px-2 font-weight-bold text-uppercase text-white" style="font-size: 13px; background-color: #d9bed9;" aria-expanded="false">DYNAMICS</a></div>
</div>
<!-- TYPES CONTENT -->
<div class="collapse" id="types_romance" data-parent="#ACCORDION1">
<div class="card mt-2 py-3 pr-3 pl-2" style="font-size: 12px;">
<ul class="fa-ul mb-0">
<!-- ex: demon + human, hero + villain, immortal + mortal -->
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>BELOVED WORD + WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>BELOVED WORD + WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>BELOVED WORD + WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED WORD + WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED WORD + WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED WORD + WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
</ul>
</div>
</div>
<!-- TROPES CONTENT -->
<div class="collapse" id="tropes_romance" data-parent="#ACCORDION1">
<div class="card mt-2 py-3 pr-3 pl-2" style="font-size: 12px;">
<ul class="fa-ul mb-0">
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
</ul>
</div>
</div>
<!-- DYNAMICS CONTENT -->
<div class="collapse" id="dynamics_romance" data-parent="#ACCORDION1">
<div class="card mt-2 py-3 pr-3 pl-2" style="font-size: 12px;">
<ul class="fa-ul mb-0">
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
</ul>
</div>
</div>
</div>
<!---------->
</div>
</div>
</div>
<!--------------------------------------->
<!-- PLATONIC RELATIONSHIPS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">platonic relationships</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- friends ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> friends
</li>
</ul>
</div>
<!-- siblings ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> siblings
</li>
</ul>
</div>
<!-- parental ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> parental
</li>
</ul>
</div>
<!-- companions ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> companions
</li>
</ul>
</div>
<!-- familiars ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> familiars
</li>
</ul>
</div>
<!-- mentor-mentee ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> mentor-mentee
</li>
</ul>
</div>
<!-- co-workers ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> co-workers
</li>
</ul>
</div>
<!-- queerplatonic ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> queerplatonic
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- depends/adaptable ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends/adaptable
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
You can always add more! :3. Notes. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates aut officiis blanditiis facilis quasi nesciunt iste odio ratione vel? Aliquid nobis ab corporis recusandae et odio aut sapiente reprehenderit. Dolor!
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
<!----- COLLAPSIBLE CONTENT ------>
<div id="ACCORDION2">
<div class="row no-gutters mx-n2 mt-2">
<!-- TYPES BTN --> <div class="col px-2"><a href="#types_platonic" data-toggle="collapse" class="btn btn-sm btn-block py-1 px-2 font-weight-bold text-uppercase text-white" style="font-size: 13px; background-color: #d9bed9;" aria-expanded="false">TYPES</a></div>
<!-- TROPES BTN --> <div class="col px-2"><a href="#tropes_platonic" data-toggle="collapse" class="btn btn-sm btn-block py-1 px-2 font-weight-bold text-uppercase text-white" style="font-size: 13px; background-color: #d9bed9;" aria-expanded="false">TROPES</a></div>
<!-- DYNAMICS BTN --> <div class="col px-2"><a href="#dynamics_platonic" data-toggle="collapse" class="btn btn-sm btn-block py-1 px-2 font-weight-bold text-uppercase text-white" style="font-size: 13px; background-color: #d9bed9;" aria-expanded="false">DYNAMICS</a></div>
</div>
<!-- TYPES CONTENT -->
<div class="collapse" id="types_platonic" data-parent="#ACCORDION2">
<div class="card mt-2 py-3 pr-3 pl-2" style="font-size: 12px;">
<ul class="fa-ul mb-0">
<!-- ex: demon & angel, hero & companion, brother & sister -->
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>BELOVED WORD & WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>BELOVED WORD & WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>BELOVED WORD & WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED WORD & WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED WORD & WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED WORD & WORD</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
</ul>
</div>
</div>
<!-- TROPES CONTENT -->
<div class="collapse" id="tropes_platonic" data-parent="#ACCORDION2">
<div class="card mt-2 py-3 pr-3 pl-2" style="font-size: 12px;">
<ul class="fa-ul mb-0">
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED TROPE</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
</ul>
</div>
</div>
<!-- DYNAMICS CONTENT -->
<div class="collapse" id="dynamics_platonic" data-parent="#ACCORDION2">
<div class="card mt-2 py-3 pr-3 pl-2" style="font-size: 12px;">
<ul class="fa-ul mb-0">
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-heart fa-fw fa-xs mr-1"></i></span>
<b>ADORED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
<li class="pb-2"><span class="fa-li"><i class="far fa-thumbs-up fa-fw fa-xs mr-1"></i></span>
<b>LIKED DYNAMIC</b>. explanation/details, lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos itaque.</li>
</ul>
</div>
</div>
</div>
<!---------->
</div>
</div>
</div>
<!--------------------------------------->
<!-- RELATIONSHIP SPEED
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">relationship speed</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- speed of sound ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> speed of sound
</li>
</ul>
</div>
<!-- immediately ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> immediately
</li>
</ul>
</div>
<!-- fast ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> fast
</li>
</ul>
</div>
<!-- faster than average ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> faster than average
</li>
</ul>
</div>
<!-- average ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> average
</li>
</ul>
</div>
<!-- slower than average ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> slower than average
</li>
</ul>
</div>
<!-- slow and steady ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> slow and steady
</li>
</ul>
</div>
<!-- insanely slow burn ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> insanely slow burn
</li>
</ul>
</div>
<!-- the rpers are now skeletons ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> indescribably slow
</li>
</ul>
</div>
<!-- depends on characters ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends on characters
</li>
</ul>
</div>
<!-- depends on situation ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depends on situation
</li>
</ul>
</div>
<!-- no preference ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no preference
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis eveniet corporis? Neque labore quis aliquam modi delectus accusamus laudantium natus adipisci, earum itaque saepe, nulla eum eveniet vitae totam?
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
</div>
<!----------------------
=================
BOUNDARIES SECTION
================
----------------------->
<div id="boundaries"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">boundaries</div></div>
<!-- VIOLENCE DEPICTIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">depictions of violence</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no violence ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no violence
</li>
</ul>
</div>
<!-- verbal arguments ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> verbal arguments
</li>
</ul>
</div>
<!-- physical fights, punching, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> physical fights, punching, etc.
</li>
</ul>
</div>
<!-- bruises, scratches, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> bruises, scratches, etc.
</li>
</ul>
</div>
<!-- blood, bleeding, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> weapons, blood, bleeding, etc.
</li>
</ul>
</div>
<!-- stabbing, impaling, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> stabbing, impaling, etc.
</li>
</ul>
</div>
<!-- gun violence, explosions, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> gun violence, explosions, etc.
</li>
</ul>
</div>
<!-- depictions of death ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depictions of killing, murder, etc.
</li>
</ul>
</div>
<!-- physical torture, amputation, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> physical torture, amputation, etc.
</li>
</ul>
</div>
<!-- genocide, war, etc. ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> genocide, war, etc.
</li>
</ul>
</div>
<!-- other ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- SEXUAL INTIMACY DEPICTIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">depictions of sexual intimacy</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no sexual intimacy ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no sexual intimacy
</li>
</ul>
</div>
<!-- making out ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> making out
</li>
</ul>
</div>
<!-- buildup ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> buildup
</li>
</ul>
</div>
<!-- mild smut ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> mild smut
</li>
</ul>
</div>
<!-- explicit smut ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> explicit smut
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- NON-SEXUAL INTIMACY DEPICTIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">depictions of non-sexual intimacy</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no sexual intimacy ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no non-sexual intimacy
</li>
</ul>
</div>
<!-- hand-holding ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> hand-holding
</li>
</ul>
</div>
<!-- hugging ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> hugging
</li>
</ul>
</div>
<!-- cuddling ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> cuddling
</li>
</ul>
</div>
<!-- kisses (lips-to-lips) ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> lips-to-lips kissing
</li>
</ul>
</div>
<!-- kisses (forehead) ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> forehead kisses
</li>
</ul>
</div>
<!-- kisses (cheeks) ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> cheek kisses
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- ABUSE DEPICTIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">depictions of abuse</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no abuse
</li>
</ul>
</div>
<!-- verbal abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> verbal abuse
</li>
</ul>
</div>
<!-- physical abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> physical abuse
</li>
</ul>
</div>
<!-- emotional abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> emotional abuse
</li>
</ul>
</div>
<!-- mental abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> mental abuse
</li>
</ul>
</div>
<!-- sexual abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> sexual abuse
</li>
</ul>
</div>
<!-- child abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> child abuse
</li>
</ul>
</div>
<!-- substance abuse ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> substance abuse
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- PSYCHOLOGICAL ISSUES DEPICTIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">depictions of psychological issues</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no psychological issues ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no psychological issues
</li>
</ul>
</div>
<!-- neurodivergency ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> neurodivergency
</li>
</ul>
</div>
<!-- anxiety ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> anxiety
</li>
</ul>
</div>
<!-- depression ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> depression
</li>
</ul>
</div>
<!-- PTSD ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> PTSD
</li>
</ul>
</div>
<!-- bipolar ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> bipolar
</li>
</ul>
</div>
<!-- DID ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> DID
</li>
</ul>
</div>
<!-- other personality disorders ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other personality disorders
</li>
</ul>
</div>
<!-- schizophrenia ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> schizophrenia
</li>
</ul>
</div>
<!-- delusional disorder ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> delusional disorder
</li>
</ul>
</div>
<!-- other severe psychotic disorders ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other severe psychotic disorders
</li>
</ul>
</div>
<!-- self-harm ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> self-harm
</li>
</ul>
</div>
<!-- suicide ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> suicide
</li>
</ul>
</div>
<!-- other psychological issues ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> other psychological issues
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- OOC RELATIONSHIP PERMISSIONS
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">ooc relationship permissions</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- no talking about anything other than rp ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no talking about anything other than rp
</li>
</ul>
</div>
<!-- no attempts to befriend me ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> no attempts to befriend me
</li>
</ul>
</div>
<!-- talk mostly about rp, but personal things is fine occassionally ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> talk mostly about rp, but personal things is fine occassionally
</li>
</ul>
</div>
<!-- talk about personal things whenever ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> talk about personal things whenever
</li>
</ul>
</div>
<!-- feel free to befriend me ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free befriend me
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
</div>
<!----------------------
=================
ARTWORK SECTION
================
----------------------->
<div id="artwork"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">artwork</div></div>
<!-- GENERAL ARTWORK
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">general artwork</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- feel free to draw ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free to draw
</li>
</ul>
</div>
<!-- publicly post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> publicly post
</li>
</ul>
</div>
<!-- privately post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> privately post
</li>
</ul>
</div>
<!-- never post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> never post
</li>
</ul>
</div>
<!-- post where i can't see it ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> post where i can't see it
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- RELATIONSHIP ARTWORK
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">relationship artwork</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- feel free to draw ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free to draw
</li>
</ul>
</div>
<!-- publicly post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> publicly post
</li>
</ul>
</div>
<!-- privately post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> privately post
</li>
</ul>
</div>
<!-- never post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> never post
</li>
</ul>
</div>
<!-- post where i can't see it ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> post where i can't see it
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- FLUFFY ARTWORK
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">fluffy artwork</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- feel free to draw ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free to draw
</li>
</ul>
</div>
<!-- publicly post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> publicly post
</li>
</ul>
</div>
<!-- privately post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> privately post
</li>
</ul>
</div>
<!-- never post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> never post
</li>
</ul>
</div>
<!-- post where i can't see it ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> post where i can't see it
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- ANGSTY ARTWORK
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">angsty artwork</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- feel free to draw ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free to draw
</li>
</ul>
</div>
<!-- publicly post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> publicly post
</li>
</ul>
</div>
<!-- privately post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> privately post
</li>
</ul>
</div>
<!-- never post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> never post
</li>
</ul>
</div>
<!-- post where i can't see it ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> post where i can't see it
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- VIOLENT ARTWORK
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">violent artwork</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- feel free to draw ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free to draw
</li>
</ul>
</div>
<!-- publicly post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> publicly post
</li>
</ul>
</div>
<!-- privately post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> privately post
</li>
</ul>
</div>
<!-- never post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> never post
</li>
</ul>
</div>
<!-- post where i can't see it ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> post where i can't see it
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
<!-- SEXUAL ARTWORK
------------------------------------->
<div class="mb-2 row no-gutters">
<span class="col-12 w-100 badge p-2 text-uppercase" style="border-radius: 0; font-size: 13px; background-color: #d9bed9;">sexual artwork</span>
<!------- LISTED INFO ------->
<div class="col-lg-4">
<div class="sticky-top">
<div class="px-3 pt-lg-4 pt-2 pb-2 row no-gutters">
<!-- feel free to draw ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> feel free to draw
</li>
</ul>
</div>
<!-- publicly post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> publicly post
</li>
</ul>
</div>
<!-- privately post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> privately post
</li>
</ul>
</div>
<!-- never post ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> never post
</li>
</ul>
</div>
<!-- post where i can't see it ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> post where i can't see it
</li>
</ul>
</div>
<!-- don't care ------------>
<div class="col-lg-12 col-6 p-2 mt-n2">
<ul class="fa-ul mb-0 ml-4">
<li><span class="fa-li">
<!-- COMFORT LEVEL --> <i class="fas fa-square fa-fw fa-sm mr-1"></i>
</span> don't care
</li>
</ul>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
<!------- NOTES ------------->
<div class="col-lg-8 pl-lg-2 pt-lg-2">
<div class="bg-faded p-3 text-justify h-100">
<p>
Make sure to always discuss first. You can always add more! Notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum sunt et doloribus, saepe quae porro. Tempora, quae ipsa voluptatem eveniet et adipisci, recusandae officia iure deserunt, maxime repudiandae nisi.
</p>
<!--- BULLET POINTS --->
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Content.</li>
<li>Content.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur, repudiandae rem quo quae aliquam quis repellat reprehenderit ducimus consectetur eligendi earum vel voluptates consequatur itaque odio exercitationem delectus iure! Velit.</li>
</ul>
</div>
</div>
</div>
<!--------------------------------------->
</div>
<!----------------------
=================
EXTRA SECTION
================
----------------------->
<div id="extra"></div>
<div class="my-2">
<div class="mb-2"><div class="bg-faded p-2 font-weight-bold text-center" style="font-size: 20px; color: #d9bed9; letter-spacing: 2px;">extra</div></div>
<!------- BULLET POINTS -------->
<div class="pt-lg-4 pt-2 pb-2 pr-4 row no-gutters text-justify">
<div class="col-lg-6 p-1">
<ul class="ml-0">
<li>
Extra notes. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis pariatur fugit, ad ab sapiente aut ducimus saepe nesciunt ea! Explicabo asperiores maxime consequatur vero rem dolore hic libero optio placeat?
</li>
</ul>
</div>
<div class="col-lg-6 p-1">
<ul class="ml-0">
<li>
Extra notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus vel fugit similique perferendis porro quidem officia alias aliquid saepe! Consequatur facilis rem expedita dolores sit porro quod quasi odit saepe?
</li>
</ul>
</div>
<div class="col-lg-6 p-1">
<ul class="ml-0">
<li>
Extra notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus vel fugit similique perferendis porro quidem officia alias aliquid saepe! Consequatur facilis rem expedita dolores sit porro quod quasi odit saepe?
</li>
</ul>
</div>
<div class="col-lg-6 p-1">
<ul class="ml-0">
<li>
Extra notes. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis pariatur fugit, ad ab sapiente aut ducimus saepe nesciunt ea! Explicabo asperiores maxime consequatur vero rem dolore hic libero optio placeat?
</li>
</ul>
</div>
<div class="col-lg-6 p-1">
<ul class="ml-0">
<li>
Extra notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus vel fugit similique perferendis porro quidem officia alias aliquid saepe! Consequatur facilis rem expedita dolores sit porro quod quasi odit saepe?
</li>
</ul>
</div>
<div class="col-lg-6 p-1">
<ul class="ml-0">
<li>
Extra notes. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus vel fugit similique perferendis porro quidem officia alias aliquid saepe! Consequatur facilis rem expedita dolores sit porro quod quasi odit saepe?
</li>
</ul>
</div>
</div>
<!--------->
<!------- GRAY BLOCK ----------->
<div class="bg-faded p-3 text-justify mt-2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio alias possimus, totam reiciendis necessitatibus voluptate maxime eos ratione fuga laborum quasi, ab iure nostrum veritatis molestiae. Consequuntur exercitationem facere doloribus.
</div>
<!--------->
</div>
</div>
</div>
</div>
</div>
<!--------------- CREDITS --------------->
<div class="text-center my-2 text-muted faded small">
base by <a href="https://www.deviantart.com/elfsama/journal/The-RP-Comfort-Meme-624457392" target="_blank" style="text-decoration: none;">elfsama</a>
|
coded by <a href="acodingperson" target="_blank" style="text-decoration: none;">acp</a>
</div>
</div>