/* ===== Body ===== */
body {
  background-image: url(https://i.pinimg.com/originals/0f/3d/10/0f3d10c5aad2ee67a4fff5720d7f84b2.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "Helvetica Narrow", Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  cursor: url("https://i.pinimg.com/originals/17/af/05/17af05530b853eb79ede138420261b36.gif"), auto;
}

/* ===== Container ===== */
.container { width: 100%; padding: 15px; margin: 0 auto; }
.image-container { text-align: center; }
.image-container .w3-text-white p { color: #f590d3; }

/* ===== Buttons ===== */
button {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  background: #ff7eb9;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s, box-shadow 0.2s;
  outline: none;
  box-shadow: 0 0 15px #ff5f99;
}
button:hover { background: #ff5f99; box-shadow: 0 0 25px #ff7eb9; }
button:focus { outline: none; }

/* ===== Flex Layout ===== */
.main-flex {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.left-column { display: flex; flex-direction: column; gap: 20px; flex: 1.5; }
.right-column { display: flex; flex-direction: column; gap: 20px; flex: 1; margin-top: 30px; }

/* ===== Huge Boxes ===== */
.huge-box {
  position: relative;
  margin: 30px auto;
  width: 100%;
  max-width: 500px;
  height: 300px;
  border-radius: 15px;
  box-shadow: 0 0 25px #ff7eb9;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 22px;
  padding: 20px;
  background-size: cover;
  background-position: center;
}
#box2 { margin-top: -30px; }
.huge-title { font-family: 'Garamond', serif; font-size: 30px; font-style: italic; margin-bottom: 15px; }
.huge-text { font-family: 'Helvetica Narrow', Arial, sans-serif; font-size: 11px; font-style: italic; line-height: 1.4; }

/* ===== Scroll Boxes ===== */
.scroll-box {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
  padding: 1rem;
  border-radius: 12px;
  color: white;
  font-family: "Roboto", sans-serif;
  box-shadow: 0 0 20px #ff7eb9, 0 0 40px #ff5f99;
  background-size: cover;
  background-position: center;
}
#container1 { background-image: url("https://i.pinimg.com/736x/df/07/fb/df07fb6711cc7d7bb4fe8f2d0e837eba.jpg"); color: #000; font-family: "Garamond", serif; }
#container2 { background-image: url("https://i.pinimg.com/736x/6e/d3/b9/6ed3b9f7090b16a1e2c4e9a0a4e069bf.jpg"); color: #FCFCFC; font-family: "Georgia", serif; }
#container3 { background-image: url("https://i.pinimg.com/1200x/d0/5e/71/d05e71001eaa8b042fdf555340fe8c1e.jpg"); color: #000; font-family: "Garamond", serif; }
#container4 { background-image: url("https://i.pinimg.com/1200x/e4/c2/ae/e4c2ae71ce0cb7ccc3fa62341fb1bec1.jpg"); color: #FCFCFC; font-family: "Georgia", serif; }

/* ===== Popups ===== */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(255, 255, 255, 0.95); /* slight transparency for aesthetics */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  width: 300px;      /* make sure width is consistent */
  max-width: 90%;    /* responsive */
  text-align: center;
  transition: all 0.3s ease;
  z-index: 10;
}
.popup.active {
  display: block;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== Overlay ===== */
.overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(4, 4, 4, 0.4);
  z-index: 5;
}
.overlay.active { display: block; }

/* ===== Cursor Floaters ===== */
.cursor-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
  width: 50px;
  height: auto;
}