/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Background with Increased Opacity */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.rose-petals {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5; /* Increased opacity */
}

/* Balloon Styles */
.balloons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.balloon {
  position: absolute;
  bottom: -100px;
  width: 80px; /* Larger size */
  height: 100px; /* Fuller shape */
  background: #ff6f61; /* Default color */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Teardrop shape */
  animation: floatBalloon 8s linear infinite; /* Use linear timing function */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Balloon Colors */
.balloon1 { background: #ff6f61; } /* Red */
.balloon2 { background: #6f61ff; } /* Blue */
.balloon3 { background: #61ff6f; } /* Green */
.balloon4 { background: #ffd166; } /* Yellow */
.balloon5 { background: #ff61a6; } /* Pink */
.balloon6 { background: #ff6f61; } /* Red */
.balloon7 { background: #6f61ff; } /* Blue */
.balloon8 { background: #61ff6f; } /* Green */

/* Balloon Shine */
.balloon::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 30%;
  height: 20%;
  background: rgba(255, 255, 255, 0.5); /* Shine effect */
  border-radius: 50%;
  transform: rotate(-30deg);
}

/* Balloon Thread */
.balloon::after {
  content: '';
  position: absolute;
  bottom: -50px; /* Longer thread */
  left: 50%;
  width: 2px;
  height: 50px;
  background: #fff; /* White thread */
  transform: translateX(-50%);
}

/* Balloon Animation */
@keyframes floatBalloon {
  0% { transform: translateY(100vh) rotate(0deg); } /* Start below the viewport */
  100% { transform: translateY(-100vh) rotate(0deg); } /* Move above the viewport */
}

/* Spread Balloons Across the Screen */
.balloon1 { left: 10%; animation-duration: 10s; }
.balloon2 { left: 25%; animation-duration: 12s; }
.balloon3 { left: 40%; animation-duration: 9s; }
.balloon4 { left: 55%; animation-duration: 11s; }
.balloon5 { left: 70%; animation-duration: 8s; }
.balloon6 { left: 85%; animation-duration: 10s; }
.balloon7 { left: 20%; animation-duration: 13s; }
.balloon8 { left: 35%; animation-duration: 7s; }

/* Container for Content */
.container {
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

/* Slideshow Styles */
.slideshow {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid #fff;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* Message and Button Styles */
h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  animation: fadeIn 2s ease-in-out;
}

.message {
  font-size: 1.5rem;
  margin: 20px 0;
  animation: fadeIn 3s ease-in-out;
}

button {
  padding: 10px 20px;
  font-size: 1.2rem;
  background: #ff6f61;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #ff3b2f;
}

.hidden {
  display: none;
}

video {
  width: 80%;
  max-width: 600px;
  margin-top: 20px;
  border-radius: 10px;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}