Profile
<!--
blue: #08b5ff
icon: bone
purple: #ff0000
icon: skull
-->
<p align="center">
<i class="fa-solid fa-bone" style="font-size: 30px"></i>
<a style="font-family: arial black,avant garde; font-size: 40px; color: #08b5ff;" href="LINK">
Sans</a> <span style="font-family: courier; font-size: 30px"> & </span>
<a style="font-family: arial black,avant garde; font-size: 40px; color: #ff0000;" href="LINK">
Papyrus</a> <i class="fa-solid fa-skull" style="font-size: 30px"></i>
</p>
<div class="container-fluid" style="padding: 10px">
<div class="row">
<div class="col-5">
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier">
<p>Gets into trouble</p>
<p>Gets out of trouble</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Affectionate</p>
<p>Aloof</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Lawful</p>
<p>Chaotic</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Cries a lot</p>
<p>Comforting</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Paragraph texts</p>
<p>"K"</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p> Lots of Friends </p>
<p>Monogomous Friendship</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Physical ♥</p>
<p>Verbal ♥</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Starts fights</p>
<p>Laidback</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Optimist</p>
<p>Pessimist</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>Humble</p>
<p>Pretentious</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-family: courier; margin-top: 15px;">
<p>"Borrows" things</p>
<p>Lender</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-bone fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #08b5ff;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-skull fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #ff0000;"></i>
</div>
</div>
</div>
<div class="col-7">
<div class="card card-block bg-faded" style="padding: 10px; height: 500px; border-radius: 3em 3em 0em 0em; overflow: auto">
<div class="table-responsive tab-content">
<!--- tab one - basic info -->
<div class="tab-pane fade active show" id="info">
<div style="
background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/db4e5080-7bb6-46d1-860a-3ea401c258aa/d9o7ccs-dff2bc50-cd4d-4851-878d-59bba5c03829.png/v1/fill/w_1024,h_647,q_80,strp/growing_bones_by_zaralt_d9o7ccs-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjQ3IiwicGF0aCI6IlwvZlwvZGI0ZTUwODAtN2JiNi00NmQxLTg2MGEtM2VhNDAxYzI1OGFhXC9kOW83Y2NzLWRmZjJiYzUwLWNkNGQtNDg1MS04NzhkLTU5YmJhNWMwMzgyOS5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.ADMcOupznnQ5rGnR25yYJuZxvc-FxAO8tw8V5CuYQfQ);
background-size: cover;
background-position: center;
height: 250px;
border: 3px solid;
border-radius: 2em 2em 0em 0em;
" align="right">
<a class="text-uppercase font-italic" style="bottom: -220px; position: relative; color: #fff; font-family: courier"
href ="https://www.deviantart.com/zaralt/art/Growing-Bones-584848972"
> Credit </a>
</div>
<!-- timeline -->
<div class="container p-2 overflow-auto" style="height:228px;">
<table class="m-1" style="border:none;">
<!-- event 1 -->
<tr>
<td class="pt-3 pr-2 text-right" style="border-right:2px solid; vertical-align:top;;">
<h4 style="font-family: courier">JAN 01, XXXX</h4>
</td>
<td> <ul class="fa-ul ml-2">
<li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;"></i>
<h4 style="font-family: courier"><strong>Event</strong></h4>
<p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
</li>
</ul>
</td>
</tr>
<!-- event 2 -->
<tr>
<td class="pt-3 pr-2 text-right" style="border-right:2px solid; vertical-align:top;;">
<h4 style="font-family: courier">JAN 01, XXXX</h4>
</td>
<td> <ul class="fa-ul ml-2">
<li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;"></i>
<h4 style="font-family: courier"><strong>Event</strong></h4>
<p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
</li>
</ul>
</td>
</tr>
<!-- event 2 -->
<tr>
<td class="pt-3 pr-2 text-right" style="border-right:2px solid; vertical-align:top;;">
<h4 style="font-family: courier">JAN 01, XXXX</h4>
</td>
<td> <ul class="fa-ul ml-2">
<li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;"></i>
<h4 style="font-family: courier"><strong>Event</strong></h4>
<p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
</li>
</ul>
</td>
</tr>
<!-- event 3 -->
<tr>
<td class="pt-3 pr-2 text-right" style="border-right:2px solid; vertical-align:top;;">
<h4 style="font-family: courier">JAN 01, XXXX</h4>
</td>
<td> <ul class="fa-ul ml-2">
<li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;"></i>
<h4 style="font-family: courier"><strong>Event</strong></h4>
<p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<!--- tab two - bio -->
<div class="tab-pane fade" id="bio">
<div class="card" style="border-radius: 30px 30px 0px 0px; padding: 10px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> TRUST </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
</div>
</div>
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> RESPECT </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
</div>
</div>
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> AFFECTION </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
</div>
</div>
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> COMMUNICATION </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="fa fa-heart" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
<i class="far fa-heart faded" style="color: #08b5ff;"></i>
</div>
</div>
</div>
<div class="col-6">
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> TRUST </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
</div>
</div>
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> RESPECT </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
</div>
</div>
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> AFFECTION </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
</div>
</div>
<div class="row no-gutters" style="font-family: courier">
<div class="col-6 p-1 text-left"><strong> COMMUNICATION </strong></div>
<div class="col-6 p-1 text-right">
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="fa fa-heart" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
<i class="far fa-heart faded" style="color: #ff0000;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CHARACTER1 COMMENTARY -->
<div class="mb-3 ml-4 p-3 mt-3" style="border-radius: 2em; position: relative; background: #08b5ff;">
<i class="fas fa-triangle fa-rotate-270 fa-2x" style="position: absolute; left: -20px; top: 30%; color: #08b5ff;"></i>
<p class="text-white" style="font-size: 18px; margin-bottom: 0px; font-family: courier; margin-top: -5px;">
<strong>Character 1.</strong>
</p>
<p class="text-justify text-white" style="font-size: 14px; font-family: courier">
funny text
</p>
</div>
<!-- CHARACTER2 COMMENTARY -->
<div class="mb-2 mr-4 p-3" style="border-radius: 2em; position: relative; background: #ff0000;">
<i class="fas fa-triangle fa-rotate-90 fa-2x" style="position: absolute; right: -20px; bottom: 30%; color: #ff0000;"></i>
<p class="text-white text-right" style="font-size: 18px; font-family: courier; margin-bottom: 0px; margin-top: -5px;">
<strong>Character 2.</strong>
</p>
<p class="text-justify text-white" style="font-size: 14px; font-family: courier">
funny text
</p>
</div>
<!-- CHARACTER3 COMMENTARY -->
<div class="mb-3 ml-4 p-3 mt-3" style="border-radius: 2em; position: relative; background: #08b5ff;">
<i class="fas fa-triangle fa-rotate-270 fa-2x" style="position: absolute; left: -20px; top: 30%; color: #08b5ff;"></i>
<p class="text-white" style="font-size: 18px; margin-bottom: 0px; font-family: courier; margin-top: -5px;">
<strong>Character 1.</strong>
</p>
<p class="text-justify text-white" style="font-size: 14px; font-family: courier">
funny text
</p>
</div>
<!-- CHARACTER2 COMMENTARY -->
<div class="mb-2 mr-4 p-3" style="border-radius: 2em; position: relative; background: #ff0000;">
<i class="fas fa-triangle fa-rotate-90 fa-2x" style="position: absolute; right: -20px; bottom: 30%; color: #ff0000;"></i>
<p class="text-white text-right" style="font-size: 18px; font-family: courier; margin-bottom: 0px; margin-top: -5px;">
<strong>Character 2.</strong>
</p>
<p class="text-justify text-white" style="font-size: 14px; font-family: courier">
funny text
</p>
</div>
</div>
<!--- tab three - trivia -->
<div class="tab-pane fade" id="triv">
<br>
<p style="font-size: 30px; font-family: courier" align="center">
<strong> Interview! </strong>
</p>
<hr>
<p style="font-size: 20px; font-family: courier">
<i class="fa-regular fa-comment-question faded"></i> <strong> Question? </strong>
</p>
<div class="text-uppercase" style="color: #08b5ff;" align="left"> <strong> character name's answer: </strong> </div>
<div class="faded" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<div class="text-uppercase" style="color: #ff0000;" align="right"> <strong> character name's answer: </strong> </div>
<div class="faded" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<hr>
<p style="font-size: 20px; font-family: courier">
<i class="fa-regular fa-comment-question faded"></i> <strong> Question? </strong>
</p>
<div class="text-uppercase" style="color: #08b5ff;" align="left"> <strong> character name's answer: </strong> </div>
<div class="faded" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<div class="text-uppercase" style="color: #ff0000;" align="right"> <strong> character name's answer: </strong> </div>
<div class="faded" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<hr>
<p style="font-size: 20px; font-family: courier">
<i class="fa-regular fa-comment-question faded"></i> <strong> Question? </strong>
</p>
<div class="text-uppercase" style="color: #08b5ff;" align="left"> <strong> character name's answer: </strong> </div>
<div class="faded" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<div class="text-uppercase" style="color: #ff0000;" align="right"> <strong> character name's answer: </strong> </div>
<div class="faded" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<hr>
<p style="font-size: 20px; font-family: courier">
<i class="fa-regular fa-comment-question faded"></i> <strong> Question? </strong>
</p>
<div class="text-uppercase" style="color: #08b5ff;" align="left"> <strong> character name's answer: </strong> </div>
<div class="faded" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<div class="text-uppercase" style="color: #ff0000;" align="right"> <strong> character name's answer: </strong> </div>
<div class="faded" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<hr>
<p style="font-size: 20px; font-family: courier">
<i class="fa-regular fa-comment-question faded"></i> <strong> Question? </strong>
</p>
<div class="text-uppercase" style="color: #08b5ff;" align="left"> <strong> character name's answer: </strong> </div>
<div class="faded" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<div class="text-uppercase" style="color: #ff0000;" align="right"> <strong> character name's answer: </strong> </div>
<div class="faded" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</div>
<hr>
</div>
</div>
</div>
<div class="mb-1">
<ul class="nav flex-column flex-lg-row text-uppercase">
<li class="nav-item flex-fill m-1"><a class="nav-link btn btn-primary" data-toggle="tab" href="#info" style="border-radius: 0px; font-family: courier"><strong>
<i class="fa-solid fa-book"></i>
</strong></a></li>
<li class="nav-item flex-fill m-1"><a class="nav-link btn btn-primary" data-toggle="tab" href="#bio" style="border-radius: 0px; font-family: courier"><strong>
<i class="fa-solid fa-chart-bar"></i>
</strong></a></li>
<li class="nav-item flex-fill m-1"><a class="nav-link btn btn-primary" data-toggle="tab" href="#triv" style="border-radius: 0px; font-family: courier"><strong>
<i class="fa-solid fa-microphone-stand"></i>
</strong></a></li>
</ul>
</div> </div>
</div>
<div class="text-uppercase" align="right" style="font-family: courier"> code by rottencodes </div>
</div>