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

<div class="text-center">
  <p class="font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
    hiya, I'm <span class="text-pink-300 relative"
      >Artur<span
        class="absolute lg:bottom-12 bottom-9 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 hover:opacity-50 transition duration-50"
        >/ˈar.tur/</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;
  }
</style>