/* 1. Base Element Styles */
html { 
  background-color: pink; 
}

h1, figcaption { 
  text-align: center; 
}

p { 
  text-align: center; 
  width: 500px; 
  margin: 20px auto; 
  border: 2px solid black; 
}

a { 
  display: table; 
  margin: 0 auto; 
}

/* 2. Fix: Remove 'display: block' from global img so flexbox works */
img { 
  max-width: 100%;
  height: auto;
}

.normalpic { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 30%; 
}

/* 3. Fix: Changed 'class' to '.image-container' and added a gap */
.image-container { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 20px; /* Adds space between the two images */
  width: 100%; /* Ensures it spans the full screen width */
}

/* 4. Image behavior inside the flex container */
.image-container img { 
  flex: 1 1 calc(50% - 10px); 
  width: 45%; /* Explicit width to keep them balanced */
}

/* 5. Zoom Specific Styles (Optional, based on your original code) */
.zoom-img { 
  transition: transform 0.3s ease; 
}

.zoom-img:hover { 
  transform: scale(1.2); 
}
img:not(.image-container img) { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 40%; 
}

/* 6. Responsive design for mobile */
@media (max-width: 600px) { 
  .image-container {
    flex-direction: column; /* Stacks the items vertically on mobile */
  }
  .image-container img { 
    width: 100%;
  } 
}

/* 1. Container wraps both iframes */
.video-container {
  display: flex;
  justify-content: center; /* Centers iframes horizontally */
  align-items: center;     /* Centers iframes vertically if heights differ */
  gap: 20px;               /* Adds space between the iframes */
  max-width: 1200px;       /* Prevents the videos from getting excessively huge */
  margin: 30px auto;       /* Centers the entire container on your webpage */
  padding: 0 15px;         /* Prevents edge clipping on medium screens */
}

/* 2. Individual styling for each iframe */
.video-container iframe {
  flex: 1 1 45%;           /* Allows them to grow and shrink evenly */
  max-width: 560px;        /* Limits max size so they stay sharp */
  aspect-ratio: 16 / 9;    /* Maintains perfect video proportions */
  width: 100%;             /* Fills the allocated flex space */
  border: none;            /* Removes default ugly border */
}

/* 3. Mobile stacking behavior */
@media (max-width: 800px) {
  .video-container {
    flex-direction: column; /* Forces iframes to stack under each other */
  }
  .video-container iframe {
    max-width: 100%;       /* Allows iframes to fill mobile width safely */
  }
}