*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

body{
    background:
        radial-gradient(circle at center,
        #050505 0%,
        #000 45%,
        #000 100%);
}

canvas{
    display:block;
    width:100%;
    height:100%;

    filter:
        contrast(1.15)
        saturate(1.1)
        brightness(1.02);
}

/* cinematic vignette */

.vignette{
    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(circle,
        transparent 25%,
        rgba(0,0,0,0.35) 60%,
        rgba(0,0,0,0.96) 100%);
}

/* film grain */

.grain{

    position:fixed;
    inset:0;

    pointer-events:none;

    opacity:.035;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* HUD */

.info{

    position:fixed;

    left:30px;
    bottom:30px;

    color:rgba(190,220,255,.55);

    font-family:monospace;
    font-size:11px;

    line-height:1.8;
    letter-spacing:2px;

    pointer-events:none;

    text-shadow:
        0 0 8px rgba(120,180,255,.3);
}
.blackhole-wrapper{
    position:fixed;
    inset:0;
    overflow:hidden;
    background:#000;
}