html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#020617;
    font-family:Segoe UI,Arial,sans-serif;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode:soft-light;
    opacity:.12;
    z-index:20;
}

#scene{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}

#particles{
    position:fixed;
    inset:0;
    z-index:5;
    pointer-events:none;
}

.p{
    position:absolute;
    width:2px;
    height:2px;
    border-radius:50%;
    background:#67e8f9;
    box-shadow:0 0 8px rgba(103,232,249,.45);
    opacity:.12;
    animation:rise linear infinite;
}

@keyframes rise{
    0%{
        transform:translateY(110vh) scale(.8);
        opacity:0;
    }
    15%{
        opacity:.22;
    }
    85%{
        opacity:.18;
    }
    100%{
        transform:translateY(-15vh) scale(1.15);
        opacity:0;
    }
}

.vignette{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:15;
    background:
        radial-gradient(circle at center, transparent 0%, rgba(2,6,23,0.1) 40%, rgba(2,6,23,0.72) 100%);
}

.footer{
    position:fixed;
    bottom:18px;
    left:0;
    width:100%;
    text-align:center;
    color:#475569;
    letter-spacing:3px;
    font-size:11px;
    z-index:25;
    user-select:none;
}