---
import { Icon } from "astro-icon";
---

<div class="flex flex-wrap justify-center gap-x-3 lg:mt-6 mt-5">
  <a href="https://github.com/artiemis" target="_blank">
    <Icon name="mdi:github" />
  </a>
  <a class="group relative" href="https://discord.com/users/134306884617371648" target="_blank">
    <Icon class="hover:text-[#5865F2]" name="mdi:discord" />
    <div class="absolute xl:w-[28rem] top-10 left-8 z-10 xl:group-hover:opacity-100 transition-opacity opacity-0 pointer-events-none">
      <img
        class="pointer-events-none"
        src="https://lanyard.cnrad.dev/api/134306884617371648?hideDiscrim=true&showDisplayName=true&bg=313244"
        alt="Discord Presence"
      />
    </div>
  </a>
  <a rel="me" href="https://infosec.exchange/@artie" target="_blank">
    <Icon class="hover:text-[#6364FF]" title="@artie@infosec.exchange" name="mdi:mastodon" />
  </a>
  <a href="https://twitter.com/artiepun" target="_blank">
    <Icon class="hover:text-[#1DA1F2]" name="mdi:twitter" />
  </a>
  <a href="https://anilist.co/user/artie" target="_blank">
    <Icon class="hover:text-[#02A9FF]" name="simple-icons:anilist" />
  </a>
  <a href="https://megu.artie.moe" target="_blank">
    <Icon class="hover:text-[#C24448]" name="wizard-hat" />
  </a>
</div>

<style>
  [astro-icon] {
    width: 2rem;
    transition: 0.4s ease-out;
  }

  [astro-icon="wizard-hat"] {
    width: 1.8rem;
  }

  [astro-icon]:hover {
    transform: rotateZ(360deg);
  }
</style>