---
import './variables.css'
import './reset.css'
import './common.css'
import Head from '../components/Head.astro'
import Nav from '../components/Nav.astro'
import { links } from '../constants/links'
export interface Props {
  title?: string
  description?: string
  ogImage?: string
}

const { title, description, ogImage } = Astro.props
---

<!doctype html>
<html lang="en">
  <Head title={title} description={description} ogImage={ogImage} />

  <body class="h-card">
    <Nav links={links} />
    <slot />
    <style>
      html {
        scroll-behavior: smooth;
      }
      html,
      body,
      * {
        font-family: system-ui, sans-serif;
        font-size: var(--font-size-base);
        color: var(--text-color-dark);
        background-color: var(--text-color-light);
      }
      @media (prefers-color-scheme: dark) {
        html,
        body,
        * {
          background: var(--bg-darker);
          color: var(--text-color-light);
        }
      }

      @keyframes pulse {
        0%,
        100% {
          background-position-y: 0%;
        }
        50% {
          background-position-y: 80%;
        }
      }
    </style>

    <style is:global>
      main,
      footer {
        margin: auto;
        max-width: var(--content-width);
        padding: 1em 1em 0;
      }

      h1 {
        font-size: var(--font-size-xl);
      }

      h2 {
        font-size: var(--font-size-lg);
      }

      code {
        font-family:
          Menlo,
          Monaco,
          Lucida Console,
          Liberation Mono,
          DejaVu Sans Mono,
          Bitstream Vera Sans Mono,
          Courier New,
          monospace;
      }

      p,
      img,
      table,
      ul {
        margin: 1em 0;
        font-size: var(--font-size-base);
      }

      .text-gradient {
        font-weight: 900;
        background-image: var(--ayo-gradient);
        animation: pulse 4s ease-in-out infinite;
        background-size: 500% 500%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 100% 200%;
        background-position-y: 100%;
        border-radius: 0.4rem;
      }

      @media (prefers-color-scheme: dark) {
        a {
          color: var(--text-color-light);
        }
      }
    </style>
    <!-- Anonymous RUM for web perf by Cloudflare Web Analytics -->
    <script
      defer
      src="https://static.cloudflareinsights.com/beacon.min.js"
      data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'></script>
    <!-- End Cloudflare Web Analytics -->
  </body>
</html>
