*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    background:linear-gradient(135deg,#0f5c1d,#167a27,#0b4617);
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

}

.player{

    width:420px;
    max-width:95%;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:35px;

    padding:45px 35px;

    text-align:center;

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

}

.logo{

    width:100%;
    max-width:330px;

    display:block;
    margin:auto;

}

.live{

    margin-top:25px;

    display:inline-flex;
    align-items:center;
    gap:12px;

    background:#124f18;

    color:#fff;

    padding:12px 25px;

    border-radius:40px;

    font-size:24px;

    font-weight:bold;

}

.dot{

    width:16px;
    height:16px;

    background:#ff2d2d;

    border-radius:50%;

    animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.5);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}

.playButton{

    margin:45px auto;

    width:170px;
    height:170px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 0 15px #64ff4b,

    0 0 35px #64ff4b,

    0 0 70px rgba(100,255,75,.4);

    transition:.25s;

}

.playButton:hover{

transform:scale(1.06);

}

.musicBox{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:10px;

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

    border-radius:20px;

    padding:18px;

}

.title{

    color:#bfffb9;

    font-size:14px;

}

.song{

    color:white;

    font-size:22px;

    font-weight:bold;

    margin-top:6px;

}

.equalizer{

    display:flex;

    gap:4px;

    height:38px;

    align-items:flex-end;

}

.equalizer span{

    width:6px;

    border-radius:4px;

    background:#7dff61;

    animation:equalizer 1s infinite;

}

.equalizer span:nth-child(2){

animation-delay:.2s;

}

.equalizer span:nth-child(3){

animation-delay:.4s;

}

.equalizer span:nth-child(4){

animation-delay:.6s;

}

@keyframes equalizer{

0%{

height:8px;

}

50%{

height:35px;

}

100%{

height:12px;

}

}