---
import blobHeart from "../assets/blobheart.png";
---

<div class="text-center">
  <p class="greeting font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
    hiya, I'm <span class="text-transparent bg-clip-text from-rose-400 to-fuchsia-600 bg-gradient-to-r relative"
      >artie<span
        class="ipa absolute lg:bottom-[3.25rem] bottom-10 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 hover:opacity-50 transition duration-50"
        >/ˈɑːtiː/</span
      ></span
    >
    <img class="align-top lg:w-12 w-10 inline-block pointer-events-none select-none" src={blobHeart} alt="blob heart" />
  </p>
  <p class="font-normal lg:text-2xl text-xl xl:mt-4 mt-2 hover:scale-110 transition duration-50">
    a self-taught code archwizard
  </p>
</div>

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

  .greeting:hover .ipa {
    opacity: 0.5;
  }
</style>