.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #0a192f, #20314f);
    z-index: 0;
}

.content-container {
    position: relative;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    z-index: 1;
}

.text {
    font-family: Arial, sans-serif;
    font-size: 4rem;
    color: white;
    font-weight: bold;
    z-index: 2;
}

.star {
    position: absolute;
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    width: 8px;
    height: 8px;
}

.star-small {
    width: 4px;
    height: 4px;
}

.star-large {
    width: 10px;
    height: 10px;
}

@keyframes twinkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.2; transform: scale(0.8); }
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    20% { opacity: 1; }
    100% {
        transform: translateX(300px) translateY(300px);
        opacity: 0;
    }
}

.shooting-star {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    transform-origin: left center;
}

.shooting-star::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 1px;
    background: linear-gradient(to left, #ffffff, transparent);
    transform: translateX(-100%) rotate(45deg);
    transform-origin: right center;
}

.shooting-star::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
}

.nebula {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.nebula-1 {
    background: radial-gradient(
        circle at 30% 50%,
        rgba(147, 112, 219, 0.15) 0%,
        rgba(138, 43, 226, 0.08) 40%,
        transparent 70%
    );
}

.nebula-2 {
    background: radial-gradient(
        circle at 70% 30%,
        rgba(72, 61, 139, 0.15) 0%,
        rgba(106, 90, 205, 0.08) 40%,
        transparent 70%
    );
}