body {

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#222;

    color:white;

    font-family:

    Arial,
    sans-serif;


    transition:

    background 1.5s;


}


.card {


    width:85%;

    max-width:400px;

    padding:25px;


    text-align:center;


    background:

    rgba(255,255,255,0.15);


    backdrop-filter:

    blur(20px);



    border-radius:25px;


    box-shadow:

    0 20px 50px rgba(0,0,0,0.3);


}



#cover {


    width:100%;


    border-radius:20px;


    box-shadow:

    0 10px 30px rgba(0,0,0,0.4);


}



h1 {

    margin-top:25px;

    font-size:24px;

}


h2 {

    font-size:18px;

    opacity:0.9;

}


p {

    opacity:0.8;

}


audio {


    width:100%;


    margin-top:20px;


}
/* 播放时封面动画 */

#cover.playing {

    animation:

    breathe 3s infinite;

}



@keyframes breathe {


    0% {

        transform:scale(1);

        box-shadow:
        0 10px 30px rgba(0,0,0,0.4);

    }


    50% {

        transform:scale(1.03);

        box-shadow:
        0 15px 50px rgba(255,255,255,0.35);

    }


    100% {

        transform:scale(1);

        box-shadow:
        0 10px 30px rgba(0,0,0,0.4);

    }

}
.info {


    margin-top:20px;


    padding:15px;


    background:

    rgba(255,255,255,0.1);



    border-radius:15px;


    text-align:left;


    font-size:14px;



}


.info p {

    margin:8px 0;

}