/* Page background (fixed or optional gradient) */

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  height: 100vh;
  overflow-x: hidden;
  background: url('https://summerinndreamland.neocities.org/images/upscaled_2x_n%20a%20t%20u%20r%20e%20%20p%20h%20o%20t%20o%20g%20r%20a%20p%20h%20y.jpg') repeat;
  background-size: cover;
 
   animation: floatBackground 12s ease-in-out infinite alternate;
}

@keyframes floatBackground {
  0% {
    background-position: center center;
    transform: scale(1);
  }
  25% {
    background-position: 52% 48%;
    transform: scale(1.02);
  }
  50% {
    background-position: 48% 52%;
    transform: scale(1.03);
  }
  75% {
    background-position: 50% 49%;
    transform: scale(1.02);
  }
  100% {
    background-position: center center;
    transform: scale(1);
  }
}

@keyframes moveBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 0;
  }
}

/* Card styles */
.magic-card {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  padding: 30px 50px;
  border-radius: 20px;
  width: 420px;
  margin: 100px auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  z-index: 10; /* stays above falling elements */
}

.magic-card-title {
  font-family: 'Cursive', sans-serif;
  font-size: 2rem;
  color: #1a2d5c;
  margin-bottom: 20px;
}

.magic-text {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Button */
#magic-next-btn {
  padding: 14px 36px;
  font-size: 1.1rem;
  color: #fff;
  background-color: #a8e6a1; /* pastel green */
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#magic-next-btn:hover {
  background-color: #8dd78d;
  transform: translateY(-2px);
}
.butterfly {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  background-image: url('butterfly.png'); /* transparent PNG */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  animation: butterflyFly 30s linear infinite;
  filter: drop-shadow(0 0 8px rgba(180, 255, 200, 0.6));
}

@keyframes butterflyFly {
  0%   { transform: translate(0px, 0px) rotate(360deg); }
  10%  { transform: translate(30px, -60px) rotate(0deg); }
  20%  { transform: translate(-40px, 25px) rotate(-10deg); }
  30%  { transform: translate(50px, -30px) rotate(30deg); }
  40%  { transform: translate(-30px, -30px) rotate(-15deg); }
  50%  { transform: translate(20px, 40px) rotate(10deg); }
  60%  { transform: translate(-25px, 25px) rotate(-5deg); }
  70%  { transform: translate(35px, -25px) rotate(18deg); }
  80%  { transform: translate(-40px, 30px) rotate(-40deg); }
  90%  { transform: translate(30px, -15px) rotate(39deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
.butterfly2 {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  background-image: url('butterfly.png'); /* transparent PNG */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(20%, 60%);
  animation: butterflye 25s linear infinite;
  filter: drop-shadow(0 0 8px rgba(180, 255, 200, 0.6));
}
@keyframes butterflye {
  0%   { transform: translate(120px, 24px) rotate(120deg); }
  10%  { transform: translate(24px, 90px) rotate(14deg); }
  20%  { transform: translate(90px, 15px) rotate(-10deg); }
  30%  { transform: translate(15px, -39px) rotate(30deg); }
  40%  { transform: translate(-39px, -70px) rotate(-28deg); }
  50%  { transform: translate(-70px, 10px) rotate(25deg); }
  60%  { transform: translate(-70px, 130px) rotate(-13deg); }
  70%  { transform: translate(130px, 145px) rotate(18deg); }
  80%  { transform: translate(145px, 30px) rotate(-40deg); }
  90%  { transform: translate(30px, -7px) rotate(60deg); }
  100% { transform: translate(-7px, 120px) rotate(50deg); }
}