[CHARA] Eye collector
created by:FlowerlyRat
Custom ColorsCSSCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
Eye collector: code by FlowerlyRat || September 2023 Coder's Quarters - Style Challenge
Updated January 2025 [code fixes and others]
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Any links added use the following format [target="_blank" is optional]:
Change the hue, saturation, and brightness in the "filter" style to have the color of your choice
<a target="_blank" class="text-warning" style="font-weight: bold; filter: hue-rotate(10deg) saturate(250%) brightness(80%)" href="LINK_HERE">text_here</a>
Select, ctrl+F, "+", write what you want it to be, and click "all" to change everything at once
Text font: impact
Text color: #fff
Rgba values used for easy replacement due to different opacities
Accent color [yellow]: 255, 217, 110
Second accent color [light purple]: 170, 90, 223
Glowing [white]: 255, 255, 255
Darkest background color: 30, 19, 54
Mid background color: #311f57
Lightest background color: #453087
Bouton tabs outline color [uses filters]: hue-rotate(250deg) saturate(250%) brightness(120%)
Bouton characters outline color [uses filters]: hue-rotate(10deg) saturate(250%) brightness(104%)
Additional mix-blend-mode on: lighten -> for more blending modes: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
To change character IDs for the relationship area, please search "How to" by using Ctrl + F
-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
BACKGROUND COLOR
////////////////////////////////////////////////////////////////////////////////////////////-->
<div style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
background-color: rgba(30, 19, 54, 1)
; z-index: -1;"></div>
<div class="row no-gutters" style="color: #fff">
<!--////////////////////////////////////////////////////////////////////////////////////////////
LEFT COLUMN
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-lg-6 pr-md-2 mb-2 h-100">
<!--///// Decorative /////-->
<div class="row no-gutters mb-1 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 20px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 20px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 20px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 20px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 20px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 20px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 20px;"></div>
</div>
<!--///// Decorative end /////-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card-title py-4 px-1 my-auto" style="background-color: #453087">
<div class="row no-gutters align-items-center">
<div class="col-auto">
<div class="border-0 p-1 justify-content-center align-items-center" style="font-size: 15px; color: rgba(170, 90, 223, 0.5)"><i class="fas fa-eye fa-flip-horizontal"></i></div>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto" style="max-width: 85%">
<h1 class="text-capitalize text-center text-truncate px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
Name
</em></h1>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
<div class="col-auto">
<div class="border-0 p-1 justify-content-center align-items-center" style="font-size: 15px; color: rgba(170, 90, 223, 0.5)"><i class="fas fa-eye"></i></div>
</div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/////////////////////// INTRODUCTORY CONTENT ///////////////////////-->
<div class="row no-gutters p-3" style="background-color: #311f57">
<div class="col-lg-auto p-2 justify-content-center">
<!--///// Blinking eyes /////-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: -7px; top: -9px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -5px; bottom: -2px; animation-duration: 6.5s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 20px; bottom: -15px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--///// Blinking eyes end /////-->
<!--///// Avatar /////-->
<div class="card rounded-0 p-1 tooltipster" style="height: 160px; width: 160px; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); border-color: rgba(255, 255, 255, 1); background-color: rgba(30, 19, 54, 1); overflow: hidden"
title="Art by ---- [platform]">
<img class="d-block m-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" style="height: 148px; object-fit: cover; object-position: center">
</div>
<!--///// Avatar end /////-->
</div>
<!--///// Introduction /////-->
<div class="col-lg p-2">
<div class="card border-0 rounded-0" style="height: 160px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write some silly character information. This could be used to write a very long quote for example, or just a short summary, maybe even song lyrics? This box scrolls after a certain amount of words! Also hey, here's what a <a target="_blank" class="text-warning" style="font-weight: bold; filter: hue-rotate(10deg) saturate(250%) brightness(105%)" href="LINK_HERE">link looks like</a>!
</p>
</div>
</div>
<!--///// Introduction end /////-->
</div>
<!--///// Code credit: DO NOT DELETE /////-->
<div class="card border-0 rounded-0 px-2" style="background-color: #311f57">
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<a target="_blank" class="btn border-0 py-1 px-1 justify-content-center align-items-center" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: rgba(255, 217, 110, 1)"><i class="fas fa-less-than" style="font-size: 11px"></i><i class="fas fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-greater-than" style="font-size: 11px"></i></a>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--///// Code credit: DO NOT DELETE end /////-->
<!--/////////////////////// INTRODUCTORY CONTENT end ///////////////////////-->
<!--/////////////////////// MAIN CONTENT ///////////////////////-->
<div class="row no-gutters p-3" style="background-color: #311f57">
<!--///// Buttons /////-->
<div class="card border-0 rounded-0 bg-transparent " style="position: absolute; left: -10px; z-index: 3">
<ul class="nav nav-pills flex-column">
<!--/// Info ///-->
<li class="nav-item card rounded-0 mb-3 align-items-center justify-content-center" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); width: 47px; height: 47px; background-color: rgba(170, 90, 223, 1)">
<a class="btn btn-outline-warning active rounded-0 border-0 align-items-center justify-content-center" style="width: 45px; height: 45px; color: #fff; box-shadow:none; filter: hue-rotate(250deg) saturate(250%) brightness(120%)" data-toggle="tab" href="#INFO">
<i class="fas fa-books" style="font-size: 25px"></i>
</a>
</li>
<!--/// Info end ///-->
<!--/// Trivia ///-->
<li class="nav-item card rounded-0 mb-3 align-items-center justify-content-center" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); width: 47px; height: 47px; background-color: rgba(170, 90, 223, 1)">
<a class="btn btn-outline-warning rounded-0 border-0 align-items-center justify-content-center" style="width: 45px; height: 45px; color: #fff; box-shadow:none; filter: hue-rotate(250deg) saturate(250%) brightness(120%)" data-toggle="tab" href="#TRIVIA">
<i class="fas fa-award" style="font-size: 25px"></i>
</a>
</li>
<!--/// Trivia end ///-->
<!--/// Design ///-->
<li class="nav-item card rounded-0 mb-3 align-items-center justify-content-center" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); width: 47px; height: 47px; background-color: rgba(170, 90, 223, 1)">
<a class="btn btn-outline-warning rounded-0 border-0 align-items-center justify-content-center" style="width: 45px; height: 45px; color: #fff; box-shadow:none; filter: hue-rotate(250deg) saturate(250%) brightness(120%)" data-toggle="tab" href="#DESIGN">
<i class="fas fa-palette" style="font-size: 25px"></i>
</a>
</li>
<!--/// Design end ///-->
</ul>
</div>
<!--///// Buttons end /////-->
<!--///// Multi information tabs /////-->
<div class="col-lg p-2" style="height: 360px">
<div class="card bg-transparent border-0 rounded-0">
<div class="tab-content">
<!--/// Info ///-->
<div id="INFO" class="tab-pane fade show active" style="height: 360px; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto">
<!--// About section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
About</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<p class="text-white text-justify pl-4"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of your character! As you can see, this box scrolls! For example I could write here that Iris <em>[the character featured on the preview]</em> is a silly little goose that causes mischief and crimes, such as petty thievery and arson, but also some harmless pranks :3
</p>
<!--// About section end //-->
<div class="ml-4 my-3" style="border-width: 1px 0 0 0; border-style: dashed; color: rgba(170, 90, 223, 0.3)"></div>
<!--// Interest section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
Interests</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<p class="text-white text-justify pl-4"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write your character's interests! Go crazy man i don't know!!! This code is already long, might as well write a lot of stuff here I guess!!!! I could add here that Iris happens to have an interest in eyes!! More specifically in changing their own eye color <em>[don't worry they aren't organic, he's a rock person lol]</em>!
</p>
<!--// Interest section end //-->
<div class="ml-4 my-3" style="border-width: 1px 0 0 0; border-style: dashed; color: rgba(170, 90, 223, 0.3)"></div>
<!--// Likes/dislikes section //-->
<div class="row no-gutters">
<!--// Likes //-->
<div class="col-md">
<h1 class="text-center pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Likes</em></h1>
<div class="ml-4 mb-2" style="border-width: 1px 0 0 0; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<ul class="list-unstyled text-white text-justify pl-4" style="margin-left: 8px">
<li>- content</li>
<li>- content</li>
<li>- content</li>
<li>- content</li>
</ul>
</div>
<!--// Likes end //-->
<!--// Dislikes //-->
<div class="col-md">
<h1 class="text-center pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Dislikes</em></h1>
<div class="ml-4 mb-2" style="border-width: 1px 0 0 0; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<ul class="list-unstyled text-white text-justify pl-4" style="margin-left: 8px">
<li>- content</li>
<li>- content</li>
<li>- content</li>
<li>- content</li>
</ul>
</div>
<!--// Dislikes end //-->
</div>
<!--// Likes/dislikes section end //-->
</div>
<!--/// Info end ///-->
<!--/// Trivia ///-->
<div id="TRIVIA" class="tab-pane fade" style="height: 360px; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto">
<!--// Trivia section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
Trivia</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<p class="text-white text-justify pl-4"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>H</b>
</span>ere you can write a quick description of some of the trivia elements if they need further explanations. If not, then just use the list below! Though I do recommend writing at least something here to keep the layout cohesive.
</p>
<!--// Trivia section end //-->
<div class="ml-4 my-3" style="border-width: 1px 0 0 0; border-style: dashed; color: rgba(170, 90, 223, 0.3)"></div>
<!--// Small facts section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
Small facts</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<ul class="list-unstyled text-white text-justify pl-4" style="margin-left: 8px">
<li>- content</li>
<li>- content</li>
<li>- content</li>
<li>- content</li>
</ul>
<!--// Small facts section end //-->
<div class="ml-4 my-3" style="border-width: 1px 0 0 0; border-style: dashed; color: rgba(170, 90, 223, 0.3)"></div>
<!--// Ribbons section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
Ribbons</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<!--///// ROW [1] /////-->
<div class="row no-gutters pl-4">
<!-- [1] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [1] -->
<!-- [2] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [2] -->
<!-- [3] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [3] -->
<!-- [4] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [4] -->
</div>
<!--///// ROW [1] end /////-->
<!--///// ROW [2] /////-->
<div class="row no-gutters pl-4">
<!-- [1] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [1] -->
<!-- [2] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [2] -->
<!-- [3] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [3] -->
<!-- [4] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [4] -->
</div>
<!--///// ROW [2] end /////-->
<!--///// ROW [3] /////-->
<div class="row no-gutters pl-4">
<!-- [1] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [1] -->
<!-- [2] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [2] -->
<!-- [3] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [3] -->
<!-- [4] -->
<div class="col p-1 align-items-center justify-content-center">
<span data-toggle="tooltip" data-placement="top"
title="PLACEHOLDER">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png"></span>
</div>
<!-- [4] -->
</div>
<!--///// ROW [3] end /////-->
<!--// Ribbons section end //-->
</div>
<!--/// Trivia end ///-->
<!--/// Design ///-->
<div id="DESIGN" class="tab-pane fade" style="height: 360px; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto">
<!--// Boundaries section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
Boundaries</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<p class="text-white text-justify pl-4"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>ext box to write if you mind, or not, when people alter your character's design! Such as: if you're comfortable with people adding or omitting details, changing the color palette, changing their cloth, changing the species, draw a genderbent version, etc. The list below is to specify elements that are often forgotten by others, or details that absolutely NEED to be present! You can probably add images of the latter below if you're good with coding too.
</p>
<!--// Boundaries section end //-->
<div class="ml-4 my-3" style="border-width: 1px 0 0 0; border-style: dashed; color: rgba(170, 90, 223, 0.3)"></div>
<!--// Notes section //-->
<h1 class="pl-4" style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>
Design notes</em></h1>
<div class="ml-4 mb-3" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<ul class="list-unstyled text-white text-justify pl-4" style="margin-left: 8px">
<li>- content</li>
<li>- content</li>
<li>- content</li>
<li>- content</li>
</ul>
<!--// Notes section end //-->
</div>
<!--/// Design end ///-->
</div>
</div>
</div>
<!--///// Multi information tabs end /////-->
<!--///// Main image /////-->
<div class="col-lg-4 p-2">
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: 40px; top: -15px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: -10px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; top: 20px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Image ///-->
<div class="card rounded-0 p-1 tooltipster" style="height: 350px; width: auto; background-color: rgba(30, 19, 54, 1); box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); border-color: rgba(255, 255, 255, 1); overflow: hidden"
title="Art by ---- [platform]">
<img class="d-block mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png
" style="height: 340px; width: 100%; object-fit: cover; object-position: center">
</div>
<!--/// Image end ///-->
</div>
<!--///// Main image end /////-->
</div>
<!--/////////////////////// MAIN CONTENT end ///////////////////////-->
</div>
<!--/////////////////////////////////////////////////////////////// LEFT COLUMN end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
RIGHT COLUMN
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-lg">
<div class="row no-gutters">
<!--/////////////////////// BASIC INFO ///////////////////////-->
<div class="col pr-md-1 pl-md-0 h-100">
<!--///// Age /////-->
<div class="card border-0 rounded-0 p-2 mb-2" style="background-color: #311f57">
<div class="row no-gutters">
<div class="col-3 card rounded-0 justify-content-center align-items-center" style="height: 80px; max-width: 80px; border-color: rgba(170, 90, 223, 1); background-color: #453087; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1)">
<i class="fad fa-eye fa-flip" style="animation-duration: 5.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1)"></i>
</div>
<div class="col px-3 my-auto">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Age</em></h1>
<p style="max-height: 47px; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Number here
</p>
</div>
</div>
</div>
<!--///// Age end /////-->
<!--///// Orientation /////-->
<div class="card border-0 rounded-0 p-2 mb-2" style="background-color: #311f57">
<div class="row no-gutters">
<div class="col-3 card rounded-0 justify-content-center align-items-center" style="height: 80px; max-width: 80px; border-color: rgba(170, 90, 223, 1); background-color: #453087; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1)">
<i class="fad fa-eye fa-flip" style="animation-duration: 9.7s; animation-delay: 5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1)"></i>
</div>
<div class="col px-3 my-auto">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Orientation</em></h1>
<p style="max-height: 47px; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Orientation here
</p>
</div>
</div>
</div>
<!--///// Orientation end /////-->
<!--///// Pronouns /////-->
<div class="card border-0 rounded-0 p-2 mb-2" style="background-color: #311f57">
<div class="row no-gutters">
<div class="col-3 card rounded-0 justify-content-center align-items-center" style="height: 80px; max-width: 80px; border-color: rgba(170, 90, 223, 1); background-color: #453087; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1)">
<i class="fad fa-eye fa-flip" style="animation-duration: 7s; animation-delay: 3s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1)"></i>
</div>
<div class="col px-3 my-auto">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Pronouns</em></h1>
<p style="max-height: 47px; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Pro/nouns
</p>
</div>
</div>
</div>
<!--///// Pronouns end /////-->
</div>
<!--/////////////////////// BASIC INFO end ///////////////////////-->
<!--/////////////////////// MUSIC PLAYER ///////////////////////-->
<div class="col-auto px-md-0 pl-1" style="padding-top: 66px">
<div class="card border-0 rounded-0 px-3 justify-content-center fa-rotate-90 tooltipster" style="margin-left: -62px; margin-right: -66px; height: 68px; width: 200px; background-color: rgba(255, 217, 110, 1)"
title="Song title">
<!--///// Song title + artist /////-->
<!--long text will be truncated, don't forget to change the tooltip above to showcase the whole name-->
<p class="text-white text-truncate w-100" style="font-variant: small-caps; letter-spacing: 2px"><span style="font-weight: bold; font-size: 15px">
Song title</span>
<br><span style="font-size: 10px; font-style: oblique; letter-spacing: 1.5px">
Artist</span></p>
<!--///// Song title + artist end /////-->
</div>
<div class="card border-0 rounded-0 mb-1 justify-content-center align-items-center" style="margin-top: 70px; margin-left: 4px; height: 62px; background-color: rgba(255, 217, 110, 0.7)">
<span>
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x text-white" style="text-shadow: 0 0 1px #fff, 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"></i>
<i class="fas fa-music fa-stack-1x fa-inverse" style="color: rgba(255, 217, 110, 1)"></i></span>
<!--///// Song video ID /////-->
<iframe class="flex-fill" style="position: absolute; margin-left: -38px; margin-top: -5px; width: 40px; height: 40px; opacity: 0.01;" frameborder="0"
src="https://www.youtube.com/embed/VIDEOIDHERE">
</iframe>
<!--///// Song video ID end /////-->
</span>
</div>
<div class="card border-0 rounded-0 ml-1 mb-1" style="margin-left: 4px; background-color: rgba(255, 217, 110, 0.4); height: 20px"></div>
<div class="card border-0 rounded-0 ml-1 mb-1" style="margin-left: 4px; background-color: rgba(255, 217, 110, 0.2); height: 10px"></div>
</div>
<!--/////////////////////// MUSIC PLAYER end ///////////////////////-->
</div>
<div class="row no-gutters">
<!--///// Decorations /////-->
<div class="col-auto mr-2" style="width: 30px">
<div class="card border-0 rounded-0 mb-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px"></div>
<div class="card border-0 rounded-0 mb-1" style="background-color: rgba(255, 217, 110, 0.4); height: 30px"></div>
<div class="card border-0 rounded-0 mb-1" style="background-color: rgba(255, 217, 110, 0.7); height: 68px"></div>
<div class="card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 1); height: 310px;"></div>
</div>
<!--///// Decorations end /////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
RELATIONSHIPS
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col">
<!--/// Blinking eyes ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 40px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -10px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 20px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<div class="card border-0 rounded-0" style="height: 435px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters my-3 align-items-center">
<div class="col mx-2" style="height: 5px; color: rgba(170, 90, 223, 0.3); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto"> <h1 class="text-capitalize" style="font-variant: small-caps; font-family: impact; font-size: 25px; letter-spacing: 6px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Links</em></h1></div>
<div class="col mx-2" style="height: 5px; color: rgba(170, 90, 223, 0.3); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
<p class="text-center mb-3" style="margin-top: -20px; font-variant: small-caps; font-size: 10px; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">[Click for more information]</p>
<!--/////////////////////// ROW [1] ///////////////////////-->
<div class="row no-gutters">
<!--///// [1] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_1">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [1] /////-->
<!--///// [2] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_2">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [2] /////-->
<!--///// [3] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_3">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [3] /////-->
</div>
<!--/////////////////////// ROW [1] end ///////////////////////-->
<!--/////////////////////// ROW [2] ///////////////////////-->
<div class="row no-gutters">
<!--///// [4] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_4">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [4] /////-->
<!--///// [5] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_5">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [5] /////-->
<!--///// [6] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_6">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [6] /////-->
</div>
<!--/////////////////////// ROW [2] end ///////////////////////-->
<!--/////////////////////// ROW [3] ///////////////////////-->
<div class="row no-gutters">
<!--///// [7] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_7">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [7] /////-->
<!--///// [8] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_8">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [8] /////-->
<!--///// [9] /////-->
<div class="col mb-3 justify-content-center align-items-center">
<ul class="card rounded-0 nav nav-button nav-justified" style="box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); border-color: rgba(170, 90, 223, 1); background-size:cover; width: 97px; height: 97px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
);"><!--// Link to avatar above //-->
<li class="nav-item">
<a class="nav-link btn btn-outline-warning rounded-0 border-0" style="width: 95px; height: 95px; filter: hue-rotate(10deg) saturate(250%) brightness(104%); mix-blend-mode: lighten; box-shadow:none" data-toggle="collapse"
href="#CHARA_9">
<!--// Collapsible ID //-->
</a></li>
</ul>
</div>
<!--///// [9] /////-->
</div>
<!--/////////////////////// ROW [1] end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// RELATIONSHIPS end ///////////////////////////////////////////////////////////////-->
</div>
<!--/////////////////////////////////////////////////////////////// RIGHT COLUMN end ///////////////////////////////////////////////////////////////-->
</div>
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--
How to modify the relationship collapsibles to have custom IDs
If you want custom IDs for each of the characters in the relationship area, you'll need to be SURE to replace every single instance of said ID, and it's pretty easy to do!
For exemple, if a character has the ID "CHARA_0" that I want to change to "Baby", all I need to do is:
Select "CHARA_0"
Ctrl + F
Click on the "+" in the open window
Write "Baby" in the new little box below
Click "All"
And normally, everything should be changed to the new ID!
To make sure everything has been replaced, when Ctrl + F'ing the new ID, there should be written "# of 3" at the bottom of the little window! ["#" is a number between 1 and 3]
-->
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////
RELATIONSHIP COLLAPSIBLES
////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [1]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_1"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_1">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
Name
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [1] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [2]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_2"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_2">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
very cool
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [2] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [3]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_3"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_3">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
Oh hi
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [3] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [4]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_4"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_4">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
Are you,,,
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [4] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [5]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_5"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_5">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
actually like,
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [5] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [6]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_6"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_6">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
checking them all?
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [6] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [7]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_7"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_7">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
now that I think about it
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1),0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [7] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [8]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_8"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_8">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
you probably just,
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [8] end ///////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER [9]
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade"
id="CHARA_9"><!-- Character tab ID -->
<div class="fixed-bottom" style="top: 0px; bottom: 0px; left: 0px; background: rgba(30, 19, 54, 0.7); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); overflow: auto"><br><br>
<div class="row no-gutters p-3">
<div class="col-lg-3 my-auto py-4" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Close button ///-->
<a class="btnp-0" data-toggle="collapse" style="position: absolute; top: 5px; left: 10px; z-index: 5"
href="#CHARA_9">
<i class="fas fa-times" style="font-size: 40px; color: rgba(255, 217, 110, 1); text-shadow: 0px 0px 8px rgba(255, 217, 110, 1)"></i></a>
<!--/// Close button end ///-->
<!--/// Blinking eyes ///-->
<!--top-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: -10px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: -4px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; top: 30px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; top: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--bottom-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -14px; bottom: 40px; animation-duration: 4s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 15px; texT-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; bottom: -10px; animation-duration: 14s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 25px; bottom: 20px; animation-duration: 6.5s; animation-delay: 0.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// FULL BODY IMAGE ///////////////////////-->
<div class="container d-flex justify-content-center text-uppercase align-items-end" style="height: 450px"><img style="min-height: 350px; max-height: 450px" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
"></div>
<!--/////////////////////// FULL BODY IMAGE end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO ///////////////////////-->
<div class="col-lg p-3" style="background: rgba(30, 19, 54, 0.7)">
<!--/// Decorative ///-->
<div class="row no-gutters mb-3 align-items-center">
<div class="col card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-5 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 1); height: 15px;"></div>
<div class="col-2 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.7); height: 15px;"></div>
<div class="col-1 card border-0 rounded-0 mr-1" style="background-color: rgba(255, 217, 110, 0.4); height: 15px;"></div>
<div class="col card border-0 rounded-0" style="background-color: rgba(255, 217, 110, 0.2); height: 15px;"></div>
</div>
<!--/// Decorative end ///-->
<!--/// Blinking eyes: top left ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; left: -10px; top: 280px; animation-duration: 4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: -12px; top: 300px; animation-duration: 14s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; left: 35px; top: 270px; animation-duration: 6.5s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/// Blinking eyes: bottom right ///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; bottom: -10px; animation-duration: 4s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: -4px; animation-duration: 14s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 25px; bottom: 30px; animation-duration: 6.5s; animation-delay: 0.4s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -10px; bottom: 60px; animation-duration: 4s; animation-delay: 0.6s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<!--/// Blinking eyes end ///-->
<!--/////////////////////// NAME ///////////////////////-->
<div class="card rounded-0 p-4 my-auto" style="border-color: rgba(255, 255, 255, 1); background-color: #453087; box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
<div class="row no-gutters align-items-center">
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 2px 0 1px 0; border-style: solid"></div>
<div class="col-auto mx-1">
<!--/// Link to character right below ///-->
<a target="_blank"
href="#"
style="color: #fff"><h1 class="text-capitalize text-center px-1" style="font-variant: small-caps; font-family: impact; font-size: 35px; letter-spacing: 6px; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1);"><em>
Saw these in the code lol
</em></h1></a>
</div>
<div class="col" style="height: 5px; color: rgba(170, 90, 223, 0.5); border-width: 1px 0 2px 0; border-style: solid"></div>
</div>
</div>
<!--/////////////////////// NAME end ///////////////////////-->
<!--/// Divider ///-->
<div class="card bg-transparent border-0 rounded-0 p-4">
<!--///Blinking eyes///-->
<i class="fad fa-eye fa-flip" style="position: absolute; right: 40px; top: 15px; animation-duration: 4s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 15px; text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1); color: rgba(170, 90, 223, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: 0px; bottom: 10px; animation-duration: 14s; animation-delay: 1s; transform: rotate(180deg); font-size: 37px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<i class="fad fa-eye fa-flip" style="position: absolute; right: -14px; top: 0px; animation-duration: 6.5s; animation-delay: 0.8s; transform: rotate(180deg); font-size: 20px; text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); color: rgba(255, 217, 110, 1); z-index: 1"></i>
<!--///Blinking eyes end///-->
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
<div class="col-auto">
<span class="p-2" style="color: rgba(255, 217, 110, 1); font-size: 15px"><i class="fas fa-eye fa-flip" style="animation-duration: 10s; transform: rotate(180deg);"></i></span>
</div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: rgba(170, 90, 223, 0.3)"></div>
</div>
</div>
<!--/// Divider end ///-->
<!--/////////////////////// RELATIONSHIP STATUS ///////////////////////-->
<div class="card rounded-0 p-3 mb-4" style="border-color: rgba(170, 90, 223, 1); background-color: #311f57; box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1)">
<div class="row no-gutters">
<!--///// Time met /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Time met</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Date or stage of life
</p>
</div>
<!--///// Time met end /////-->
<!--///// Mutuality /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Mutuality</em></h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
If feelings are mutual
</p>
</div>
<!--///// Mutuality end /////-->
<!--///// Type of relationship /////-->
<div class="col-lg-4">
<h1 style="font-variant: small-caps; font-family: impact; letter-spacing: 4px; color: rgba(170, 90, 223, 1); text-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 10px rgba(170, 90, 223, 1)"><em>Relationship</em>
<!--
Full heart: fas fa-heart
Half heart: fad fa-heart-half
No heart: fas fa-heart-broken [change opacity to 0.5]
-->
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fas fa-heart"></i></span>
<span style="font-size: 10px; opacity: 1"><i class="fad fa-heart-half"></i></span>
<span style="font-size: 10px; opacity: 0.5"><i class="fas fa-heart-broken"></i></span>
</h1>
<p class="text-truncate" style="max-width: 95%; font-variant: small-caps; letter-spacing: 1px; color: rgba(255, 217, 110, 1); text-shadow: 0 0 1px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1)">
Type of relationship
</p>
</div>
<!--///// Type of relationship end /////-->
</div>
</div>
<!--/////////////////////// RELATIONSHIP STATUS end ///////////////////////-->
<!--/////////////////////// DESCRIPTION ///////////////////////-->
<div class="card border-0 rounded-0 p-3 mb-3" style="height: 140px; background-color: #311f57; scrollbar-width: thin; scrollbar-color: rgba(255, 217, 110, 1) rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(170, 90, 223, 1), 0 0 5px rgba(170, 90, 223, 1); overflow: auto">
<p class="text-justify text-white px-1"><span class="card rounded-0 border-0 p-3 align-items-center justify-content-center" style="float: left; height: 40px; width: 40px; margin-right: 4px; font-size: 25px; font-style: oblique; text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 217, 110, 1), 0 0 10px rgba(255, 217, 110, 1); background-color: rgba(255, 217, 110, 0.5)">
<!--First letter of the body text is right below-->
<b>T</b>
</span>his is a box to write a more in-depth description of the relationship between the 2 characters. The box will scroll once it hits a certain amount of characters so uuuh, have fun I guess. I do find it very funny that my first idea was to make everything pretty simple, especially for the relationship portion of thi code, and I PROBABLY should have kept it that <em>simple</em>. But then I started fixating on it and oh no! Why is the relationship portion so big?! Why did I even bother coding collapsibles for it?! We shall never know,,, Just never let me do that ever again, I'm begging bruuuh,,,
</p>
</div>
<!--/////////////////////// DESCRIPTION end ///////////////////////-->
</div>
<!--/////////////////////// ADDITIONAL INFO end ///////////////////////-->
</div>
</div>
</div>
<!--/////////////////////////////////////////////////////////////// CHARACTER [9] end ///////////////////////////////////////////////////////////////-->