* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

html, body {
    height: 100%; /* Ensure full height */
    margin: 0; /* Remove default margin */
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align items at the start */
    background-color: #121212; /* Dark mode */
    color: white; /* Text color */
}

.header {
    margin: 20px 0; /* Add some space around the header */
}

.thumbnail-container {
    display: flex;
    justify-content: center; /* Center thumbnails */
    flex-wrap: wrap; /* Allow wrapping */
    width: 100%; /* Full width */
    flex-grow: 1; /* Allow the container to grow */
}

.thumbnail {
    margin: 10px; /* Space between thumbnails */
    text-align: center; /* Center text under thumbnails */
    cursor: pointer; /* Indicate clickable */
}

.thumbnail img {
    width: 150px; /* Thumbnail width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners */
}

.image-container {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    overflow: auto; /* Allow scrolling if needed */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}

.image-container img {
    width: 100%; /* Fit to window width */
    height: auto; /* Maintain aspect ratio */
    max-height: 90vh; /* Max height to prevent overflow */
    margin: 5px 0; /* Space between images */
    object-fit: contain; /* Maintain aspect ratio */
}