@font-face {
    font-family: "Dosis";
    src: url("../font/Dosis-Medium.ttf") format("truetype");
}

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;
}

main
{
    border-width:1px;
    border-color:white;
    border-style:solid;
    width:500px;
    height:200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:black;
    font-family: Dosis, sans-serif;
    color:white;
    padding:10px;
}

.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;
    }
}