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

body{
    font-family:'Inter',sans-serif;
    background: radial-gradient(circle at center,#0b1020,#050712,#02030a);
    color:white;
    overflow:hidden;
}

/* HEADER */
header{
    text-align:center;
    padding:25px;
}

header h1{
    font-family:'Montserrat';
    color:#7dd3fc;
    text-shadow:0 0 20px #38bdf8;
}

/* SYSTEME */
#system{
    position:relative;
    width:600px;
    height:600px;
    margin:20px auto;
}

/* SOLEIL */
#sun{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:150px;
    height:150px;
    border-radius:50%;
    background: radial-gradient(circle,#7dd3fc,#2563eb,#0f172a);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 60px #38bdf8;
    text-align:center;
}

#progress{
    font-size:0.8rem;
    opacity:0.8;
}

/* PLANETES */
.planet{
    position:absolute;
    width:110px;
    height:110px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(125,211,252,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8px;
    font-size:0.85em;
    line-height:1.2;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .3s ease;
    backdrop-filter:blur(10px);
}

.planet:hover{
    transform:scale(1.2);
    box-shadow:0 0 25px #38bdf8;
}

.planet.done{
    background:rgba(56,189,248,0.25);
    box-shadow:0 0 40px #38bdf8;
}

/* CONTENU */
#content{
    width:80%;
    margin:20px auto;
    padding:20px;
    background:rgba(255,255,255,0.05);
    border-radius:15px;
    backdrop-filter:blur(10px);
}

/* BACK */
.back{
    position:fixed;
    top:70px;
    left:15px;
    color:white;
    text-decoration:none;
    padding:10px 15px;
    background:rgba(255,255,255,0.1);
    border-radius:10px;
}

/* STARS */
#stars{
    position:fixed;
    inset:0;
    pointer-events:none;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    background:white;
    border-radius:50%;
    animation:move 8s linear infinite;
}

@keyframes move{
    from{transform:translateY(100vh);}
    to{transform:translateY(-10vh);}
}

/* QUIZ */
.quiz{
    margin-top:10px;
}

input{
    padding:8px;
    width:80%;
    margin-top:10px;
}

button{
    margin-top:10px;
    padding:8px 12px;
    background:#38bdf8;
    border:none;
    color:black;
    cursor:pointer;
}