<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kainoa Newton</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Work+Sans:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              sans: ['Work Sans', 'sans-serif'],
              inter: ['Inter', 'sans-serif'],
              worksans: ['Work Sans', 'sans-serif'],
            },
            colors: {
              neutral: {
                850: '#1f1f1f',
                900: '#171717', // Specific requested background
                950: '#0a0a0a',
              }
            }
          },
        },
      }
    </script>
    <style>
      body {
        background-color: #171717; /* neutral-900 */
        color: #e5e5e5; /* neutral-200 */
        font-family: 'Inter', sans-serif;
        font-size: 16px; /* Explicitly requested */
      }
      /* Custom scrollbar for webkit */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #171717; 
      }
      ::-webkit-scrollbar-thumb {
        background: #404040; 
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #525252; 
      }
      @keyframes toast-enter {
        0% {
          opacity: 0;
          transform: translateY(16px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .toast-enter {
        animation: toast-enter 0.3s ease-out;
      }
      @keyframes fade-up {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-in {
        opacity: 0;
        animation: fade-up 0.6s ease-out forwards;
      }
      .project-card {
        opacity: 0;
        animation: fade-up 0.35s ease-out forwards;
      }
    </style>
</head>
  <body>
    <div id="root"></div>
  <script type="module" src="/index.tsx"></script>
</body>
</html>