.photo-container {
    float: left; /* Aligns the photo to the left */
    margin-right: 20px; /* Adds spacing between the photo and text */
    width: 200px; /* Sets the photo width */
    border: 2px solid #ccc; /* Adds a border around the photo */
    border-radius: 10px; /* Rounds the corners of the photo and border */
    padding: 5px; /* Padding inside the border */
    box-sizing: border-box; /* Includes padding and border in width and height */
}
.photo-container img {
    width: 100%; /* Ensures the image fills the container */
    height: auto; /* Maintains the aspect ratio of the image */
    border-radius: 8px; /* Rounds the corners of the image */
}
.photo-caption {
    text-align: center; /* Centers the caption text */
    font-style: italic; /* Italicizes the caption */
    color: #666; /* Sets the color of the caption */
    margin-top: 5px; /* Adds space between the image and caption */
}

.popup-link {
    cursor: pointer;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5em;
    color: #000;
    z-index: 1050; /* Ensure it is above other content */
    background-color: #fff; /* Make it stand out */
    padding: 5px;
    border-radius: 50%; /* Optional: Makes it round */
}

/* specific to certain pages only */
#charlieInfo {
    position: relative; /* Ensures that the close button positions itself relative to this container */
}