ayashi twst au

<div class="container" style="max-width:800px; font-size:90%; background-size:cover; background-position:center;
background-image:url('https://goodsrepublic.com/media/binary/005/783/395/5783395.jpg');">
  <div class="row">

    <!--CHARACTER IMAGE-->
    <div class="col-lg-3 px-0 pb-0 pt-3">
      <div class="card bg-transparent border-0 h-100" style="background-size:cover; background-position:top center;
      background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/57829033_CE8Wnns5VvmASlb.png?1683159623');"></div>
    </div> <!--character image end-->

    <div class="col-lg-9 py-3 px-3 pl-lg-0 align-self-center">
      <div class="w-25 mx-auto mt-4" style="height:40px; background-color:#0f0f0f; box-shadow:0 0 1rem rgba(0,0,0,0.75); clip-path:polygon(50% 0%, 0% 100%, 100% 100%);"></div>
      <div class="card rounded-0" style="background-color:#f5f3ef; color:#5c4a35; border:.5rem solid #b4a073;">
        <div class="card-body p-3 m-2" style="border:.25rem solid #b4a073;">

          <!--DORM IMAGE-->
          <img class="d-block mx-auto" style="max-height:135px; margin-top:-125px;" src="https://static.tvtropes.org/pmwiki/pub/images/scarabialogo.png"> <!--dorm image end-->

          <!--DORM-->
          <div class="text-center mb-2">
            <h3 class="font-weight-bold mb-1" style="color:#baa880;">
            Scarabia</h3> <!--dorm end-->
            <h3 class="text-center">Ayashi [عیاشی] </h3>
          </div>

          <!--DIVIDER LINE-->
          <div class="row no-gutters align-items-center mb-2 mx-5">
            <div class="col-auto">
              <div style="width:13px; height:10px; background-color:#baa880; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
            </div>
            <div class="col" style="margin-left:-3px; margin-right:-3px;">
              <hr class="m-0" style="border-width:.15rem; border-color:baa880;">
            </div>
            <div class="col-auto">
              <div style="width:13px; height:10px; background-color:#baa880; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
            </div>
          </div> <!--divider line end-->

          <!--CONTENT-->
          <div class="row no-gutters">

            <!--LEFT COLUMN-->
            <div class="col-lg-6 row no-gutters align-items-center ">

              <div class="col-6 ">
                <p style="color:#baa880;">Grade</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;"> Sophomore</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Gender</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Nonbinary</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Pronouns</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">He/they</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Age</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">17</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Height</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">5'2" | 157 cm</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Dominant Hand</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Right</p>
              </div>




            </div> <!--left column end-->

            <!--RIGHT COLUMN-->
            <div class="col-lg-6 row no-gutters align-items-center ">

                <div class="col-6 ">
                <p style="color:#baa880;">Club</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Film studies</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Best Subject</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Art</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Hobbies</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Calligraphy</p>
              </div>


              <div class="col-6 ">
                <p style="color:#baa880;">Favorite Food</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Lemon cake</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Least Favorite Food</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">Okra</p>
              </div>

              <div class="col-6 ">
                <p style="color:#baa880;">Signature spell</p>
              </div>
              <div class="col-6 ">
                <p class="" style="color:#5a4832;">"In Memory and Ink"</p>
              </div>


            </div> <!--right column end-->

            <!--DESCRIPTION-->
            <div class="col-lg-12 p-2">
              <hr class="mb-1" style="border-color:#b4a073; border-width:.25rem;"> <!--border-->
              <hr class="mt-0 mb-1" style="border-color:#b4a073; border-width:.2rem;"> <!--border-->
              <!--TEXT-->

              <div class="px-4" style="max-height:205px; overflow:auto;">
                <br>
                <p>Ayashi is a 2nd year student at NRC! Despite their interest in arts, they excel at other class subjects as well. Well, they're average at P.E., but that's alright...! Just like many other Scarabia students, he also does ancient incantation studies, and occasionally even transcribes spells (however, the latter bores him a LOT).</p>

                <p>At first glance, people wonder why they didn't join Pomefiore or a dorm more "artsy." Well, in line with Scarabia's values, they're always planning ahead and being attentive to how people may potentially act. He's not the best emotion reader or conflict mediator, but does his best to understand the people around him.</p>

                <p>Their signature spell "In Memory and Ink" allows them to record everything that's happening for a short duration with ink -- both words and pictures appear on the chosen surface. The more he refines his magic, the longer the spell can last & can record in more detail.</p>

                <p>Since there is no art club, Ayashi opted to join the film studies club. He doesn't like attention, and had no intention of being an actor in the first place, so he works backstage and helps with preparation. They were allowed to join quite easily, since the club is understaffed in non-actor roles. Though, Vil still asked them to go through the motions of auditioning to see their acting skills. They cannot act, to say the least.</p>

                <p>They don't don the Scarabia dorm uniform without a black, long-sleeve turtleneck on. Even if it gets hot or sweaty, he insists on wearing it. Perhaps he gets shy with his arms completely bare.</p>

              </div> <!--text end-->
              <hr class="my-1" style="border-color:#b4a073; border-width:.2rem;"> <!--border-->
              <hr class="mt-0 mb-1" style="border-color:#b4a073; border-width:.35rem;"> <!--border-->
            </div> <!--description end-->

          </div> <!--content end-->

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

  </div>
</div>
<div class="container">
  <div class="row no-gutters align-items-center">
    <div class="col pr-1"><hr class="m-0" style="opacity:.75;"></div>
    <div class="col-auto px-1">
      <a class="btn btn-outline-secondary border-0 p-1 tooltipster" title="Code by Aurorean" style="font-size:.65rem;" href="https://toyhou.se/19798609.twisted-wonderland-v2">
        <i class="font-weight-lighter fas fa-code"></i>
      </a>
    </div>
    <div class="col pl-1"><hr class="m-0" style="opacity:.75;"></div>
  </div>
</div>