body {
    font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
  
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    min-height: 100vh; 
    display: flex; /* Enables flexbox for proper footer positioning */
    flex-direction: column; /* Stacks children vertically */
    color: #f3f4f6; /* Default text color for the body */
    margin: 0; /* Remove default body margin */
}

/* Custom scrollbar for a sleek look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a202c; /* Dark background for the track */
}
::-webkit-scrollbar-thumb {
    background: #4a5568; /* Slightly lighter thumb */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b7280; /* Even lighter on hover */
}

/* Main content sections to add a semi-transparent overlay for readability */
section {
    /* Adjusted opacity to 70% (from 90%) for a cleaner, more transparent look */
    background-color: rgba(31, 41, 55, 0.7); /* Tailwind's gray-800 with 70% opacity */
    padding: 2rem;
    border-radius: 0.75rem; /* Tailwind's rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-lg */
    border: 1px solid #374151; /* Tailwind's gray-700 */
    max-width: 64rem; /* Tailwind's max-w-3xl (approx) */
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Header and Footer backgrounds with slight transparency */
header, footer {
    background-color: rgba(17, 24, 39, 0.9); /* Tailwind's gray-900 with 90% opacity */
}
/* Styles for the canvas container - Retained from previous styles */
#arcadeCanvas {
    position: fixed; /* Use fixed to cover the entire viewport regardless of scroll */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Place it behind all content */
    background: transparent; /* Crucial: Make the canvas container transparent */
}

/* Styles for your main content to ensure it's visible above the animation - Integrated with new 'section' styles */
.main-content {
    position: relative; /* Give it a z-index context */
    z-index: 1; /* Ensure content is above the animation */
    flex-grow: 1; /* Allows content to take up available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto; /* Centering the main content block */
    margin-right: auto; /* Centering the main content block */

    /* New 'section' styles applied here for the main content block */
    background-color: rgba(31, 41, 55, 0.7); /* Tailwind's gray-800 with 70% opacity */
    padding: 2rem;
    border-radius: 0.75rem; /* Tailwind's rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-lg */
    border: 1px solid #374151; /* Tailwind's gray-700 */
    max-width: 64rem; /* Tailwind's max-w-3xl (approx) */
    width: 100%;
    margin-top: 2rem; /* Added margin for separation from top */
    margin-bottom: 2rem; /* Added margin for separation from bottom */
}


/* Main content H1 - Retained from previous styles */
.main-content h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #00ff00; /* Arcade green */
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; /* Neon glow effect */
}

/* Main content P - Retained from previous styles */
.main-content p {
    font-size: 1.25rem;
    margin-top: 1rem;
    max-width: 800px;
}

/* Responsive adjustments - Retained from previous styles */
@media (max-width: 768px) {
    .main-content h1 {
        font-size: 2rem;
    }
    .main-content p {
        font-size: 1rem;
    }
}

/* Header and Footer backgrounds with slight transparency */
header, footer {
    background-color: rgba(17, 24, 39, 0.9); /* Tailwind's gray-900 with 90% opacity */
    padding: 1rem; /* Example padding */
    width: 100%; /* Ensure they span full width */
    flex-shrink: 0; /* Prevent them from shrinking when content is taller */
    
    /* ADDED: Ensure header and footer are positioned relative and above the canvas */
    position: relative; 
    z-index: 1; 
}