body
{
    background-color:black;
}

.starfield
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    animation: fadein 10s ease-out forwards;
}

.star
{
    position: absolute;
    background: #00ffff;
    border-radius: 50%;
}

.glow-1
{
    opacity: 0.3;
    box-shadow: 0 0 1px #00ffff;
    animation: twinkle 3s infinite ease-in-out;
}

.glow-2
{
    opacity: 0.6;
    box-shadow: 0 0 2px #00ffff, 0 0 3px #00ffff;
    animation: twinkle 4s infinite ease-in-out;
}

.glow-3
{
    opacity: 1;
    box-shadow: 0 0 4px #00ffff, 0 0 6px #00ffff, 0 0 8px #00ffff;
    animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle
{
    0%, 100%
    {
        opacity: 1;
        box-shadow: 0 0 4px #00ffff, 0 0 6px #00ffff, 0 0 8px #00ffff;
    }
    50%
    {
        opacity: 0.4;
        box-shadow: 0 0 1px #00ffff, 0 0 2px #00ffff;
    }
}

@keyframes fadein
    {
    to
    {
        opacity: 1;
    }
}