<!DOCTYPE html>
<html>
  {{- partial "head.html" . -}}
  <body>
    <div class="bg-neutral-100">
      <div
        class="flex flex-col min-h-screen md:border-x-[20px] border-primary-400"
      >
        <div class="bg-primary-400 md:h-5 md:sticky top-0"></div>
        {{- partial "header.html" . -}}
        <div class="mb-8 grow">
          <div class="" id="content">
            <div class="flex justify-center">
              <div class="md:w-2/3 md:px-0 px-2">
                {{- block "main" . }}{{- end }}
              </div>
            </div>
          </div>
        </div>
        {{- partial "footer.html" . -}}

        <div class="lg:h-5 sticky bottom-0 bg-primary-400 grow-0"></div>
      </div>
      <button
        id="to-top-button"
        onclick="goToTop()"
        title="Go To Top"
        class="hidden md:hidden fixed z-90 bottom-6 right-8 border-0 w-16 h-16 rounded-full drop-shadow-md hover:bg-primary-500 border-4 border-white bg-primary-400 text-white text-4xl font-bold"
      >
        &uarr;
      </button>
    </div>
    <script src="/js/top-arrow.js"></script>
    <script src="/js/lightbox-plus-jquery.min.js"></script>
  </body>
</html>
