#popup {
    position: fixed;
    top: 15%; /* Centers the popup vertically */
    left: 15%; /* Centers the popup horizontally */
    width: 80%; /* Covers 70% of the screen width */
    height: 80%; /* Covers 70% of the screen height */
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1001; /* Ensures it's above the overlay */
    display: none; /* Initially hidden */
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevents content from overflowing the box */
}

#popup img {
    max-width: 100%; /* Ensures the image doesn't exceed the popup's width */
    max-height: 100%; /* Ensures the image doesn't exceed the popup's height */
    display: block; /* Removes inline space below the image */
    margin: auto; /* Centers the image inside the popup */
    object-fit: contain; /* Keeps the image aspect ratio intact */
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent black background */
    z-index: 1000; /* Below the popup */
    display: none; /* Initially hidden */
}