---
import "@/styles/globals.css";
import { ViewTransitions } from "astro:transitions";

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <ViewTransitions />
    <style is:global>
      body {
        @apply bg-[#050510] text-gray-100 overflow-hidden;
      }
      /* Custom scrollbar for small areas */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
    </style>
  </head>
  <body class="h-screen w-screen flex flex-col font-sans">
    <slot />
  </body>
</html>