spill | custom colours

<div class="container-flex">
  <div class="row no-gutters" style="max-width: 80em; margin: auto;">

    <!-- bookmark decorations, only visible on desktop -->
    <div class="col-md-1 d-none d-sm-block">
      <div style="height: 75px;"></div>
      <i class="fas fa-bookmark fa-rotate-90 fa-6x" style="float: right; color: #e8b8c4;"></i>
      <i class="fas fa-bookmark fa-rotate-90 fa-4x" style="float: right; color: #eccdde;"></i>
    </div>

    <!-- main content -->
    <div class="col-md-8 p-1">
      <div class="card bg-faded border-0">

        <!-- header w/ character name and some quick info -->
        <div class="card-header border-0" style="line-height: 0.2em;padding-bottom: 2em;">
          <h1 class="display-1" style="color: #ac8ecf; font-family: georgia; font-weight: bold;"><i class="fas fa-star"></i> Character Name</h1> <!-- character name -->
          <p class="text-secondary" style="font-style: italic; float: right; line-height: 0; overflow-wrap: break-word;">info | info | info</p> <!-- quick info, wld reccomend keeping fairly short -->
        </div>

        <!-- contents, bio, history, etc -->
        <div class="card-block">
          <!-- contents section -->
          <div>
            <h3 style="color: #ac8ecf; display: inline-block; font-family: georgia; font-weight: bold;">Contents</h3>
            <a class="text-secondary" style="display: inline-block;" data-toggle="collapse" href="#contents" role="button" aria-expanded="false" aria-controls="contents">[toggle]</a>
          </div>
          <ol class="collapse" id="contents">
            <li><a style="color: #ac8ecf;" href="#bio"><i>Biography</i></a></li> <!-- the href="" should reference the id of the section being linked -->
            <li><a style="color: #ac8ecf;" href="#history"><i>History</i></a></li>
            <li><a style="color: #ac8ecf;" href="#trivia"><i>Trivia</i></a></li>
            <li><a style="color: #ac8ecf;" href="#playlist"><i>Playlist</i></a></li>
            <li><a style="color: #ac8ecf;" href="#design-notes"><i>Design Notes</i></a></li>
          </ol>
          <hr class="border-0">

          <!-- bio -->
          <h3 style="color: #ac8ecf; font-family: georgia; font-weight: bold;" id="bio">Biography</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <hr class="border-0">

          <!-- quote - I'd reccomend keeping this short and sweet! -->
          <hr style="width: 50%; padding: 0.1em;">
          <h4 class="text-center" style="color: #ac8ecf; font-family: georgia; max-width: 70%; margin: auto;"><i>"A quote, or song lyrics!"</i></h4>
          <hr style="width: 50%; padding: 0.1em;">

          <!-- history -->
          <h3 style="color: #ac8ecf; font-family: georgia; font-weight: bold;" id="history">History</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>

              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <hr class="border-0">

          <!-- image, could be an aesthetic pic or a close-up of an illustration! -->
          <div class="card" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: top; height: 10em; width: auto; border: 0; border-radius: 0;">
              <a href="#"><i class="fas fa-image card-block text-secondary" style="float: right;"></i></a>
          </div>
          <hr class="border-0">

          <!-- trivia and playlist -->
          <div class="row">

            <!-- trivia -->
            <div class="col-md-6">
              <h3 style="color: #ac8ecf; font-family: georgia; font-weight: bold;" id="trivia">Trivia</h3>
              <ul class="fa-ul">
                <li><span style="color: #ac8ecf;" class="fa-li"><i class="fas fa-fish"></i></span>some trivia</li>
                <li><span style="color: #ac8ecf;" class="fa-li"><i class="fas fa-fish"></i></span>about your character!</li>
                <li><span style="color: #ac8ecf;" class="fa-li"><i class="fas fa-fish"></i></span>this can be anything</li>
                <li><span style="color: #ac8ecf;" class="fa-li"><i class="fas fa-fish"></i></span>you want it to be ^^</li>
              </ul>
            </div>

            <!-- playlist -->
            <div class="col-md-6">
              <h3 style="color: #ac8ecf; font-family: georgia; font-weight: bold;" id="playlist">Playlist</h3>
              <ul class="fa-ul">
                <li style="margin: 0.25em;"><span class="fa-li" style="color: #ac8ecf;"><i class="fas fa-play"></i></span><a href="#" style="color: #ac8ecf;">song name</a> | artist</li>
                <li style="margin: 0.25em;"><span class="fa-li" style="color: #ac8ecf;"><i class="fas fa-play"></i></span><a href="#" style="color: #ac8ecf;">song name</a> | artist</li>
                <li style="margin: 0.25em;"><span class="fa-li" style="color: #ac8ecf;"><i class="fas fa-play"></i></span><a href="#" style="color: #ac8ecf;">song name</a> | artist</li>
              </ul>
            </div>
          </div>
          <hr style="width: 50%; padding: 0.1em;">

          <!-- design notes -->
          <a id="design-notes"></a> <!-- design notes anchor for contents section -->
          <div class="text-center" style="margin-left: 0.25em;">
            <div class="btn btn-default" style="margin: 0.25em; border: 0;">some design notes</div>
            <div class="btn btn-default" style="margin: 0.25em; border: 0;">about your character</div>
            <div class="btn btn-default" style="margin: 0.25em; border: 0;">you can put anything here</div>
            <div class="btn btn-default" style="margin: 0.25em; border: 0;">and it should look p nice!</div>
            <div class="btn btn-default" style="margin: 0.25em; border: 0;">(if i do say so</div>
            <div class="btn btn-default" style="margin: 0.25em; border: 0;">myself)</div>
          </div>
        </div>

        <!-- back to top -->
        <div class="card-footer border-0">
          <p class="text-center"><a href="#" class="text-secondary"><i>to top</i></a></p>
        </div>
      </div>
    </div>

    <!-- basic info section -->
    <div class="col-md-3 p-1">
      <div class="card bg-faded border-0">

        <!-- image -->
        <div class="card" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: top left; height: 21em; width: auto; border: 0; border-radius: 0;"></div>

        <!-- colours and info -->
        <div class="card-block">

          <!-- colour palette  -->
          <div style="text-align: center; margin: auto;">
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
          </div>
          <hr style="width: 50%; padding: 0.1em;">

          <!-- basic info -->
          <table class="table table-hover" style="border: 0; margin-bottom: 0;">
            <tr>
              <td style="padding: 0.25em; font-weight: bold;">Name</td>
              <td style="padding: 0.25em; text-align: right;">name, nicknames</td>
            </tr>
            <tr>
              <td style="padding: 0.25em; font-weight: bold;">Gender</td>
              <td style="padding: 0.25em; text-align: right;">gender</td>
            </tr>
            <tr>
              <td style="padding: 0.25em; font-weight: bold;">Species</td>
              <td style="padding: 0.25em; text-align: right;">species</td>
            </tr>
            <tr>
              <td style="padding: 0.25em; font-weight: bold;">Age</td>
              <td style="padding: 0.25em; text-align: right;">age</td>
            </tr>
            <tr>
              <td style="padding: 0.25em; font-weight: bold;">Height</td>
              <td style="padding: 0.25em; text-align: right;">height</td>
            </tr>
            <tr>
              <td style="padding: 0.25em; font-weight: bold;">Weight</td>
              <td style="padding: 0.25em; text-align: right;">weight</td>
            </tr>
          </table>
        </div>

        <!-- code credit, please leave intact -->
        <p class="card-footer border-0 text-secondary" style="text-align: center;">code by [<a href="https://toyhou.se/snail-legs" style="color: #ac8ecf;">snail-legs</a>]</p>
      </div>
    </div>
  </div>
</div>