/*  Background  */

.starry-background {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 0;
    width: 100vw;
    height: 100vh;
}

.starry-background::before {
    content: "";
    background: radial-gradient(ellipse at bottom right, var(--starry-bg-color) 0%, #000 125%);
    position: absolute;
    z-index: -3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.starry-background::after {
    content: "";
    position: absolute;
    z-index: -2;
    background: linear-gradient(-45deg, transparent -5%, #f18f011b 0%, #7f49cb0f 50%, transparent 80%);
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 5px rgba(0,0,0, 0.5));
}


.starry-background .stars
{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
}
.starry-background .stars .star
{
    position: absolute;
    background-color: var(--color);
    border-radius: 50%;
    opacity: var(--opacity);
    width: var(--size);
    height: var(--size);
    box-shadow: var(--box-shadow);
    opacity: calc(var(--opacity) * 0.25);
    transform: scale(0.75);
    will-change: transform, opacity;
}

@keyframes twinkleFromCenter {
    5%, 95% {
        opacity: calc(var(--opacity) * 0.25);
        transform: scale(0.75);
    }
    45%, 55% {
        opacity: var(--opacity);
        transform: scale(1.25);
    }
}