import { Outlet } from "react-router-dom";
import { CosmicBackground } from "../components/CosmicBackground";

export default function FullWidthLayout() {
  return (
    <div className="min-h-screen text-foreground flex flex-col font-sans selection:bg-white/30">
      <CosmicBackground />
      {/* Container that takes full width but centers content for very large screens */}
      <main className="flex-1 w-full relative safe-area-inset-top safe-area-inset-bottom z-10 flex flex-col items-center">
        <div className="w-full sm:max-w-md md:max-w-xl flex-1 flex flex-col bg-background/50 shadow-2xl relative">
          <Outlet />
        </div>
      </main>
    </div>
  );
}
