<div class="container pb-5" style="color: #36453b; background-color: #ece2d0;">
  <div class="row">

      <div class="col-md-4">
        <div class="p-3 my-3" style="background-color: #F6F2EB;">
          <!--add a square image in src quotes - make sure to open image in a new tab for the src link!-->
          <img src="IMG URL HERE" alt="profile-image" class="d-block mx-auto" style="background-color: #f59ca9; width: 300px; height: 300px;">
          <!--change name, age, and gender here-->
          <h1 class="display-2 text-center p-2 font-weight-light">Name</h1>
          <h2 class="text-center font-weight-light">Age // Gender</h2>
          <hr>
          <!--do not remove species credits!-->
          <h1 class="display-4 text-center p-2 font-weight-light">Mirn Closed Species</h1>
          <p class="text-center"><i>created by</i></p>
          <h2 class="text-center pt-3 font-weight-light">@Split</h2>
          <h2 class="text-center font-weight-light">@Whitewingedcrow</h2>
          <hr>
          <h1 class="text-center p-2 font-weight-light">Mirn Hideaway</h1>
          <a href="https://toyhou.se/~world/6583.mirn-hideaway"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7a5132ec-cc14-4e05-8e07-671cf3b165d9/ddnosaw-886b13d8-404f-4b70-bf10-fd34857da992.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdhNTEzMmVjLWNjMTQtNGUwNS04ZTA3LTY3MWNmM2IxNjVkOVwvZGRub3Nhdy04ODZiMTNkOC00MDRmLTRiNzAtYmYxMC1mZDM0ODU3ZGE5OTIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.OtXN_zsFZRHCxSYCM8mYXwkT_ddj9AqAiipINeXRvVI" class="w-25 d-block mx-auto pb-2"></a>
        </div>
      </div>

      <div class="col-md-8">
        <div class="pb-3" style="background-color: #F6F2EB;">
          <h1 class="display-2 font-weight-light p-3 mt-3" style="background-color: #c6d8af;">Base Traits</h1>
          <!--change "blah" to appropriate traits-->
          <span class="text-uppercase font-weight-light px-3">Hair</span><span class="text-uppercase pull-right font-weight-light px-3">Blah</span>
          <hr>
          <span class="text-uppercase font-weight-light px-3">Horns</span><span class="text-uppercase pull-right font-weight-light px-3">Blah</span>
          <hr>
          <span class="text-uppercase font-weight-light px-3">Eyes</span><span class="text-uppercase pull-right font-weight-light px-3">Blah</span>
          <hr>
          <span class="text-uppercase font-weight-light px-3">Ears</span><span class="text-uppercase pull-right font-weight-light px-3">Blah</span>
          <hr>
          <span class="text-uppercase font-weight-light px-3">Tail</span><span class="text-uppercase pull-right font-weight-light px-3">Blah</span>
        </div>

        <div class="row">

          <div class="col-md-6">
            <div class="h-100" style="background-color: #F6F2EB;">
              <h1 class="display-2 font-weight-light p-3 mt-4" style="background-color: #c6d8af;">Mutations</h1>
              <!--add or remove checkmarks to indicate which mutations are present on the design.
                  to add: paste <i class="fas fa-check-double pull-right px-3"></i> at end of the mutation <span>
                  to remove: simply delete the same line from the end of the mutation <span> -->
              <span class="font-weight-light text-uppercase px-3">Hair Extensions</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Horned God</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Windows to the Soul</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Keen Hearing</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Twin Tails</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Fancy Feet</span> <i class="fas fa-check-double pull-right px-3"></i>
            </div>
          </div>

          <div class="col-md-6">
            <div class="h-100" style="background-color: #F6F2EB;">
              <h1 class="display-2 font-weight-light p-3 mt-4" style="background-color: #c6d8af;">RLC</h1>
              <!--add or remove checkmarks to indicate which RLC traits are present on the design.
                  to add: paste <i class="fas fa-check-double pull-right px-3"></i> at end of the RLC <span>
                  to remove: simply delete the same line from the end of the RLC <span> -->
              <span class="font-weight-light text-uppercase px-3">Halos</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Light Tattoos</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Wings</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
              <span class="font-weight-light text-uppercase px-3">Crystal Limbs</span> <i class="fas fa-check-double pull-right px-3"></i>
              <hr>
            </div>
          </div>

        </div>

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