/* 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." */
/* Reset + Background */

body {
  margin: 0;
  padding: 0;
  background-color: #280800;
  font-family: "Charm", cursive;
  color: #D47C7C;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px; /* space between image row and center box */
  /* padding-top removed to avoid pushing all content down */
}

/* Image Row */
.image-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 70px;
  margin-top: 80px; /* moves images down */
}

.image-row img {
  width: 570px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transition: transform 1s ease, box-shadow 1s ease, filter 1s ease;
}

/* Dreamy Hover Effect */
.image-row img:hover {
  transform: scale(1.04) translateY(-8px);
  box-shadow: 0 0 35px rgba(255, 230, 200, 0.4);
  filter: brightness(1.05) saturate(1.1);
}

/* Center Box */
.center-box {
  position: relative;
  text-align: center;
  padding: 40px 20px;
  margin-top: -100px; /* moves title and paragraphs up */
}

/* Title */
h1 {
  font-family: "Imperial Script", cursive;
  font-size: 280px;
  margin-bottom: 20px;
  color: #D47C7C;
  position: relative;
  display: inline-block;
}

/* Paragraphs */
p {
  font-family: "Charm", cursive;
  font-size: 3.4em;
  line-height: 1.6;
  margin: 10px 0;
  color: #D47C7C;
}

/* Make images act like buttons */
.image-button {
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-button:hover {
  transform: scale(1.04);
  box-shadow: 0 0 35px rgba(255, 230, 200, 0.4);
}