/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
    /* New background image and styling */
    background-image: url('images/moon and stars art.png'); /* Path to your new image */
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Don't repeat the image */
    background-attachment: fixed; /* Keep background fixed while scrolling (if content overflows) */
    image-rendering: pixelated; /* Ensure crisp pixel art scaling */

    /* Original body styles, adjusted colors */
    font-family: 'Press Start 2P', cursive;
    color: #e2c0e9; /* Light purple for main text */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden; 
}

/* --- Central Panel and Welcome Banner --- */

.central-panel {
    position: relative; /* Change from absolute to relative to flow with flexbox */
    /* Remove top/left/transform for centering with flexbox */
    z-index: 10;
    width: 600px; /* Keep consistent width */
    max-width: 90%; /* Responsive width */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px; /* Add some internal padding */
    padding-bottom: 20px;
    margin-bottom: 20px; /* Space before the footer */
    background-color: rgba(0, 0, 0, 0.4); /* Slightly transparent dark background for readability */
    border: 2px solid #3a506b; /* Blueish border for new theme */
    box-shadow: 
        3px 3px 0 #1c2a38, -3px -3px 0 #1c2a38, 
        3px -3px 0 #1c2a38, -3px 3px 0 #1c2a38; /* Pixelated shadow */
}

.welcome-banner {
    background-color: #2b3a4c; /* Darker blue for banner */
    border: 2px solid #5a7d9f; /* Lighter blue border */
    padding: 10px 20px;
    margin-bottom: 25px; 
    text-align: center;
    color: #e0f2f7; /* Very light blue for text */
    text-shadow: 1px 1px #1c2a38;
    box-shadow: 1px 1px 0 #1c2a38, -1px -1px 0 #1c2a38, 1px -1px 0 #1c2a38, -1px 1px 0 #1c2a38;
}

.welcome-banner h1 {
    margin: 0;
    font-size: 1.5em; 
    line-height: 1.2;
}

/* --- Menu Buttons --- */

.neopets-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px 10px; 
    max-width: 500px; 
    width: 100%;
    position: relative;
    z-index: 11; 
}

.neopets-menu a {
    background: linear-gradient(to right, #2b3a4c, #3a506b); /* Dark blue gradient for buttons */
    color: #e0f2f7; /* Light blue text */
    padding: 15px 10px;
    font-size: 0.9em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    height: 55px; 

    /* Pixelated border effect for buttons */
    box-shadow:
        1px 1px 0 #1c2a38, -1px -1px 0 #1c2a38, 1px -1px 0 #1c2a38, -1px 1px 0 #1c2a38, /* Dark inner border */
        2px 2px 0 #5a7d9f, -2px -2px 0 #5a7d9f, 2px -2px 0 #5a7d9f, -2px 1px 0 #5a7d9f, /* Lighter outer border */
        -2px 2px 0 #5a7d9f, 1px 2px 0 #5a7d9f, 2px -1px 0 #5a7d9f; 
}

.neopets-menu a:hover {
    background: linear-gradient(to right, #3a506b, #5a7d9f); /* Lighter gradient on hover */
    box-shadow:
        1px 1px 0 #1c2a38, -1px -1px 0 #1c2a38, 1px -1px 0 #1c2a38, -1px 1px 0 #1c2a38,
        2px 2px 0 #ffffff, -2px -2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 1px 0 #ffffff,
        -2px 2px 0 #ffffff, 1px 2px 0 #ffffff, 2px -1px 0 #ffffff; /* White border on hover */
}

/* Individual button positioning for staggered effect (6 buttons total) */
.neopets-menu a:nth-child(2), 
.neopets-menu a:nth-child(4), 
.neopets-menu a:nth-child(6) { 
    transform: translateX(10px); 
}
.neopets-menu a:nth-child(1), 
.neopets-menu a:nth-child(3), 
.neopets-menu a:nth-child(5) { 
    transform: translateX(-10px); 
}


/* --- Disconnect Banner (Footer) --- */

.neopets-footer-banner {
    background: linear-gradient(to right, #3a506b, #5a7d9f); /* Blue gradient */
    padding: 10px 20px;
    margin-top: 20px; /* Space it below the central panel */
    text-align: center;
    color: #e0f2f7;
    text-shadow: 1px 1px #1c2a38;
    font-size: 1.1em;
    z-index: 12;
    max-width: 500px; 
    width: 100%;
    box-sizing: border-box;
    /* Pixelated border effect */
    box-shadow:
        1px 1px 0 #1c2a38, -1px -1px 0 #1c2a38, 1px -1px 0 #1c2a38, -1px 1px 0 #1c2a38,
        2px 2px 0 #5a7d9f, -2px -2px 0 #5a7d9f, 2px -2px 0 #5a7d9f, -2px 1px 0 #5a7d9f,
        -2px 2px 0 #5a7d9f, 1px 2px 0 #5a7d9f, 2px -1px 0 #5a7d9f;
    
    position: relative; /* Change to relative to flow with flexbox */
}

/* --- Utility Styles --- */

.small-text {
    font-size: 0.7em;
    color: #9abed7; /* Lighter blue for copyright */
    margin-top: 30px; 
    z-index: 10;
    position: relative;
    letter-spacing: 2px;
}

a {
    color: #e0f2f7;
    text-decoration: none; 
    text-shadow: 1px 1px #1c2a38;
}

a:hover {
    color: #9abed7;
    text-decoration: underline; 
}


/* --- Media Queries (Responsiveness) --- */

@media (max-width: 768px) {
    .central-panel {
        width: 90%;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .neopets-menu {
        grid-template-columns: 1fr; 
    }
    .neopets-menu a:nth-child(even),
    .neopets-menu a:nth-child(odd) {
        transform: translateX(0); 
    }
    .welcome-banner h1 {
        font-size: 1.2em;
    }
    .neopets-footer-banner {
        max-width: 90%;
    }
}