<div
  class="self-end w-full py-6 gap-2 flex flex-col items-center justify-center min-h-12 bg-black text-white"
>
  <div class="w-9/12 flex flex-row justify-between">
    <div class="flex flex-row gap-8">
      {{ range .Site.Menus.main }}
      <a class="text-white hover:text-gray-400" href="{{ .URL }}">
        {{ $text := .Name | safeHTML }} {{ $text }}
      </a>
      {{ end }}
    </div>
    <div class="flex flex-row gap-2">
      {{ range .Site.Params.social.main }}
      <a target="_blank" href="{{ .url | safeURL }}">
        {{ .icon | safeHTML }}
      </a>
      {{ end }}
    </div>
  </div>
  <div class="h-px bg-gray-700 w-9/12"></div>
  <div class="grid grid-cols-2 justify-between w-9/12">
    <p class="text-xs text-gray-400">
      © {{ now.Format "2006" }} {{ .Site.Params.copyName | markdownify }}
    </p>
    <p class="text-xs text-right text-gray-400">
      Built using
      <a
        class="hover:decoration-2 underline"
        target="_blank"
        href="https://gohugo.io"
        >Hugo</a
      >, designed by
      <a
        class="hover:decoration-2 underline"
        target="_blank"
        href="https://myco.systems"
        >MycoSystems</a
      >
    </p>
  </div>
</div>