*{

box-sizing:border-box;

}


body{


margin:0;


min-height:100vh;


display:flex;

justify-content:center;

align-items:center;


padding:20px;


font-family:

Arial,
"Microsoft YaHei",
sans-serif;


color:white;



background:

radial-gradient(
circle at top,

#9cc9df,

#d8c6a3 40%,

#667786 75%,

#18202b

);



}



.card{


width:100%;

max-width:430px;


padding:32px;


border-radius:40px;



background:

rgba(
255,255,255,0.18
);



backdrop-filter:

blur(35px);



border:

1px solid

rgba(255,255,255,0.3);



box-shadow:

0 30px 80px

rgba(0,0,0,0.45);



text-align:center;


}





#cover{


width:100%;


border-radius:30px;


box-shadow:

0 20px 50px

rgba(0,0,0,0.45);


transition:.4s;


}



#cover.playing{


transform:scale(1.03);


}




h1{


font-size:30px;


margin-top:30px;


line-height:1.2;


}



h2{


font-size:22px;


font-weight:400;


}



.album{


font-size:20px;

opacity:.8;


}




/* 播放按钮 */


#playButton{


margin-top:30px;


width:110px;

height:110px;


border-radius:50%;


border:none;


display:flex;


justify-content:center;

align-items:center;



background:

rgba(255,255,255,.25);



backdrop-filter:

blur(20px);



box-shadow:

0 15px 40px

rgba(0,0,0,.35);



}




.play{


width:0;

height:0;



border-top:

22px solid transparent;


border-bottom:

22px solid transparent;


border-left:

35px solid white;



margin-left:8px;


}




.pause{


width:34px;

height:40px;



border-left:

10px solid white;


border-right:

10px solid white;


}






.time{


display:flex;


justify-content:space-between;


margin-top:25px;


font-size:16px;


}





.progress{


height:8px;


background:

rgba(255,255,255,.25);



border-radius:10px;


margin-top:12px;


overflow:hidden;


}



#progressBar{


height:100%;


width:0%;


background:white;


}




.info{


margin-top:35px;


padding:25px;


border-radius:30px;


display:grid;


grid-template-columns:1fr 1fr;


gap:20px;



background:

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



text-align:left;


font-size:15px;


}




.info b{


font-size:18px;


}