body{
margin:0;
height:100vh;
background:
radial-gradient(circle at 20% 30%, rgba(140,110,255,0.35), transparent),
radial-gradient(circle at 80% 70%, rgba(255,120,200,0.25), transparent),
linear-gradient(#06061a,#000);
font-family:'Roboto', sans-serif;
color:white;
text-align:center;
overflow:hidden;
}

/* text */
h1{
font-family:'Pinyon Script', sans-serif;
font-size:60px;
margin-top:25px;
}
.subtitle{
opacity:.9;
}

/* form */
.form{
margin:20px auto;
display:flex;
gap:10px;
justify-content:center;
background:rgba(253, 253, 253, 0.08);
backdrop-filter:blur(10px);
padding:10px 20px;
border-radius:25px;
width:fit-content;
box-shadow:0 0 20px rgba(255,255,255,.1);

}

input{
padding:10px 14px;
border:none;
font:Roboto;
border-radius:20px;
background:rgba(194, 179, 179, 0.15);
color:white;
outline:none;
width:220px;

}

button{
padding:10px 16px;
border:none;
border-radius:20px;
background:linear-gradient(135deg,#7c8bff,#b388ff);
color:white;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 0 10px #9fa8ff;
}

/* sky */
#sky{
position:relative;
width:90%;
height:65vh;
margin:auto;
border-radius:20px;
overflow:hidden;
}

/* stars */
.star{
position:absolute;
width:12px;
height:12px;
border-radius:50%;
background:white;
box-shadow:0 0 10px white;
cursor:pointer;
animation:twinkle 2s infinite alternate;

}

/* tooltip */
.tooltip{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:rgba(0,0,0,.6);
padding:6px 10px;
border-radius:10px;
font-size:12px;
display:flex;
align-items:center;
gap:6px;
opacity:0;
transition:.3s;
white-space:nowrap;
}

.star:hover .tooltip{
opacity:1;
}
/* trash icon */
.trash{
width:18px;
height:18px;
cursor:pointer;
opacity:1;
}
.trash:hover{
opacity:1;
}

/* twinkle */
@keyframes twinkle{
from{opacity:.4;}
to{opacity:1;}
}

/* constellation */
#constellation{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

line{
stroke:white;
stroke-width:1.5;
stroke-opacity:.4;
stroke-dasharray:1000;
stroke-dashoffset:1000;
animation:drawLine .8s ease forwards;
}

@keyframes drawLine{
to{
stroke-dashoffset:0;
}

}