html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden; /* To hide stars that go off-screen */
    color: white; /* Default text color for better visibility */
    font-family: 'Arial', sans-serif; /* Basic font */
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure it covers the full viewport height */
    pointer-events: none; /* Make sure stars don't interfere with other elements */
    z-index: -1;
    /* The box-shadows for stars will be removed as they will be generated by JS */
}

/* Individual star style will be applied by JS or a generic star class */
.star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    /* Animation will be applied to individual stars for movement */
    animation-name: animStar;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        /* Adjust this value based on how far you want stars to travel before looping */
        /* Should be at least the height of the star container + screen height */
        transform: translateY(-100vh); 
    }
}

/* We might not need ::before and ::after if all stars are individual divs */