*{

box-sizing:border-box;

}


body{

margin:0;

font-family:Arial, sans-serif;

background:
linear-gradient(
135deg,
#020617,
#111827
);

color:white;

}



.container{

width:95%;

max-width:600px;

margin:30px auto;

}



h1{

text-align:center;

}



.online{

text-align:center;

color:#22c55e;

font-weight:bold;

margin-bottom:20px;

}





.player{

background:#111827;

padding:20px;

border-radius:20px;

}


audio{

width:100%;

}





.equalizer{

height:80px;

display:flex;

justify-content:center;

align-items:end;

gap:7px;

margin:20px;

}


.equalizer span{

width:8px;

height:20px;

background:#38bdf8;

border-radius:10px;

animation:eq .8s infinite alternate;

}



@keyframes eq{

from{

height:15px;

}


to{

height:70px;

}

}





.card{

background:

rgba(255,255,255,.08);

border-radius:20px;

padding:20px;

margin-top:20px;

backdrop-filter:blur(10px);

}





.nowplaying{

text-align:center;

}



.cover{

width:230px;

height:230px;

object-fit:cover;

border-radius:20px;

box-shadow:

0 10px 30px black;

}




#song{

font-size:18px;

font-weight:bold;

color:#38bdf8;

}




button{

width:100%;

padding:15px;

border:0;

border-radius:15px;

background:#ef4444;

color:white;

font-size:16px;

font-weight:bold;

}



button:hover{

opacity:.8;

}




li{

margin:10px;

color:#ddd;

}



.footer{

text-align:center;

margin-top:30px;

color:#aaa;

}