{% extends "base.html" %}
{% block content %}
<main class="mx-auto max-w-4xl">
  <header class="sticky top-0 z-10 text-white">
    <section
      class="mx-auto flex max-w-4xl items-center justify-between p-4"
    >
  </section>
  </header>
  <section
    id="hero"
    class="widescreen:section-min-height tallscreen:section-min-height mb-12 flex scroll-mt-40 items-center justify-center p-6"
  >
    <article class="w-full">
      <div id="logo">
        <a href="https://github.com/anthonycorletti/snok" target="_blank"
        ><img
          alt="Snok"
          class="mx-auto p-5 w-48"
          src="/static/images/logo.png"
        /></a>
      </div>
      <h2
        class="text-center font-black mx-auto max-w-md text-4xl sm:text-5xl text-green-600 dark:text-green-400 p-5"
      >
        Hello, Snok!
      </h2>
      <p class="mt-4 text-center mx-auto flex max-w-md text-xl text-black dark:text-white">
        Snok is a simple, modern, full-stack toolkit for Python. 🐍
      </p>
    </article>
  </section>
</main>
{% endblock %}
