/* Reset some default browser styles */
body {
    background-color: #006633;
    color: #000000;
    font-family: Arial, sans-serif;
}

#header {
    color: #ffffff;
}

#main {
    background-color: #ffff99;
    padding: 10px;
}

/* Flexbox gallery container */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* space between thumbnails */
    justify-content: center; /* center thumbnails in the row */
}

.photos {
    flex: 0 1 200px; /* each thumbnail container up to 200px wide */
    text-align: center;
}

.photos img {
    width: 100%;       /* fill container width */
    height: auto;      /* keep aspect ratio */
    max-width: 200px;  /* never exceed 200px wide */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: block;
    transition: transform 0.2s ease;
}

.photos img:hover {
    transform: scale(1.05);
}

/* Photo view page styling */
.photo-view {
    text-align: center;
    padding: 20px;
}

.photo-view img {
    max-width: 90%;   /* never exceed viewport width */
    max-height: 80vh; /* keep it from being too tall */
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.photo-view h1 {
    margin-bottom: 20px;
}

.back-link {
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
    color: #0077cc;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

#footer {
    color: #ffffff;
    clear: both;
    margin-top: 20px;
}