/* ===== RESET ===== */

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

body{
    width:100%;
    height:100vh;
    overflow:hidden;
    background:radial-gradient(circle at center,#07142d,#000814,#000);
    font-family:Arial,sans-serif;
}

/* ===== STARS ===== */

#stars{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:0;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    background:#fff;
    border-radius:50%;
    animation:twinkle 2s infinite alternate;
}

@keyframes twinkle{

    0%{
        opacity:.2;
        transform:scale(.6);
    }

    50%{
        opacity:1;
        transform:scale(1.4);
    }

    100%{
        opacity:.3;
        transform:scale(.8);
    }
}

/* ===== NEBULA ===== */

.nebula{

    position:absolute;
    width:700px;
    height:700px;

    left:-200px;
    top:-150px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,170,255,.18),
    rgba(140,0,255,.12),
    transparent 70%);

    filter:blur(80px);

    animation:nebulaMove 30s linear infinite;

    z-index:0;
}

@keyframes nebulaMove{

    from{
        transform:translateX(-100px);
    }

    to{
        transform:translateX(300px);
    }

}

/* ===== MILKY WAY ===== */

.milkyway{

    position:absolute;

    width:180%;

    height:220px;

    left:-40%;

    top:25%;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(180,220,255,.15),
    rgba(255,255,255,.08),
    transparent);

    transform:rotate(-20deg);

    filter:blur(35px);

    animation:milkyMove 35s linear infinite;

    z-index:0;
}

@keyframes milkyMove{

    from{
        transform:translateX(-200px) rotate(-20deg);
    }

    to{
        transform:translateX(200px) rotate(-20deg);
    }

}

/* ===== SOLAR SYSTEM ===== */

.solar-system{

    position:relative;

    width:100vw;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:2;
}

/* ===== SUN ===== */

.sun{

    position:absolute;

    width:140px;
    height:140px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    #fff9b0 0%,
    #ffd54f 30%,
    #ff9800 65%,
    #ff5722 100%);

    box-shadow:
    0 0 50px orange,
    0 0 100px gold,
    0 0 180px red;

    animation:sunPulse 3s ease-in-out infinite;
}

.sun::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,180,0,.35),
    transparent 70%);

    animation:sunFire 8s linear infinite;
}

@keyframes sunPulse{

    0%,100%{
        transform:scale(1);
        filter:brightness(1);
    }

    50%{
        transform:scale(1.08);
        filter:brightness(1.35);
    }
}

@keyframes sunFire{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* ===== ORBITS ===== */

.orbit{

    position:absolute;

    border:1px solid rgba(255,255,255,.12);

    border-radius:50%;

    animation:orbit linear infinite;
}

@keyframes orbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* ===== COMMON PLANET ===== */

.planet{

    position:absolute;

    border-radius:50%;

    transition:.4s;
}

.planet:hover{

    transform:scale(1.3);

    filter:brightness(1.3);

    box-shadow:0 0 30px white;
}