/* Stars Container in Content Area */
.content-stars-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Individual star dots */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    animation: flicker var(--flicker-duration, 4s) ease-in-out infinite;
    animation-delay: var(--flicker-delay, 1s);
    opacity: 0.8;
    border-radius: 50%;
    background-color: var(--bold-bright);
}

/* Flickering animation for stars */
@keyframes flicker {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}