human

<!--
Background: #2b1d1f
Text: #f5d3d7

Use "find & replace" to change all at once.
-->

<!--- NEW CODE-------->
<!--- NEW CODE-------->
<!--- NEW CODE-------->

<div class="col-md-12">
<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; max-width: 350px; min-height: 100px; min-width: 150px; box-shadow: inset 0px 0px 1px 1px;">

    <div class="col-md-0">
        <div class="card border-0 p-2" style="background: url(https://img.freepik.com/premium-photo/dark-purple-grunge-texture-wall-broken-background_850377-11.jpg);background-size: justify; background-position: center; max-width: 350px; min-height: 100px; min-width: 150px; box-shadow: inset 0px 0px 1px 1px;">

<!---Icon's image URL--->
            <div class="container">
            <div class="row">
            <div class="col-md-0">
            <div class="card border-right; h-100" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/25229693?1704835617); background-size: cover; background-position: justify; background-repeat: no-repeat; max-height:150px; max-width: 150px; min-height: 100px; min-width: 100px; border-color: #000;"></i></a>
                    </div>
                    </div>

<!---After this point, you can replace color: #000 with another hex code, or replace it with color: white;--->

                    <div class="col-md-8">
                        <div style="font-size:large; color: white">
                            <strong>
                            HUMAN</strong>
                            <hr style="border-color: white; margin-bottom:0; margin-top:0;">
                        </div>

                        <div style="font-size:small; color: white">
                            <em>Influencer turned into a Pokemon. They're trying to find a way to turn back...</em>

    <!---If you just want the namecard, icon, and blurb, first ctrl + F 'NOTE' to find the second half, then start selecting and erase the area from here to there.--->
                        </div>
                        <div class="mt-2"></div>
                        <a data-toggle="collapse" href="#stats" role="button" aria-expanded="false" aria-controls="collapseExample">

<!---If you'd like a white down arrow, replace the current i class with <i class="fas fa-caret-down" style="color: white;"> (or, you can change the 'white' to any hex colour you'd like!--->
                            <center><i class="fas fa-caret-down">
                                </i>

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

<div class="collapse" id="stats">
<div class="mx-auto" style="font-size:80%; max-width:350px; color: white;">

<!----- general information ----->
<div class="card border-0 my-2 p-2" style="border-radius:10px; background:#000000;">

   <div class="justify-content-between"><div>Name</div>
          <div>Human</div></div>

     <div class="justify-content-between"><div>Age</div>
          <div>Adult</div></div>

     <div class="justify-content-between"><div>Gender</div>
          <div>Nonbinary (They/he)</div></div>

     <div class="justify-content-between"><div>Pokemon</div>
          <div>Colored Skitty</div></div>


  </div>


<!----- personality / about ----->
<div class="card border-0 mt-2 p-2" style="border-radius:10px; height:220px; overflow-y:auto; background:#000000;">

     <p>Human was a TikTok influencer with millions of followers, making a living off of social media. Then one day, to their dismay, they got inexplicably Pokemon'd and ended up in a new world. They are eagerly  searching for a way to become human again. Even out of spite, they call themself "Human" now. Luckily, social media still exists to scratch that online itch... He is overall a friendly and mischievous person, with a (large) dollop of trust and self-esteem issues.</p>

     <p>• He has top surgery scars as a human, though none as a Pokemon.
     <br>• Due to their sensitive eyes, they often wear sunglasses outside.
     <br>• Like most Skitties, he chases his own tail around a lot, much to his annoyance.</p>

  </div>

<div class="card border-0 my-2 p-2" style="border-radius:10px; background:#000000;">

<div class="justify-content-between"><div><i class="fal fa-code"/></div>
          <div><a href="pvnksoda">Code credit</a> | <a href="Coturnix">Code credit 2</a></div></div>
</div></div>


<!---NOTE: If you just want the blurb without the stats tab, here's where you stop.--->

          </div>
                </div>