@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Quicksand:wght@500;700&display=swap');


body{

margin:0;

background:
radial-gradient(circle at top,#8b4dff,#23003f,#090014);

font-family:'Quicksand',sans-serif;

color:white;

min-height:100vh;

overflow-x:hidden;

}



#stars{

position:fixed;

width:100%;

height:100%;

z-index:-1;

}



.star{

position:absolute;

width:3px;

height:3px;

background:white;

border-radius:50%;

animation:twinkle 3s infinite;

}



@keyframes twinkle{

0%,100%{

opacity:.2;

}

50%{

opacity:1;

}

}



header{

text-align:center;

padding:40px;

}



h1{

font-family:'Cinzel';

font-size:60px;

color:#ff9de2;

text-shadow:

0 0 20px pink;

}



nav a{

display:inline-block;

margin:10px;

padding:12px 20px;

border-radius:30px;

background:#ff7bd5;

color:white;

text-decoration:none;

box-shadow:0 0 20px pink;

}



nav a:hover{

transform:scale(1.1);

}



.glass{

width:70%;

margin:40px auto;

padding:30px;

background:rgba(255,255,255,.12);

border-radius:30px;

backdrop-filter:blur(15px);

box-shadow:

0 0 30px rgba(255,120,220,.3);

}



.card{

background:rgba(255,255,255,.15);

padding:20px;

border-radius:20px;

margin:15px;

}



.broom img{

position:fixed;

width:150px;

top:20%;

left:-200px;

animation:

fly 15s linear infinite;

}



@keyframes fly{

to{

left:120%;

}

}



footer{

text-align:center;

padding:40px;

}