---
import maomao from "../assets/maomao.webp";
---

<div class="text-center">
  <h1
    class="group text-ctp-green font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50"
  >
    hiya, I'm <span class="text-ctp-teal relative"
      >artie<span
        class="absolute lg:bottom-[3.25rem] bottom-10 z-50 lg:text-xl text-lg lg:left-7 left-4 text-ctp-lavender opacity-0 group-hover:opacity-80 hover:opacity-50 transition duration-50"
        >/ˈarti/</span
      ></span
    >
    {" "}
    <img
      class="align-top mt-[-4px] rounded-b-md lg:w-12 w-10 inline-block pointer-events-none select-none"
      src={maomao.src}
    />
  </h1>
  <p
    class="lg:text-2xl text-xl lg:mt-4 mt-2 hover:scale-110 transition duration-50"
  >
    a self-taught code archmage
  </p>
</div>

<style>
  [data-icon] {
    width: 3rem;
  }
</style>
