<div align="center">
<div style="max-width: 900px;">
<div class="row">
<div class="rightcolumn d-none d-sm-block col-sm-4" style="
padding: 10px; float: left;
padding-left: 40px;">

<div class="card bg-faded" style="
padding: 20px; border: 0px solid; border-color: #78E044;
margin-top: 0px; font-family: Arial;
padding: 20px; line-height: 43px;">
<!--------------------------- NAVIGATION BUTTONS -------------------------------------->
<ul class="mb-2 nav card-footer-tabs nav-justified text-uppercase text-muted" style="letter-spacing:1px; padding:5px;">
<li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#TWO"><span style='font-family: "zapf dingbats";'>as foretold,</span></a>
<a class="nav-link show" data-toggle="tab" href="#THREE"><span style=' font-family: "zapf dingbats";'>conquest</span></a>
<a class="nav-link show" data-toggle="tab" href="#FOUR"><span style=' font-family: "zapf dingbats";'>and entropy</span></a></li>
</ul>
<div><span style="letter-spacing: 1px; text-transform: uppercase;"><br></span></div>
</div>
</div>

<!-- ------------------------------

column 2

------------------------------- -->
<div class="leftcolumn col-sm-8" style="height:500px;
padding: 10px; float: left;
padding-left: -40px;">
<div align="center">
<div class="card bg-faded" media="" style="max-width:870px; padding:0px;">
<div class="tab-content bg-faded text-muted" style="max-width:670px;">
<!--------------------------- SECTION TWO -- DETAILS ------------------------------------>
<div class="tab-pane card-block pb-0 show active" id="TWO" style="height:400px; overflow:auto;">
<div class="display-4 text-uppercase d-flex justify-content-between" style="font-size:22px;letter-spacing:1px;">THE EVENING STAR</div>

<p style="text-align: left;"><sub><b>Noun</b><br>
ǣfensteorra : <br>
                   1. The evening star: Venus as seen in the early evening.</sub></p>

<hr>

<p style="text-align: left;">Gold-trimmed indigo flecked with stars that danced with as much life as the nightsky embodied the creature's frame. Described best as a dragon, she seemed too ethereal to be a living, breathing creature - although, few were blessed enough to encounter her close at hand. Often seen at a distance wheeling leisurely circles, it was small wonder many thought her presence a good omen. Worshiped and protected by the uneducated, the creature had been invited into this world and wasn't about to leave willingly.</p>
<hr>

<div class="d-flex">
<div class="card rounded-circle mx-auto" style="overflow:hidden;max-width:200px;height:200px;">
<div style="display:inline-block;position:relative;left:-185px;top:-52.5px;">

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/-xFTvudHR_8?controls=0&iv_load_policy=3&loop=1" frameborder="0" allowfullscreen=""></iframe>

</div>
</div>
</div>
<p style="text-align: right;"><sup><sup>layout by @robot</sup></sup></p>
</div>
<!--------------------------- SECTION THREE -- STORY ------------------------------------>
<div class="tab-pane card-block pb-1 show" id="THREE" style="height:400px; overflow:auto;">

<p style="text-align: center; font-size:22px;letter-spacing:1px;"><i>"Now, it begins."</i></p>

<table style="width: 100%; border:none;">
<tbody>
<tr>
<td style="text-align: right;">name</td>
<td>

<p style="text-align: left;">their true name is unclear, and they innumerable monikers; very commonly they are referred to as <i>venus</i>, <i>ǣfensteorra</i>, or simply <i>steorra</i>.</p>
</td>
</tr>
<tr>
<td style="width: 7.4206%; text-align: right;">species</td>
<td style="width: 92.4207%;">
<p style="text-align: left;"><i class="fas fa-dragon"></i></p>
</td>
</tr>
<tr>
<td style="width: 7.4206%; text-align: right;">breed</td>
<td style="width: 92.4207%;">

<p style="text-align: left;">???</p>
</td>
</tr>
<tr>
<td style="width: 7.4206%; text-align: right;">sex</td>
<td style="width: 92.4207%;">

<p style="text-align: left;"><i class="fas fa-venus"></i></p>
</td>
</tr>
<tr>
<td style="width: 7.4206%; text-align: right;">age</td>
<td style="width: 92.4207%;">

<p style="text-align: left;">irrelevant, fully mature</p>
</td>
</tr>
<tr>
<td style="width: 7.4206%; text-align: right;">personality</td>
<td style="width: 92.4207%;">

<p style="text-align: left;">snide with that haughty air of self-importance that drives away all but the most determined of companions.</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--------------------------- SECTION FOUR -- LINKS ------------------------------------>
<div class="tab-pane card-block pb-1 show" id="FOUR" style="height:400px; overflow:auto;">
<div class="row">
<!--------------------------- CHARACTER LINK -------------------------------------->
<div align="center">

<table style="width: 90%; border:0px;">
<tbody>
<tr>
<td style="width: 28.3333%;">NOME</td>
<td style="width: 71.5152%;">DESC</td>
</tr>
<tr>
<td style="width: 28.3333%;">NOME</td>
<td style="width: 71.5152%;">DESC</td>
</tr>
<tr>
<td style="width: 28.3333%;">NOME</td>
<td style="width: 71.5152%;">DESC</td>
</tr>
<tr>
<td style="width: 28.3333%;">NOME</td>
<td style="width: 71.5152%;">DESC</td>
</tr>
<tr>
<td style="width: 28.3333%;">NOME</td>
<td style="width: 71.5152%;">DESC</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

<div class="fixed-bottom p-2" style="right:0;left:inherit;">
  <a class="btn btn-default btn-sm rounded-0" style="font-size:12px;" href="https://toyhou.se/3614196.-f2u-html-tidbits/3614551.001-character-background">
    <i class="fal fa-code"></i>
  </a>
</div>

<div style="position:absolute;top:0;bottom:0;left:0;

  background:#e08d8d url(https://file.toyhou.se/images/12382028_P3tRSvemjUSMwD8.png) fixed center;

width:100%;z-index:-1;"></div>