*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#0b1018;
background:radial-gradient(circle at top,#182433 0%,#0b1018 70%);
color:#fff;
font-family:Arial,Helvetica,sans-serif;
}

.container{
max-width:1200px;
margin:auto;
padding:20px 25px;
}

header{
text-align:center;
margin-bottom:20px;
}

.logo{
width:160px;
margin-bottom:10px;
}

h1{
font-size:58px;
margin-bottom:10px;
}

header p{
font-size:22px;
color:#b8c2cf;
}

#playButton{
display:block;
margin:20px auto 35px;
width:320px;
height:68px;
border:none;
border-radius:60px;
background:#34d7f3;
font-size:30px;
font-weight:bold;
cursor:pointer;
transition:.25s;
box-shadow:0 0 30px rgba(52,215,243,.45);
}

#playButton:hover{
transform:scale(1.04);
box-shadow:0 0 45px rgba(52,215,243,.8);
}

.player{
display:flex;
justify-content:center;
align-items:center;
gap:40px;

padding:25px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
backdrop-filter:blur(10px);

box-shadow:
0 25px 70px rgba(0,0,0,.45),
0 0 40px rgba(52,215,243,.08);
}

.cover img{
width:330px;
border-radius:22px;
border:4px solid rgba(255,255,255,.08);
box-shadow:0 30px 70px rgba(0,0,0,.60);
transition:.4s;
}

.info{
text-align:left;
}

.np{
font-size:16px;
letter-spacing:4px;
color:#34d7f3;
margin-bottom:18px;
}

.info h2{
font-size:48px;
font-weight:800;
line-height:1.1;
margin-bottom:8px;
text-shadow:0 0 12px rgba(255,255,255,.12);
}

.info h3{
font-size:28px;
font-weight:300;
color:#34d7f3;
margin-bottom:42px;
}

.status{
display:flex;
gap:20px;
font-size:18px;
margin-top:20px;
}
.volumeBox{
display:inline-flex;
flex-direction:column;
align-items:center;
}

.volumeLabel{
font-size:11px;
letter-spacing:2px;
color:#34d7f3;
margin-bottom:4px;
font-weight:bold;
text-transform:uppercase;
}
#volume{

width:140px;

accent-color:#34d7f3;

cursor:pointer;

margin-left:15px;

vertical-align:middle;

}
#online{
color:#41ff68;
}
.progress{
width:100%;
height:8px;
background:rgba(255,255,255,.10);
border-radius:20px;
overflow:hidden;
margin-top:25px;
}

#progressFill{
width:0%;
height:100%;
background:#34d7f3;
border-radius:20px;
}

.time{
display:flex;
justify-content:space-between;
font-size:14px;
color:#b8c2cf;
margin-top:8px;
}
.next{
margin-top:18px;
font-size:15px;
color:#b8c2cf;
}

.next span:first-child{
color:#34d7f3;
font-weight:bold;
margin-right:8px;
letter-spacing:1px;
}

#nextSong{
color:#ffffff;
}
@keyframes livePulse{

0%{
opacity:1;
}

50%{
opacity:.25;
}

100%{
opacity:1;
}

}

.np{

animation:livePulse 1.5s infinite;

}
@media(max-width:900px){

.player{
flex-direction:column;
}

.info{
text-align:center;
}

.status{
justify-content:center;
flex-wrap:wrap;
}

.cover img{
width:90%;
}

h1{
font-size:42px;
}

header p{
font-size:18px;
}

#playButton{
width:300px;
height:72px;
font-size:28px;
}

.info h2{
font-size:36px;
}

.info h3{
font-size:24px;
}

}