body{

background:#0b0b0b;
color:white;
font-family:Arial, sans-serif;

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

min-height:100vh;
margin:0;

background-size:cover;
background-position:center;
background-attachment:fixed;

overflow:auto;

}


/* SPOTIFY STYLE HINTERGRUND */

body::before{

content:"";

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background-size:cover;
background-position:center;

filter:blur(90px) brightness(0.35);

z-index:-1;

transition:background 1s ease;

}


/* PLAYER BOX */

.player{

width:360px;
max-width:90vw;

background:#1c1c1c;

padding:25px;

border-radius:16px;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,0.6);

position:relative;

backdrop-filter:blur(10px);

max-height:95vh;
overflow:auto;

}


/* COVER */

.cover{

width:200px;
height:200px;

max-width:60vw;
max-height:60vw;

border-radius:14px;

object-fit:cover;

margin-bottom:20px;

box-shadow:0 8px 30px rgba(0,0,0,0.5);

}


/* DJ BILD */

.dj{

width:80px;
height:80px;

border-radius:50%;

position:absolute;

right:35px;
top:190px;

border:4px solid #1c1c1c;

box-shadow:0 5px 20px rgba(0,0,0,0.5);

background:white;

}


/* LIVE TEXT */

.live{

color:red;
margin-bottom:10px;
font-weight:bold;

letter-spacing:1px;

}


/* PLAY BUTTON */

#playbtn{

background:#ff6600;
color:white;

font-size:18px;
font-weight:bold;

border:none;

border-radius:14px;

padding:15px 40px;

cursor:pointer;

transition:all 0.2s ease;

margin-top:10px;

box-shadow:0 5px 20px rgba(255,102,0,0.3);

}

#playbtn:hover{

background:#ff7a1a;
transform:scale(1.05);

}

#playbtn:active{

transform:scale(0.95);

}


/* VOLUME SLIDER */

#volume{

width:100%;
margin-top:15px;

}


/* LISTENER */

#listeners{

margin-top:8px;
font-size:14px;
color:#ccc;

}


/* SONG HISTORY */

#history{

margin-top:10px;
font-size:13px;
color:#aaa;

line-height:1.4;

max-height:70px;
overflow:hidden;

}


/* MINI PLAYER */

#miniPlayer{

position:fixed;
bottom:0;
left:0;

width:100%;

background:#111;
color:white;

padding:10px;

display:flex;
justify-content:center;

gap:20px;

z-index:9999;

}


/* EQUALIZER */

.equalizer{

display:flex;
justify-content:center;

align-items:flex-end;

gap:4px;

height:30px;

margin-top:10px;

opacity:0;

transition:0.3s;

}

.equalizer.active{

opacity:1;

}


/* EQUALIZER BARS */

.equalizer div{

width:5px;
background:#ff6600;

animation:sound 1s infinite ease-in-out;

}

.equalizer div:nth-child(2){animation-delay:0.2s;}
.equalizer div:nth-child(3){animation-delay:0.4s;}
.equalizer div:nth-child(4){animation-delay:0.6s;}
.equalizer div:nth-child(5){animation-delay:0.8s;}


@keyframes sound{

0%{height:5px;}
50%{height:25px;}
100%{height:5px;}

}


/* MOBILE OPTIMIERUNG */

@media (max-height:700px){

.cover{
width:160px;
height:160px;
}

.dj{
top:150px;
}

.player{
padding:20px;
}

}

@media (max-width:480px){

.player{
width:95vw;
}

.cover{
width:170px;
height:170px;
}

}