/* ========== Body & animated stars ========== */

body {
    display: flex;
    flex-direction: column;
    background:
            radial-gradient(ellipse at 20% 30%, rgba(94, 34, 0, 0.35), transparent 60%),
            radial-gradient(ellipse at 80% 70%, rgba(0, 18, 90, 0.35), transparent 60%),
            radial-gradient(ellipse at 50% 50%, rgba(67, 0, 32, 0.25), transparent 70%),
            linear-gradient(180deg, #000000 0%, #020222 40%, #000000 100%);
    margin: 0;
    font-family: "Electrolize", monospace;
    color: white;
    font-size : clamp(1.5rem, 1vw, 3rem);
    background-attachment: fixed;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
            radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
            radial-gradient(2px 2px at 120px 80px, #ffb5b5 50%, transparent 51%),
            radial-gradient(1px 1px at 200px 200px, #fff 50%, transparent 51%),
            radial-gradient(2px 2px at 340px 140px, #9effd8 50%, transparent 51%),
            radial-gradient(1px 1px at 50px 300px, #afffa9 50%, transparent 51%),
            radial-gradient(2px 2px at 400px 40px, #fff 50%, transparent 51%),
            radial-gradient(2px 2px at 60px 90px, #b6afff 50%, transparent 51%),
            radial-gradient(1px 1px at 190px 150px, #fff 50%, transparent 51%),
            radial-gradient(2px 2px at 300px 50px, #efc7ff 50%, transparent 51%),
            radial-gradient(1.5px 1.5px at 260px 260px, #fff 50%, transparent 51%);

    background-size: 400px 400px;
    animation: stars 40s linear infinite;
    opacity: 0.95;
    mix-blend-mode: screen;
}

main{
    flex: 1;
}


@keyframes stars {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 -800px;
    }
}