body{
    background-color: #090A0F;
}

.nebula {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
	background: linear-gradient(-45deg, #ee765231, #e73c7e31, #23a5d531, #23d5ab2d);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.field::before, .field::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #1B2735 0%, transparent 100%);
    animation: fadeGradient 10s ease-in-out infinite;
    opacity: 0;
}

.field::after {
    background: radial-gradient(ellipse at center, #381641 0%, transparent 100%);
    animation-delay: 5s;
}

@keyframes fadeGradient {
    0%, 100% { opacity: 0; }
    25%, 75% { opacity: 1; }
}


.stars,
.stars::before,
.stars::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Small stars */
.stars::before {
    background-image:
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #eee, transparent),
        radial-gradient(1px 1px at 190px 90px, #fff, transparent),
        radial-gradient(1px 1px at 230px 20px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 270px 110px, #eee, transparent),
        radial-gradient(1px 1px at 320px 50px, #fff, transparent),
        radial-gradient(1px 1px at 350px 140px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 380px 80px, #eee, transparent),
        radial-gradient(1px 1px at 420px 170px, #fff, transparent),
        radial-gradient(1px 1px at 470px 30px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 520px 120px, #eee, transparent);
    background-repeat: repeat;
    background-size: 850px 220px;
    animation: twinkle-1 3s ease-in-out infinite alternate;
}

/* Medium and large stars */
.stars::after {
    background-image:
        radial-gradient(3px 3px at 50px 60px, #fff, transparent),
        radial-gradient(4px 4px at 120px 20px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 200px 100px, #fff, transparent),
        radial-gradient(3px 3px at 280px 140px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(4px 4px at 360px 40px, #fff, transparent),
        radial-gradient(2px 2px at 440px 180px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 520px 80px, #fff, transparent),
        radial-gradient(4px 4px at 600px 160px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 680px 20px, #fff, transparent),
        radial-gradient(3px 3px at 760px 120px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 570px 60px, #fff, transparent),
        radial-gradient(1px 1px at 620px 190px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 670px 40px, #eee, transparent),
        radial-gradient(1px 1px at 720px 130px, #fff, transparent),
        radial-gradient(1px 1px at 770px 70px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 820px 200px, #eee, transparent);
    background-repeat: repeat;
    background-size: 800px 200px;
    animation: twinkle-2 5s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle-1 {
    0% {
        opacity: 0.3;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }

    75% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes twinkle-2 {
    0% {
        opacity: 0.3;
    }

    30% {
        opacity: 0.8;
    }

    60% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes twinkle-3 {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 0.3;
    }

    60% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.5;
    }
}


@keyframes nebula-1 {
    0% {
    background-image:
        radial-gradient(ellipse, #1B2735 0%, #00000000 100%);
    }

    25% {
    background-image:
        radial-gradient(ellipse, #642949 0%, #00000000 100%);
    }

    50% {
    background-image:
        radial-gradient(ellipse, #5d236b 0%, #00000000 100%);
    }

    75% {
    background-image:
        radial-gradient(ellipse, #685022 0%, #00000000 100%);
    }

    100% {
    background-image:
        radial-gradient(ellipse, #351f1b 0%, #00000000 100%);
    }
}