/* FONDO GENERAL */
.space-bg{
    position:fixed;
    inset:0;
    z-index:-999;
    overflow:hidden;
	pointer-events: none;
    background:
    radial-gradient(circle at 20% 30%, rgba(0,150,255,.15), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(0,100,255,.15), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(0,80,180,.12), transparent 50%),
    #020817;
}

/* NEBULOSA */
.space-bg .nebula{
    position:absolute;
    inset:-20%;
	pointer-events: none;
    background:
    radial-gradient(circle at 25% 40%, rgba(0,120,255,.2), transparent 35%),
    radial-gradient(circle at 75% 60%, rgba(0,180,255,.15), transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(0,80,255,.12), transparent 35%);

    filter:blur(80px);

    animation:
    nebulaMove 40s linear infinite alternate;
}

/* ESTRELLAS */
.space-bg .stars,
.space-bg .stars2,
.space-bg .stars3{
    position:absolute;
    inset:0;
    background-repeat:repeat;
}

.space-bg .stars{
    background-image:
    radial-gradient(#fff 1px, transparent 1px);
    background-size:150px 150px;

    animation:
    twinkle 5s ease-in-out infinite,
    drift 120s linear infinite;
}

.space-bg .stars2{
    background-image:
    radial-gradient(#8fdcff 1px, transparent 1px);
    background-size:250px 250px;

    opacity:.6;

    animation:
    twinkle 8s ease-in-out infinite,
    drift 180s linear infinite reverse;
}

.space-bg .stars3{
    background-image:
    radial-gradient(#ffffff 2px, transparent 2px);
    background-size:400px 400px;

    opacity:.4;

    animation:
    twinkle 10s ease-in-out infinite,
    drift 240s linear infinite;
}

/* ANIMACIONES */

@keyframes twinkle{
    0%,100%{
        opacity:.5;
    }
    50%{
        opacity:1;
    }
}

@keyframes drift{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-400px);
    }
}

@keyframes nebulaMove{
    from{
        transform:translate(-3%, -2%) scale(1);
    }
    to{
        transform:translate(3%, 2%) scale(1.1);
    }
}