/* The popup modal banner (background) */
.popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The popup modal banner content */
.popup-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    
    /* Resize and center the popup-content based on the image size */
    width: auto; /* Adjust width to image width */
    height: auto; /* Adjust height to image height */
    max-width: 90%; /* Limit width to viewport */
    max-height: 90%; /* Limit height to viewport */
    position: fixed; /* Fixed position */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust position based on size */
    overflow: auto;
}

/* The image inside the popup-content */
.popup-content img {
    max-width: 100%; /* Limit image width to viewport */
    max-height: 100%; /* Limit image height to viewport */
    object-fit: contain; /* Scale image down while preserving aspect ratio */
    object-position: center; /* Position image at the center of the container */
}

/* The close button */
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}