@charset "UTF-8";

.sakura-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 50; /* Ensure it's above the background but below important text if needed, or above everything */
}

.sakura {
  position: absolute;
  top: -10%;
  background-color: #ffd7e6; /* Pale pink */
  border-radius: 100% 0 100% 0;
  opacity: 0.6;
  animation: fall linear forwards, sway ease-in-out infinite alternate;
}

@keyframes fall {
  0% {
    top: -10%;
    transform: rotate(0deg);
  }
  100% {
    top: 100%;
    transform: rotate(360deg);
  }
}

@keyframes sway {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 50px;
  }
}