/* --- Keep all your existing styles --- */
body {
    font-family: 'VT323', monospace;
    background-color: #000;
    background-image: linear-gradient(rgba(18, 18, 18, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
    background-size: 100% 4px;
    overscroll-behavior: none; /* Add this if you had it before */
}

.font-title { font-family: 'Press Start 2P', cursive; }

.neon-text-cyan {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 191, 255, 0.8), 0 0 80px rgba(0, 191, 255, 0.8);
}

.focus-glow-cyan:focus { box-shadow: 0 0 8px theme('colors.cyan.400'); }
.focus-glow-pink:focus { box-shadow: 0 0 8px theme('colors.pink.500'); }
.transition-all { transition: all 0.2s ease-in-out; }

/* --- New styles for the main UI sidebar --- */
.retro-sidebar {
    width: 200px; /* A bit wider for better readability */
    background-color: #111;
}

/* --- ADD THESE NEW STYLES FOR THE MODAL --- */

/* The hidden class from Tailwind is used to toggle visibility */
.hidden {
    display: none;
}

#main-content-container {
    background-image: url('assets/image1.png'); /* Updated path */
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}