<!--
Code by Syensy on TH (https://toyhou.se/Syensy)!
Credits are already included. Please do not remove
them :)
COLOR KEY
Search & replace all "Management" colours with
matching colors from other palettes or mix and match
as wanted!
Bonus
Main: #80ccff
Shadow: #81190f
Text: #ff6463
-->
<div class="m-auto" style="background: black; max-width: 1140px; font-size: 1.25em">
<div class="container" style="color: #ff6463; margin: 0px">
<div class="row" style="margin: -4px; margin-left: -19px; margin-right: -19px">
<div class="col" style="background: #80ccff;padding: 0px;font-size: 20px;margin: 0px;padding: 4px;">
<!--Picture-->
<!--Replace the url with the character's image url -->
<div class="col w-100" style="padding: 0">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74011332_hQHYq6hYvDPH9Ud.png" class="w-100 h-100" alt="Alt text here.">
</div>
<div class="w-100"></div>
<!--Name and level-->
<div class="col text-center" style="background: black;padding: 5px;margin-top: 4px;margin-bottom: 4px;font-weight: bold;">
<!--Name & level-->
<span id="level" style="padding: 4px;float: left;margin-top: -14px;font-size: 36px;">
<!--Level: I 1, II 2, III 3, IV 4, V 5 (+ EX?)--> III</span>
<!--Name-->
<span id="name" style="text-shadow: 2px 2px 2px #81190f">
<!--Uncomment code fields to use them-->
<!--First letter of name goes within the first span and the rest goes after-->
<span style="font-size: 26px">M</span>AIN <!--Middle name-->
<!--<span style="font-size: 26px">M</span>IDDLE-->
<!--Last name-->
<!--<span style="font-size: 26px">L</span>AST-->
</span>
</div>
<div class="w-100"></div>
<!--Left navigation buttons-->
<div class="col" style="background: black;padding: 8px;margin-top: 2px;font-weight: bold;">
<ul class="nav flex-column" style="font-size: 22px">
<li class="nav-item" style="padding: 8px; margin-top: 7px">
<a class="nav-link active" href="#about" style="padding: 0px; color: #ff6463" data-toggle="tab">
<i class="fa-regular fa-square" style="padding: 6px; padding-bottom: 12px"></i> About</a>
</li>
<li class="nav-item" style="padding: 8px; margin-top: 7px">
<a class="nav-link" href="#biography" style="padding: 0px; color: #ff6463" data-toggle="tab">
<i class="fa-regular fa-square" style="padding: 6px; padding-bottom: 12px"></i> Biography </a>
</li>
<li class="nav-item" style="padding: 8px; margin-top: 7px">
<a class="nav-link" href="#relationships" style="padding: 0px; color: #ff6463" data-toggle="tab">
<i class="fa-regular fa-square" style="padding: 6px; padding-bottom: 12px"></i> Relationships </a>
</li>
<li class="nav-item" style="padding: 8px; margin-top: 7px">
<a class="nav-link" href="#gear" style="padding: 0px; color: #ff6463" data-toggle="tab">
<i class="fa-regular fa-square" style="padding: 6px; padding-bottom: 12px"></i> Gear </a>
</li>
</ul>
</div>
</div>
<div class="col-lg-9 tab-pane active show" style="padding: 0px; margin: 0px">
<!--Top Info-->
<div style="background: black; height: 176px">
<div class="row" style="margin: 0px">
<div class="col-9" style="margin: 0px;padding: 0px;border: 4px solid #80ccff;border-left: none;border-left: 4px solid #80ccff;">
<div id="title" class="text-center" style="padding-top: -4px;height: 52px;font-weight: bold;font-size: 26px; overflow: auto;text-shadow: 2px 2px 2px #81190f;border-bottom: 4px dashed #80ccff;">
<!--Title. Same format as name-->
<!--For example, SLY COMPREHENDER and so on-->
<span style="font-size: 32px">P</span>LACEHOLDER <span style="font-size: 32px">P</span>LACEHOLDER <!--<span style="font-size: 32px">P</span>LACEHOLDER-->
<!--<span style="font-size: 32px">P</span>LACEHOLDER-->
<!--<span style="font-size: 32px">P</span>LACEHOLDER-->
</div>
<!--Info fields-->
<div id="infofields" class="row" style="margin: 0px;height: 125px;padding-top: 4px;overflow: auto;overflow-wrap: anywhere;">
<div class="col" style="border-right: 4px dashed #80ccff;height: 117px;margin-left: -1px;">
<div id="gender" style="height: 41px"> Gender:<span style="float: right; padding-right: 8px">
<!--Enter gender--> Incomprehensible </span>
</div>
<div id="birthday" style="height: 41px"> Birthday:<span style="float: right; padding-right: 8px">
<!--Enter birthday--> Today </span>
</div>
<div style="height: 36px"> Department:<span style="float: right; padding-right: 8px">
<!--Enter department--> All </span>
</div>
</div>
<div class="col" style="height: 117px">
<div style="height: 41px"> Pronouns:<span style="float: right; padding-right: 8px">
<!--Enter pronouns--> Pro/nouns </span>
</div>
<div style="height: 41px"> Age:<span style="float: right; padding-right: 8px">
<!--Enter age--> Immortal </span>
</div>
<div style="height: 36px"> Role:<span style="float: right; padding-right: 8px">
<!--Enter role--> Manager </span>
</div>
</div>
</div>
</div>
<!--Stats-->
<div id="stats" class="col text-center" style="padding: 0px;font-size: 27px;color: #80ccff;border: 4px solid #80ccff;border-left: none;font-weight: bold;">
<!--Stat levels: I 1, II 2, III 3, IV 4, V 5, EX 5+-->
<div id="fortitude" style="height: 44px">
<span style="float: left; margin-left: 10px; color: #cb2742"><i class="fa-fw fa-solid fa-heart"></i></span>
<!--Agent's health, strength, daringness, stamina, bravery, and physical defense--> III
</div>
<div id="prudence" style="height: 44px">
<span style="float: left; margin-left: 10px; color: #efecc0"><i class="fa-fw fa-solid fa-book-open"></i></span>
<!--Agent's intellect, willpower, numbness to stress, and psychological defense--> V
</div>
<div id="temperance" style="height: 44px">
<span style="float: left; margin-left: 10px; color: #814a84"><i class="fa-fw fa-solid fa-lock"></i></span>
<!--Agent's work speed/success rates, dilligence, task handling, and judgement--> EX
</div>
<div id="justice" style="height: 45px">
<span style="float: left; margin-left: 10px; color: #3fccbd"><i class="fa-fw fa-solid fa-scale-balanced"></i></span>
<!--Agent's attack speed, movement speed, hesitation, objectivity, rationality, and diligence--> IV
</div>
</div>
</div>
</div>
<!--About-->
<div class="tab-content">
<div id="about" class="tab-pane active show" style="height: 428px;border-right: 4px solid #80ccff;border-bottom: 4px solid #80ccff;margin-top: 8px;padding: 8px;border-left: 4px solid #80ccff;">
<div style="position: absolute;float: right;width: 66%;text-align: right;padding-right: 18px;font-size: 18px;margin-top: -2px;color: black;font-weight: bold;transform: scale(2, 1) skew(-15deg);"> About </div>
<div style="width: 15%; border-top: 25px solid #80ccff; border-right: 25px solid transparent; display: inline-block;"></div>
<div style="width: 83%;border-bottom: 25px solid #80ccff;border-left: 25px solid transparent;display: inline-block;"></div>
<div style="height: 380px; padding-top: 8px; overflow-x: hidden">
<blockquote style="border-left: 4px solid #80ccff"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta erat ac arcu molestie euismod a sit amet lorem. Nullam eu purus at nisl lobortis." </blockquote>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Overview </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<hr style="border: 4px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Personality </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<hr style="border: 4px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Appearance </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<hr style="border: 4px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Design Notes </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<ul style="list-style-type: square">
<li>Point</li>
<li>Point</li>
<li>Point</li>
<li>Point</li>
<li>Point</li>
</ul>
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Trivia </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<ul style="list-style-type: square">
<li>Point</li>
<li>Point</li>
<li>Point</li>
<li>Point</li>
<li>Point</li>
</ul>
</div>
</div>
<!--About-->
<!--Biography-->
<div id="biography" class="tab-pane" style="height: 428px;border-right: 4px solid #80ccff;border-bottom: 4px solid #80ccff;margin-top: 8px;padding: 8px;border-left: 4px solid #80ccff;">
<div style="position: absolute;float: right;width: 66%;text-align: right;padding-right: 18px;font-size: 18px;margin-top: -2px;color: black;font-weight: bold;transform: scale(2, 1) skew(-15deg);"> Biography </div>
<div style="width: 15%;border-top: 25px solid #80ccff;border-right: 25px solid transparent;display: inline-block;"></div>
<div style="width: 83%;border-bottom: 25px solid #80ccff;border-left: 25px solid transparent;display: inline-block;"></div>
<div style="height: 380px; padding-top: 8px; overflow-x: hidden">
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Career </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<hr style="border: 4px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Background </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
</div>
</div>
<!--Biography end-->
<!--Relationships-->
<div id="relationships" class="tab-pane" style="height: 428px;border-right: 4px solid #80ccff;border-bottom: 4px solid #80ccff;margin-top: 8px;padding: 8px;border-left: 4px solid #80ccff;">
<div style=" position: absolute;float: right;width: 66%;text-align: right;padding-right: 18px;font-size: 18px;margin-top: -2px;color: black;font-weight: bold;transform: scale(2, 1) skew(-15deg);"> Relationships </div>
<div style="width: 15%;border-top: 25px solid #80ccff;border-right: 25px solid transparent;display: inline-block;"></div>
<div style=" width: 83%;border-bottom: 25px solid #80ccff;border-left: 25px solid transparent;display: inline-block;"></div>
<div style="height: 380px; padding-top: 8px; overflow-x: hidden">
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f">
<!--Replace #link with character's page-->
<a href="#link" style="color: #ff6463">Some Name Here</a><span style="float: right; padding-right: 8px">Relationship Status</span>
</h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<div style="width: 200px;margin: 16px;margin-top: 0px;float: left;border: 5px outset #80ccff;">
<!--Replace the url with the character's image url -->
<div class="col w-100" style="padding: 0">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74011332_hQHYq6hYvDPH9Ud.png" class="w-100 h-100" alt="Alt text here.">
</div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<hr style="border: 4px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f">
<!--Replace #link with character's page-->
<a href="#link" style="color: #ff6463">Some Name Here</a><span style="float: right; padding-right: 8px">Relationship Status</span>
</h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<div style=" width: 200px;margin: 16px;margin-top: 0px;float: left;border: 5px outset #80ccff;">
<!--Replace the url with the character's image url -->
<div class="col w-100" style="padding: 0">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74011332_hQHYq6hYvDPH9Ud.png" class="w-100 h-100" alt="Alt text here.">
</div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
</div>
</div>
<!--Relationship end-->
<!--Gear-->
<div id="gear" class="tab-pane" style="height: 428px;border-right: 4px solid #80ccff;border-bottom: 4px solid #80ccff;margin-top: 8px;padding: 8px;border-left: 4px solid #80ccff;
">
<div style="position: absolute;float: right;width: 66%;text-align: right;padding-right: 18px;font-size: 18px;margin-top: -2px;color: black;font-weight: bold;transform: scale(2, 1) skew(-15deg);"> Gear </div>
<div style="width: 15%;border-top: 25px solid #80ccff;border-right: 25px solid transparent;display: inline-block;"></div>
<div style="width: 83%;border-bottom: 25px solid #80ccff;border-left: 25px solid transparent;display: inline-block;"></div>
<div style="height: 380px; padding-top: 8px; overflow-x: hidden">
<!--WEAPON(S) SECTION-->
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Weapon </h1>
<!--Copy from here if multiple & add an s to above. also add the <hr> between each entry just a recommendation-->
<h2 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f">
<!--Name of weapon--> Weapon Name <!--RED damage-->
<!--<i class="fa-fw fa-solid fa-burst" style="color: #cb2742; text-shadow: 2px 2px 2px #7d071a"></i> <span style="color: #cb2742; text-shadow: 2px 2px 2px #7d071a">RED</span>-->
<!--WHITE damage-->
<!--<i class="fa-fw fa-solid fa-cloud" style="color: #efecc0; text-shadow: 2px 2px 2px #6f6912"></i> <span style="color: #efecc0; text-shadow: 2px 2px 2px #6f6912">WHITE</span>-->
<!--BLACK damage-->
<i class="fa-fw fa-solid fa-road-spikes" style="color: #814a84; text-shadow: 2px 2px 2px #520c55"></i>
<span style="color: #814a84; text-shadow: 2px 2px 2px #520c55">BLACK</span>
<!--PALE damage-->
<!--<i class="fa-fw fa-solid fa-wave-square" style="color: #3fccbd; text-shadow: 2px 2px 2px #0b7f73"></i> <span style="color: #3fccbd; text-shadow: 2px 2px 2px #0b7f73">PALE</span>-->
<!--ZAYIN-->
<!--<span style="float:right; padding-right: 8px; color: #60a546; text-shadow: 2px 2px 2px #3e6f1e">ZAYIN</span>-->
<!--TETH-->
<!--<span style="float:right; padding-right: 8px; color: #3e87a3; text-shadow: 2px 2px 2px #1d4e64">TETH</span>-->
<!--HE-->
<!--<span style="float:right; padding-right: 8px; color: #c0aa3d; text-shadow: 2px 2px 2px #796315 ">HE</span>-->
<!--WAW-->
<span style="float: right;padding-right: 8px;color: #594f80;text-shadow: 2px 2px 2px #271e41;">WAW</span>
<!--ALEPH-->
<!--<span style="float:right; padding-right: 8px; color: #d3332f; text-shadow: 2px 2px 2px #6a1111">ALEPH</span>-->
</h2>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<!--Weapons end-->
<!--End copy selection here-->
<!--Suit-->
<hr style="border: 4px dashed #80ccff; transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Suit </h1>
<!--Copy from here if multiple(?)-->
<h2 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Suit Name <!--RED defense-->
<i class="fa-fw fa-solid fa-burst" style="color: #cb2742; text-shadow: 2px 2px 2px #7d071a"></i>
<!--Resistant-->
<!--<i class="fa-solid fa-angles-up"></i>-->
<!--Endured-->
<!--<i class="fa-solid fa-angle-up"></i>-->
<!--Normal-->
<i class="fa-fw fa-solid fa-minus"></i>
<!--Weak-->
<!--<i class="fa-solid fa-angle-down"></i>-->
<!--Vulnerable-->
<!--<i class="fa-solid fa-angles-down"></i>-->
<!--WHITE defense-->
<i class="fa-fw fa-solid fa-cloud" style="color: #efecc0; text-shadow: 2px 2px 2px #6f6912"></i>
<!--Resistant-->
<!--<i class="fa-solid fa-angles-up"></i>-->
<!--Endured-->
<!--<i class="fa-solid fa-angle-up"></i>-->
<!--Normal-->
<i class="fa-fw fa-solid fa-minus"></i>
<!--Weak-->
<!--<i class="fa-solid fa-angle-down"></i>-->
<!--Vulnerable-->
<!--<i class="fa-solid fa-angles-down"></i>-->
<!--BLACK defense-->
<i class="fa-fw fa-solid fa-road-spikes" style="color: #814a84; text-shadow: 2px 2px 2px #520c55"></i>
<!--Resistant-->
<!--<i class="fa-solid fa-angles-up"></i>-->
<!--Endured-->
<!--<i class="fa-solid fa-angle-up"></i>-->
<!--Normal-->
<i class="fa-fw fa-solid fa-minus"></i>
<!--Weak-->
<!--<i class="fa-solid fa-angle-down"></i>-->
<!--Vulnerable-->
<!--<i class="fa-solid fa-angles-down"></i>-->
<!--PALE defense-->
<i class="fa-fw fa-solid fa-wave-square" style="color: #3fccbd; text-shadow: 2px 2px 2px #0b7f73"></i>
<!--Resistant-->
<!--<i class="fa-solid fa-angles-up"></i>-->
<!--Endured-->
<!--<i class="fa-solid fa-angle-up"></i>-->
<!--Normal-->
<i class="fa-fw fa-solid fa-minus"></i>
<!--Weak-->
<!--<i class="fa-solid fa-angle-down"></i>-->
<!--Vulnerable-->
<!--<i class="fa-solid fa-angles-down"></i>-->
<!--ZAYIN-->
<!--<span style="float:right; padding-right: 8px; color: #60a546; text-shadow: 2px 2px 2px #3e6f1e">ZAYIN</span>-->
<!--TETH-->
<!--<span style="float:right; padding-right: 8px; color: #3e87a3; text-shadow: 2px 2px 2px #1d4e64">TETH</span>-->
<!--HE-->
<!--<span style="float:right; padding-right: 8px; color: #c0aa3d; text-shadow: 2px 2px 2px #796315 ">HE</span>-->
<!--WAW-->
<span style="float: right;padding-right: 8px;color: #594f80;text-shadow: 2px 2px 2px #271e41;">WAW</span>
<!--ALEPH-->
<!--<span style="float:right; padding-right: 8px; color: #d3332f; text-shadow: 2px 2px 2px #6a1111">ALEPH</span>-->
</h2>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim sed lorem ac aliquet. Morbi mattis volutpat vehicula. Donec sit amet arcu vulputate, euismod ante sed, convallis eros. Nullam sed ligula vel eros convallis placerat sed blandit metus. Ut in scelerisque risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis lorem ante, sit amet tincidunt ex malesuada in. Pellentesque vel mi porttitor risus mattis luctus. Sed vehicula tellus id eros posuere aliquam. Cras sit amet quam turpis. Nulla nunc libero, feugiat vel eleifend ut, accumsan a sapien. Sed faucibus mi eros, ac viverra sapien semper nec. Fusce scelerisque nisi et magna consequat, a luctus ante vulputate. Donec sagittis massa ac leo gravida vehicula. Etiam varius sem id orci vestibulum, id hendrerit orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae pretium libero. Suspendisse porta nisl nunc, nec elementum elit blandit congue. Vestibulum sapien orci, luctus ac dictum sit amet, tempor vitae tortor. </p>
<hr style="border: 4px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<h1 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Gifts </h1>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(2, 1);" />
<!--Single gift-->
<h2 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Name <span style="float: right; padding-right: 8px">Slot</span>
</h2>
<hr style="border: 1px dashed #80ccff;transform: skew(-45deg) scale(1.5, 0.5);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac sapien sapien. Suspendisse eget accumsan odio. Ut varius est sed mauris euismod, sit amet condimentum. </p>
<hr style="border: 2px dashed #80ccff;transform: skew(-45deg) scale(1.25, 0.75);" />
<!--Single gift end. Remove hr if last.-->
<!--Single gift-->
<h2 style="font-weight: bold; text-shadow: 2px 2px 2px #81190f"> Name <span style="float: right; padding-right: 8px">Slot</span>
</h2>
<hr style="border: 1px dashed #80ccff;transform: skew(-45deg) scale(1.5, 0.5);" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac sapien sapien. Suspendisse eget accumsan odio. Ut varius est sed mauris euismod, sit amet condimentum. </p>
<!--Single gift end. hr gone as last entry-->
</div>
</div>
</div>
</div>
</div>
</div>
<div style="border: 4px solid #80ccff;margin: -4px;margin-top: 1px;height: 64px;
">
<div class="row n" style="margin: 0px; color: #ff6463; text-shadow: 2px 2px 2px #81190f">
<div class="col-2" style="height: 57px;margin-right: -4px;border-right: 4px solid #80ccff;">
<i class="fa-fw fa-solid fa-play w-100" style="opacity: 0.99;position: absolute;margin-left: -13px;margin-top: 12px;font-size: 2.5em;"></i>
<!--Replace #video with video or playlist link-->
<iframe src="#video" style="margin-left: -16px; opacity: 0.001; position: absolute" class="h-100 w-100"></iframe>
</div>
<div class="col" style="margin-left: 4px;overflow-y: auto;overflow-x: hidden;height: 57px;padding-top: 4px;width: 93.5%;padding-right: 48px;text-align: center;">
<span style="font-size: 2em;transform: skew(-15deg);font-weight: bold;display: block;overflow-wrap: anywhere;">Playlist/Video Title</span>
</div>
</div>
</div>
</div>
<div class="m-auto" style="max-width: 1140px;">
<a href="https://toyhou.se/Syensy" title="Code by Syensy"><i class="fa-solid fa-code" style="background: #000000; color: #ff6463; opacity: 0.2"></i></a><div>
