---
css: |
  .aboutme {
    display: flex;
    margin: 3em auto;
    background: rgba(0, 0, 0, 0.5);
    width: 48rem;
    min-width: 524px;
    border: 3px ridge #8C2;
  }
  .aboutme h1 {
    font-size: 4em;
  }
  .aboutme a {
    color: #FFF;
    text-decoration: none;
  }
  .aboutme > .text > p.intro {
    font-size: 2em;
    color: #9C8;
  }
  .aboutme > div.ava > img {
    border-radius: 160px;
    margin: 1.5ex;
    margin-bottom: .5ex;
  }
  .aboutme > .text {
    flex: 1;
    padding-left: 2em;
  }
  .aboutme > .text > h1 {
    margin: 1.5ex;
    color: #9F4;
  }
  .aboutme > * > .socials > a.pronouns {
    color: #fff;
    font-size: 2em;
    baseline: bottom;
    display: block;
    margin-bottom: 1em;
  }
  .aboutme > * > .socials > a.pronouns > img {
    vertical-align: middle;
    filter: invert(81%) sepia(55%) saturate(634%) hue-rotate(39deg) brightness(91%) contrast(89%);
  }
  .aboutme > * > .socials {
    margin: 1em;
    margin-top: 0;
  }
  .aboutme > * > .socials img {
    filter: invert(81%) sepia(55%) saturate(634%) hue-rotate(39deg) brightness(91%) contrast(89%);
  }
  .aboutme > * > .socials a {
    margin-right: .75ex;
  }
---
<div class="aboutme">
  <div class="ava">
    <img src="img/ava.jpeg" width="256" height="256" />
    <div class="socials">
      <a href="{{ pronounsDB }}" target="_blank" class="pronouns">
        <img src="{{ "transgender:solid" |> icon("fontawesome") }}" width="48" height="48" />
        {{ pronouns }}
      </a>
      <a href="{{ mastodon }}" target="_blank">
        <img src="{{ "mastodon:brands" |> icon("fontawesome") }}" width="48" height="48" />
      </a>
      <a href="{{ git }}" target="_blank">
        <img src="{{ "git:brands" |> icon("fontawesome") }}" width="48" height="48" />
      </a>
    </div>
  </div>
  <div class="text">
    <h1>{{ h1 }}</h1>
    <p class="intro">{{ intro }}</p>
    <p></p>
  </div>
</div>