body {
    font-family: serif;
    background-color: black;
    padding: 5%;
    margin: 0 auto;
    max-width: 90vw; /* Ensures content doesn't stretch too wide on large screens */
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
    body {
        max-width: 95vw; /* Allow more width usage on smaller screens */
        padding: 3%;
    }
}

@media (max-width: 480px) {
    body {
        max-width: 100vw;
        padding: 2%;
    }
}

nav {
    text-align: right;
}

img {
    width: 100%;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Always 3 columns */
    gap: 10px; /* Adjusts spacing between images */
    max-width: 100%;
    overflow-x: auto; /* Allows horizontal scrolling when overflowing */
    white-space: nowrap;
}

.container img {
    width: 100%; /* Ensures images fit within grid cells */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures images look nice */
}

h1, h2, h3 {
    font-family: serif;
    color: darkgoldenrod;
    background-color: black;
    padding: 5px;
}

p {
    color: blanchedalmond;
    background-color: black;
    padding: 10px;
}

ol, ul {
    color: darkgoldenrod;
    background-color: black;
}

li {
    padding: 10px;
}

a {
    background-color: darkgoldenrod;
    color: black;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

a:hover {
    background-color: black;
    color: darkgoldenrod;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

footer {
    text-align: center;
    color: gray;
}

.gallery-container {
    display: flex;
    justify-content: center; /* Centers the grid horizontally */
    align-items: center; /* Optional: Centers vertically if needed */
    width: 100%;
}

.gallery-grid {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 800px;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
}