html, body {
    height: 100%;
}
 
body {
    background: radial-gradient(ellipse at bottom, #151843 0%, #221c4d 100%);/* cambia los colores hex aca para matchear tu banner*/
    margin: 0;
}
 
#stars-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
 
#stars, #stars2, #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    animation-name: animStar;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
#stars {
    width: 1px;
    height: 1px;
    box-shadow: var(--shadows-small);
    animation-duration: 50s;
}
 
#stars::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: var(--shadows-small);
}
 
#stars2 {
    width: 2px;
    height: 2px;
    box-shadow: var(--shadows-medium);
    animation-duration: 100s;
}
 
#stars2::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: var(--shadows-medium);
}
 
#stars3 {
    width: 3px;
    height: 3px;
    box-shadow: var(--shadows-big);
    animation-duration: 150s;
}
 
#stars3::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: var(--shadows-big);
}
 
@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}