@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

.star {
    position: fixed !important; /* Fixed ensures they ignore container boundaries */
    top: -50px;
    z-index: -1 !important;
    pointer-events: none;
    /* We removed the duration here because the JS handles it now */
    animation-name: animate;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.star::before {
    content: '\f005' !important; 
    font-family: "Font Awesome 6 Free", "serif" !important;
    font-weight: 900 !important;
    color: #FFD700 !important; 
    text-shadow: 0 0 5px #FFF700, 0 0 10px #FFAA00 !important;
    display: inline-block !important;
    -webkit-text-fill-color: #FFD700 !important;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0; /* Start invisible for a smoother entrance */
    }
    10% {
        opacity: 1; /* Fade in quickly at the top */
    }
    80% {
        opacity: 1; /* Stay solid through most of the fall */
    }
    100% {
        /* Falling slightly past the bottom (110% of viewport height) */
        transform: translateY(110vh) rotate(360deg);
        opacity: 0; /* Fade out right before deletion */
    }
}