body {
    margin: 0;
    overflow: hidden; /* Hide scrollbars caused by falling emojis */
    background-color: #fce4ec; /* A light pink background, adjust as you like */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

.container {
    position: relative; /* For positioning emojis */
    text-align: center;
}

.message {
    font-size: 3em; /* Adjust size as needed */
    color: #e91e63; /* A vibrant pink, adjust as you like */
    z-index: 10;
    position: relative; /* To ensure it's above the emojis if they overlap */
    background-color: rgba(255, 255, 255, 0.7); /* Slight white background for readability */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.emoji {
    position: fixed; /* Changed from absolute to fixed for full viewport positioning */
    font-size: 2em; /* Default size, can be randomized by JS */
    user-select: none;
    z-index: 1; /* Behind the message */
    /* Animation will be handled by JS for individual falling, not a continuous CSS animation loop */
    /* remove: animation: fall linear infinite; */
    /* Initial opacity, JS will handle fade-in/out if desired */
    opacity: 1; 
    pointer-events: none; /* Emojis should not be interactive */
}

/* The @keyframes fall can be removed if JS handles all animation aspects,
   or modified if we want a CSS transition for the fall itself.
   For simplicity with JS controlling duration and removal, let's remove it for now. */
/* 
@keyframes fall {
    0% {
        transform: translateY(-10vh) rotate(0deg); 
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg); 
        opacity: 0;
    }
}
*/