<!---make sure you read the rules before using-->
<!--- https://toyhou.se/~forums/16.htmlcss-graphics/213264.-bat-s-code-stuff -->
<!--- i suggest referencing the actual SU wiki to know what to put where-->
<!---
accent color: #ff6b8b
link color: #00b2ee
-->
<!---background image-->
<div class="card rounded-0" style="background:url(https://i.imgur.com/4sliQrd.jpg) fixed;background-size:cover;width:100% z-index:-10; top:0; bottom:0; left:0; right:0;background-position:center;color:#eef4ed;border-width:0px;padding-bottom:40px;">
<!---main box-->
<div class="card container-fluid" style="width:880px;margin-top:30px;background-color:rgba(0,40,78,.82);border-color:#00b2ee;border-width:1px;padding-right:20px;padding-bottom:0px">
<!---header-->
<p style="font-family:trebuchet ms;font-size:45px;margin-top:5px">Name here</p>
<hr style="border-width:1.5px;width:100%;margin-top:-2px;border-color:#405e7a">
<!---quote box-->
<div class="card container-fluid" style="background-color:rgba(50,68,137,.5);width:580px;height:140px;border-width:1px;border-color:#00b2ee;margin-top:10px">
<p style="margin-top:15px;font-size:55px"><span style=";font-weight:bold;color:#5fc8dd;float:left;margin-top:-5px;font-family:">“</span>
<span style="float:right;font-weight:bold;color:#5fc8dd;margin-top:-5px">”</span></p>
<div class="container-fluid" style="font-famil:'nunito',serif;font-size:15px;width:460px;height:160px;font-weight:bold;padding-top:10px;font-family:trebuchet ms;margin-top:-105px">
Quote here. Blah blah blah blah
</div>
<p style="text-align:right;margin-top:8px;font-size:18px;font-weight:bold;font-family:trebuchet ms">—<em>"From show"</em></p>
</div>
<!---quote box end-->
<div>
<!---info box start-->
<div class="col-5 p-1" style="float:right;margin-top:25px;margin-right:-10px;font-family:trebuchet ms">
<div class="card rounded-0" style="width:300px;margin:auto;border-top-right-radius:15px;border-top-left-radius:15px;border-color:#ff6b8b;border-width:2px;background:none;">
<div class="card rounded-0" style="height:45px;border-top-right-radius:15px;border-top-left-radius:15px;text-align:center;font-size:23px;border-width:0px;background:#ff6b8b;font-family:trebuchet ms;line-height:45px;margin-top:-1px;margin-left:-1px">Gem Name
</div>
<!---full body image (transparent works best)-->
<img src="https://i.imgur.com/Nma06OE.jpg">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Nickname(s)</div>
<div class="col-7" style="padding-left:0px"><ul type="square" style="margin-left:-10px">
<li>info 1</li>
<li>info 2</li>
</ul></div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:-9px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Alias</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<!---characteristics tab-->
<a href="#characteristics" data-toggle="collapse" style="text-decoration:none;color:#eef4ed"><div class="card rounded-0" style="background:#ff6b8b;border-width:0px;height:30px;margin-top:5px;text-align:center;line-height:32px"><p>Characteristics<span style="float:right;margin-left:-30px;margin-right:10px"><i class="far fa-chevron-down"></i></span></p></div>
</a>
<div id="characteristics" class="collapse show" style="padding-bottom:5px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Species</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Weapons(s)</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Sex</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Gender Pronouns</div>
<div class="col-7" style="padding-left:15px">info/info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Age</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
</div>
<!---traits tab-->
<a href="#traits" data-toggle="collapse" style="text-decoration:none;color:#eef4ed"><div class="card rounded-0" style="background:#ff6b8b;border-width:0px;height:30px;text-align:center;line-height:32px"><p>Traits<span style="float:right;margin-left:-30px;margin-right:10px"><i class="far fa-chevron-down"></i></span></p></div>
</a>
<div id="traits" class="collapse show" style="padding-bottom:5px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Complextion</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Hair</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Eyes</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Gemstone</div>
<div class="col-7" style="padding-left:15px">remove if a fusion</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Gem type</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Components</div>
<div class="col-7" style="padding-left:0px"><ul type="square" style="margin-left:-10px;margin-bottom:0px">
<li>Remove if not a fusion</li>
<li>info</li>
</ul></div>
</div>
</div>
<!---professional status tab-->
<a href="#prof_status" data-toggle="collapse" style="text-decoration:none;color:#eef4ed"><div class="card rounded-0" style="background:#ff6b8b;border-width:0px;height:30px;text-align:center;line-height:32px"><p>Professional Status<span style="float:right;margin-left:-30px;margin-right:10px"><i class="far fa-chevron-down"></i></span></p></div>
</a>
<div id="prof_status" class="collapse show" style="padding-bottom:5px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Affiliation(s)</div>
<div class="col-7" style="padding-left:0px"><ul type="square" style="margin-left:-10px;margin-bottom:0px">
<li>Group name (status)</li>
<ul type="square" style="margin-left:-20px">
<li>Sub bullet</li>
</ul>
</ul></div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Occupation(s)</div>
<div class="col-7" style="padding-left:0px"><ul type="square" style="margin-left:-10px;margin-bottom:0px">
<li>info</li>
<li>info</li>
</ul></div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Alignment</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
</div>
<!---personal status tab-->
<a href="#personal_status" data-toggle="collapse" style="text-decoration:none;color:#eef4ed"><div class="card rounded-0" style="background:#ff6b8b;border-width:0px;height:30px;text-align:center;line-height:32px"><p>Personal Status<span style="float:right;margin-left:-30px;margin-right:10px"><i class="far fa-chevron-down"></i></span></p></div>
</a>
<div id="personal_status" class="collapse show" style="padding-bottom:5px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Status</div>
<div class="col-7" style="padding-left:15px">info</div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Friends(s)</div>
<div class="col-7" style="padding-left:0px"><ul type="square" style="margin-left:-10px;margin-bottom:0px">
<li>name</li>
<li><a href="LINK_HERE" style="color:#00b2ee">this one's a link</a></li>
<li>another name
<ul type="square" style="margin-left:-20px">
<li>Sub bullet if needed</li>
</ul>
</li>
</ul></div>
</div></div>
<!---media tab-->
<a href="#media" data-toggle="collapse" style="text-decoration:none;color:#eef4ed"><div class="card rounded-0" style="background:#ff6b8b;border-width:0px;height:30px;text-align:center;line-height:32px"><p>Media<span style="float:right;margin-left:-30px;margin-right:10px"><i class="far fa-chevron-down"></i></span></p></div>
</a>
<div id="media" class="collapse show" style="padding-bottom:5px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Music Theme</div>
<div class="col-7" style="padding-left:15px"><a href="LINK_HERE" style="color:#00b2ee">info</a></div>
</div>
<hr style="width:100%;border-width:0px;height:1px;background:#004b76;margin-top:6px;margin-bottom:2px">
<div class="row" style="margin-left:0px;font-family:trebuchet ms;margin-top:5px">
<div class="col-5" style="padding-left:10px;margin-right:-10px">Voice Actor</div>
<div class="col-7" style="padding-left:15px"><a href="LINK_HERE" style="color:#00b2ee">info</a></div>
</div></div>
</div></div>
<!---info box end-->
<div style="padding-left:25px;margin-top:25px;font-family:trebuchet ms;font-size:15px">
<!---bio here-->
<div style="font-family:trebuchet ms;font-size:15px">
<p>About the gem here. Can be as long as you want.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id pharetra velit. Praesent porttitor ligula et risus consectetur vestibulum. Nulla facilisi. Phasellus ut odio eget est euismod dignissim eu sed sem. Duis malesuada mi vitae eros viverra tempor. Aenean in suscipit risus. Ut pellentesque lobortis dictum. Praesent gravida dui nec leo maximus blandit. Donec sit amet mattis elit. Nulla erat diam, facilisis sit amet aliquet non, molestie sed nisi. Cras id metus dignissim, vehicula ante euismod, ullamcorper ipsum.</p>
<p>Fusce pellentesque quam risus, non lobortis arcu egestas eget. Nunc posuere maximus sagittis. Suspendisse in bibendum libero, id condimentum nisi. Nullam non sagittis libero, eu sodales nulla. Ut at metus tempus, porttitor leo nec, finibus mauris.</p>
</div>
<!---end bio-->
<!---contents start-->
<!---check out the tutorial for how to add more sections-->
<div class="card" style="border-color:#00a1ff;background:none;width:250px;margin-top:20px;padding:5px;padding-top:15px;padding-bottom:12px">
<p><a id="contents">Contents</a><span style="margin-left:12px;font-size:12px;">[<a href="#topcollapse" data-toggle="collapse" style="color:#00b2ee">hide</a>]</span></p>
<div id="topcollapse" class="collapse show" style="line-height:10px;margin-top:15px">
<p>1 <a href="#appearance" style="color:#00b2ee">Appearance</a></p>
<p style="margin-left:25px">1.1 <a href="#first_form" style="color:#00b2ee">
First Form</a></p>
<p style="margin-left:25px">1.2 <a href="#first_regeneration" style="color:#00b2ee">
First Regeneration</a></p>
<p style="margin-left:25px">1.3 <a href="#current_regeneration" style="color:#00b2ee">
Current Regeneration</a></p>
<p>2 <a href="#personality" style="color:#00b2ee">Personality</a></p>
<p>3 <a href="#history" style="color:#00b2ee">History</a></p>
<p>4 <a href="#abilities" style="color:#00b2ee">Abilities</a></p>
<p style="margin-left:25px">4.1 <a href="#fusions" style="color:#00b2ee">
Fusions</a></p>
<p style="margin-left:25px">4.2 <a href="#skillset" style="color:#00b2ee">
Skillset</a></p>
<p style="margin-left:25px">4.3 <a href="#unique_abilities" style="color:#00b2ee">
Unique Abilities</a></p>
<p>5 <a href="#relationships" style="color:#00b2ee">Relationships</a></p>
<p style="margin-left:25px">5.1 <a href="#character_1" style="color:#00b2ee">
Character 1</a></p>
<p style="margin-left:25px">5.2 <a href="#character_2" style="color:#00b2ee">
Character 2</a></p>
<p style="margin-left:25px">5.3 <a href="#character_3" style="color:#00b2ee">
Character 3</a></p>
<p style="margin-left:25px">5.4 <a href="#character_4" style="color:#00b2ee">
Character 4</a></p>
<p>6 <a href="#trivia" style="color:#00b2ee">Trivia</a></p>
<p>7 <a href="#gemstone" style="color:#00b2ee">Gemstone</a></p>
<!---link to your character's gallery here-->
<p>8 <a href="LINK" style="color:#00b2ee">Galleries</a></p>
</div>
</div>
<!---contents end-->
<!---appearance start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="appearance">Appearance</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-16px;margin-right:20px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---first form-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="first_form">First Form</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---first regeneration-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="first_regeneration">First Regeneration</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---current regeneration-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="current_regeneration">Current Regeneration</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
</div>
<!---appearance end-->
<!---personality start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="personality">Personality</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-16px;margin-right:20px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
</div>
<!---personality end-->
<!---hisotry start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="history">History</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-16px;margin-right:20px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
</div>
<!---history end-->
<!---abilities start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="abilities">Abilities</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-16px;margin-right:20px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---fusions-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="fusions">Fusions</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<ul type="square">
<li>When fused with (character name), they form <a href="FUSION_LINK" style="color:#00b2ee">(fusion name)</a></li>
<li>When fused with (character name), they form <a href="FUSION_LINK" style="color:#00b2ee">(fusion name)</a></li>
<li>When fused with (character name), they form <a href="FUSION_LINK" style="color:#00b2ee">(fusion name)</a></li>
</ul>
<!---skillset-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="skillset">Skillset</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<ul type="square">
<li><span style="font-weight:bold">Ability: </span>explanation</li>
<li><span style="font-weight:bold">Ability: </span>explanation</li>
<li><span style="font-weight:bold">Ability: </span>explanation</li>
</ul>
<!---unique abilities-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="unique_abilities">Unique Abilities</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<ul type="square">
<li><span style="font-weight:bold">Ability: </span>explanation</li>
<li><span style="font-weight:bold">Ability: </span>explanation</li>
<li><span style="font-weight:bold">Ability: </span>explanation</li>
</ul>
</div>
<!---abilities end-->
<!---relationships start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="relationships">Relationships</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-16px;margin-right:20px;margin-bottom:-10px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px;margin-bottom:0px"></div>
<!---character 1-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="character_1" href="CHARACTER_LINK" style="color:#00b2ee">Character 1</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---character 2-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="character_2" href="CHARACTER_LINK" style="color:#00b2ee">Character 2</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---character 3-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="character_3" href="CHARACTER_LINK" style="color:#00b2ee">Character 3</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
<!---character 4-->
<p style="font-size:22px;margin-top:15px;margin-bottom:5px;margin-top:20px"><a id="character_4" href="CHARACTER_LINK" style="color:#00b2ee">Character 4</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nisl, dignissim scelerisque nibh nec, condimentum consequat lectus. Integer ac egestas nisl, at volutpat ante. Duis enim ante, tincidunt at dolor id, interdum iaculis augue. Nunc hendrerit nibh sit amet augue elementum aliquet. Pellentesque aliquam mattis volutpat. Aliquam iaculis magna at tempus facilisis.</p>
</div>
<!---relationships end-->
<!---trivia start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="trivia">Trivia</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-3px;margin-right:20px;margin-bottom:-5px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px"></div>
<ul type="square">
<li>fact</li>
<li>fact</li>
<ul type="square" style="margin-left:-20px">
<li>sub bullet</li>
<li>second sub bullet</li>
</ul>
<li>fact</li>
</ul>
</div>
<!---trivia end-->
<!---gemstone start-->
<div style="font-size:15px"><p style="font-size:22px;margin-top:15px"><a id="gemstone">Gemstone</a>
<a href="#contents" style="color:#eef4ed;font-size:18px"><i class="fas fa-list"></i></a>
</p>
<div class="card bg-faded" style="background:none;border-width:0px;margin-top:-3px;margin-right:20px;margin-bottom:-5px"><hr style="border-width:0px;background:#5fc8dd;height:1px;margin-top:0px;width:100%;margin-left:0px"></div>
<!---gemstone table-->
<table class="border-0">
<tr>
<td style="width:320px;height:35px;border-width:0px;background:#ff6b8b;text-align:center;padding:0px;">Image</td>
<td style="width:480px;border-width:0px;background:#ff6b8b;text-align:center;padding:0px">Description</td>
</tr>
<!---if your gem is a fusion copy from <tr> to </tr> and paste it underneath-->
<tr>
<td style="width:320px;height:160px;border-width:0px;background:#264869">
<center><img src="https://i.imgur.com/UkTnj0t.png" style="width:140px"></center>
</td>
<td style="width:480px;border-width:0px;background:url(https://i.imgur.com/nrZUgum.jpg);background-position:center;background-size:contain;padding:10px;text-align:center;border:0px">
Description of gemstone here.</td>
</tr>
</table>
</div>
<!---gemstone end-->
<a href="https://toyhou.se/ThatBat" style="color:#00b2ee;float:right;margin-top:20px;margin-right:-14px"><i class="far fa-code" style="margin-right:5px"></i>Code by ThatBat</a>
</div>
</div>
</div>
</div>
