/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.page-one, .page-two {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.page-one { background-image: url('meat.png'); }
.page-two { background-image: url('black.jpg'); }


.main-overlay {
  background-color: rgba(255, 255, 255, 1); /* White with 80% opacity */
  width: 60%; /* Or set a fixed pixel width like 500px */
  margin: 50px auto; /* Centers the box */
  padding: 20px;
  border-radius: 0px; /* Optional: rounds the corners */
  color: black;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.5); /* Optional: adds a shadow */
}

.content-image {
  width: 30%; /* Scales image to 50% of the parent element */
  height: auto; /* Maintains aspect ratio */
}

.main-overlay img {
  max-width: 100%;  /* Don't go wider than the box */
  max-height: 100%; /* Don't go taller than the box */
  height: auto;     /* Keep proportions so it doesn't look squished */
  display: block;   /* Removes weird tiny gaps at the bottom */
}

.comic-strip {
  display: flex;
  flex-direction: column; /* Stacks images vertically */
  align-items: center;    /* Centers them horizontally */
  max-width: 800px;       /* Set a comfortable reading width */
  margin: 0 auto;         /* Centers the entire strip on the page */
}

.comic-strip img {
  width: 100%;            /* Makes images fill the 800px width */
  height: auto;           /* Keeps the original image proportions */
  display: block;         /* Removes tiny gaps between panels */
}