body {
    margin: 0;
    font-family: 'Garamond', 'Times New Roman', Times, serif;
    height: 100vh;
    overflow: hidden; /* Prevent body scroll */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content */
    
}

header {
    position: absolute; /* Keep it absolute for fixed positioning */
    top: 10px; /* Position from the top */
    left: 50%; /* Position to the center */
    transform: translateX(-50%); /* Translate left by 50% of its own width to center it */
    z-index: 1;
    
    padding: 10px 20px;
    text-align: left; /* Align text to the left */
    border-radius: 5px; /* Rounded corners */
    
}

.container {
    position: absolute; /* Change to absolute positioning */
    top: 100px; /* Position below the header */
    left: 0; /* Align left */
    right: 0; /* Align right */
    height: calc(100vh - 100px); /* Full height minus the header height */
    overflow: hidden; /* Hide overflow */
    display: flex;
    justify-content: center; /* Center the gallery */
    align-items: flex-start; /* Align at the top */
}

.gallery {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    overflow-y: auto; /* Enable vertical scrolling */
    scroll-behavior: smooth; /* Smooth scrolling */
    height: 100%; /* Full height of the container */
    scrollbar-width: none; /* For Firefox */
}

.gallery::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.image-pair {
    display: flex;         /* Arrange images in pairs */
    justify-content: center; /* Center pairs horizontally */
    margin-bottom: 10px;  /* Space between pairs */
}

.image-pair img {
    width: 100%;          /* Make images take the full width of their container */
    max-width: 300px;     /* Set a maximum width for images */
    height: 200px;       /* Set a fixed height for images */
    object-fit: cover;    /* Cover the image without distortion */
    padding: 0;           /* Remove padding if any */
    margin-right: 5px;   /* Add space between images in a pair */
    transition: transform 0.3s; /* Add a transition effect */
}



.image-pair img:last-child {
    margin-right: 0;      /* Remove right margin for the last image in the pair */
}

/* Responsive Styles */
@media (max-width: 600px) {
    .image-pair {
        flex-direction: column; /* Stack images vertically on small screens */
        align-items: center; /* Center align */
    }
    
    .image-pair img {
        margin-right: 0; /* Reset margin */
        margin-bottom: 5px; /* Space between stacked images */
    }
}