---
import { Image } from "astro:assets";
import logo from "/src/img/logo.svg";
import "/src/css/app.css";
---

<html>
  <head>
    <title>z0x</title>
    <meta charset="utf-8" />
    <meta name="description" content="z0x" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="darkreader-lock" />
    <link rel="icon" type="image/x-icon" href="/src/img/logo_bg.svg" />
    <link rel="icon" type="image/png" sizes="192x192" href="/src/img/logo_bg.svg" />
    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/src/img/logo_bg.svg" />
    <link rel="preload" href="/fonts/SF-Pro.woff2" as="font" type="font/woff2" crossorigin />
  </head>
  <body class="bg-linear-to-b/oklch from-neutral-700 to-black text-white overflow-hidden">
    <div class="flex items-center justify-center min-h-screen">
      <div id="fade" class="flex flex-col items-center justify-center w-full h-full max-w-[60vmin] max-h-[60vmin] md:max-w-[35vmin] md:max-h-[35vmin]">
        <Image src={logo} alt="logo" class="w-2/3 opacity-0" loading="eager" />
        <h1 class="text-4xl opacity-0 font-sfpro font-semibold">z0x</h1>
      </div>
    </div>
    <div id="snowflake-container"></div>
    <script src="/src/js/snowflakes.ts"></script>
    <script src="/src/js/index.ts"></script>
  </body>
</html>
