body {
    background-color: #222222; /* Classic Navy */
    /* background-image: url('images/stars.gif'); */ /* Uncomment this when you find a good tiled background */
    color: #c0c0c0; /* Silver text */
    font-family: "Courier New", Courier, monospace;
    /* The vertical centering magic */
    min-height: 100vh; /* Forces the body to be at least as tall as the screen */
    display: flex;     /* Turns the body into a flexible box */
    margin: 0;         /* Removes default browser spacing */
}
/*
#container {
    max-width: 1024px;
    width: 90%
    margin: 20px auto;
    background-color: #000000;
    border: 3px solid #c0c0c0;
    padding: 20px;
}
*/
#container {
    max-width: 1024px;
    width: 90%;
    
    /* This single line now centers it both horizontally AND vertically */
    margin: auto; 
    
    background-color: #000000;
    border: 3px solid #c0c0c0;
    padding: 20px;
    box-sizing: border-box;
}

a {
    color: #00ff00; /* Hacker green links */
    text-decoration: none;
}

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

header, nav, footer {
    text-align: center;
}

nav {
    border-bottom: 1px dashed #c0c0c0;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

footer {
    border-top: 1px dashed #c0c0c0;
    padding-top: 15px;
    margin-top: 30px;
}

.retro-badge {
    image-rendering: pixelated; /* Keeps it perfectly crisp */
    border: none;
}

.album-grid {
    display: grid;
    /* This is the magic line. It creates columns that are at least 150px wide, 
       and automatically creates as many columns as will fit on the screen. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px; /* The space between the records */
    margin-top: 20px;
	justify-content: center;
}

.album-grid img {
    width: 100%; /* Forces the image to fill its grid cell */
    height: auto; /* Keeps the aspect ratio square */
    border: 2px solid #c0c0c0; /* Classic silver border */
    box-shadow: 3px 3px 0px #000000; /* Optional: gives a chunky, retro drop-shadow */
}

/* Optional hover effect */
.album-grid img:hover {
    border-color: #00ff00;
}