/* Basic Reset and High-Contrast Background */
body {
    margin: 0;
    padding: 0;
    background-color: #000000; /* Black Background */
    color: #FFFFFF; /* Default White text for contrast */
    font-family: 'Arial', sans-serif; /* A simple, lofi font */
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    padding: 20px 0;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Subtle header glow */
}

h1 {
    font-size: 2.5em;
    margin-bottom: 5px;
}

/* Button Grid Layout */
.button-grid {
    display: grid;
    /* 3 columns in large screens, 2 in medium, 1 in small */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 90%;
    max-width: 1200px; /* Limit the max width of the grid */
    padding-bottom: 40px;
}

/* Base Neon Button Style */
.neon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px; /* Rectangular height */
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 5px; /* Slight rounding for the lofi feel */
    transition: all 0.3s ease;
    border: 3px solid transparent; /* Border for base glow effect */
}

.neon-button b {
    color: #000000; /* Text is black to pop against the neon background */
    text-shadow: none; /* Remove default text shadow */
}

/* Neon Colors */
/* Each button gets a unique neon color */

.pink { background-color: #FF1493; }
.cyan { background-color: #00FFFF; }
.orange { background-color: #FF4500; }
.lime-green { background-color: #32CD32; }
.magenta { background-color: #FF00FF; }
.yellow { background-color: #FFFF00; }
.blue { background-color: #1E90FF; }
.purple { background-color: #8A2BE2; }
.aqua { background-color: #00CED1; }
.red { background-color: #FF0000; }
.light-green { background-color: #7CFC00; }
.teal { background-color: #008080; }

/* Glow on Hover Effect */
/* Adds a box shadow that creates the neon glow effect */
.pink:hover { box-shadow: 0 0 15px #FF1493, 0 0 40px #FF1493; }
.cyan:hover { box-shadow: 0 0 15px #00FFFF, 0 0 40px #00FFFF; }
.orange:hover { box-shadow: 0 0 15px #FF4500, 0 0 40px #FF4500; }
.lime-green:hover { box-shadow: 0 0 15px #32CD32, 0 0 40px #32CD32; }
.magenta:hover { box-shadow: 0 0 15px #FF00FF, 0 0 40px #FF00FF; }
.yellow:hover { box-shadow: 0 0 15px #FFFF00, 0 0 40px #FFFF00; }
.blue:hover { box-shadow: 0 0 15px #1E90FF, 0 0 40px #1E90FF; }
.purple:hover { box-shadow: 0 0 15px #8A2BE2, 0 0 40px #8A2BE2; }
.aqua:hover { box-shadow: 0 0 15px #00CED1, 0 0 40px #00CED1; }
.red:hover { box-shadow: 0 0 15px #FF0000, 0 0 40px #FF0000; }
.light-green:hover { box-shadow: 0 0 15px #7CFC00, 0 0 40px #7CFC00; }
.teal:hover { box-shadow: 0 0 15px #008080, 0 0 40px #008080; }

/* Media Queries for Responsiveness */
@media (max-width: 900px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .button-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .neon-button {
        height: 80px;
    }
}