style.css

body {
  margin: 0;
  background: #ffe6f2;
  overflow: hidden;
  font-family: cursive;
  text-align: center;
}

/* Message container */
.container {
  margin-top: 80px;
}

h1 {
  font-size: 2.5rem;
  color: #ff1493;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 5px #ff69b4; }
  to { text-shadow: 0 0 20px #ff1493, 0 0 30px #ff69b4; }
}


.candle {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 40px;
  background: white;
  border-radius: 3px;
}

.flame {
  width: 15px;
  height: 25px;
  background: orange;
  border-radius: 50%;
  margin: 0 auto;
  animation: flicker 0.2s infinite alternate;
}

@keyframes flicker {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.2); opacity: 0.7; }
}

/* Characters */
.character {
  position: absolute;   /* changed from relative */
  top: 50%;             /* center vertically */
  transform: translateY(-50%);
  width: 200px;
}

/* Krishna comes from right */
.krishna {
  right: -250px;   /* start off-screen from right */
  animation: krishnaWalk 6s forwards ease-in-out;
}

/* Radha comes from left */
.radha {
  left: -250px;    /* start off-screen from left */
  animation: radhaWalk 6s forwards ease-in-out;
}

/* Krishna holding cake */
.krishna::after {
  content: "";
  position: absolute;
  bottom: 40px; /* adjust to Krishna’s hand */
  left: -30px;
  width: 80px;
  height: 80px;
  background: url('cake.png') no-repeat center/contain;
}

/* Animations */
@keyframes krishnaWalk {
  to {
    right: 55%;   /* stop earlier (more to the left side) */
    transform: translateY(-50%);
  }
}

@keyframes radhaWalk {
  to {
    left: 55%;    /* stop earlier (more to the right side) */
    transform: translateY(-50%);
  }
}