body.dark {
    background-color: var(--dark); 
    color: var(--white); 
}

.scene-wrapper {
    position: fixed;

    width: 100vw;
    height: 100vh;

    z-index: -2;
}

.layer {
    width: 100%;
    height: 200%;
}

.stars-near {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 150px 70px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 80px 160px, rgba(255,255,255,0.5), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 250px 220px, #fff, rgba(0,0,0,0));
    background-repeat: repeat; background-size: 300px 300px;
    animation: stars 100s linear infinite;
}
.stars-far {
    background-image: 
        radial-gradient(1.2px 1.2px at 40px 80px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 190px 40px, rgba(255,255,255,0.4), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 300px 180px, rgba(255,255,255,0.6), rgba(0,0,0,0));
    background-repeat: repeat; background-size: 400px 400px;
    animation: stars 150s linear infinite reverse;
}
@keyframes stars {
    from {
        transform: translate3d(0,0,0);
    } to {
        transform: translate3d(0, -1000px, 0);
    }
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
}
.emphasis {
    background: rgba(255, 255, 255, 0.02);

    width: 50vw;
    height: 50vw;
    top: 10%;
    left: -10%;
}
.subtle {
    background: rgba(255, 255, 255, 0.015);

    width: 40vw;
    height: 40vw;
    top: 50%;
    right: -10%;
}