* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { height: 100%; font-family: Arial, sans-serif; background: #000; }


@media (max-width: 768px) {
    .logo { display: none; }
    #visualizer { height: 80px; }
    .track-list-container { max-height: 150px; }
    body { 
        background: url('https://grandeconnection.pl/img/vice_bg.jpg') no-repeat center center; 
        background-size: cover; 
        background-attachment: scroll; 
    }
    .overlay { display: none; }
}

@media (max-width: 480px) {
    .player-controls { flex-direction: column; gap: 5px; }
}


.bg-video {
    position: fixed;
    top:0; left:0; width:100vw; height:100vh;
    object-fit:cover; z-index:1;
    filter: brightness(0.85) contrast(1.1); 
}

.background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url('bg_css.png') repeat;
    opacity: 0.65;
    z-index: 2;
}

.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('https://grandeconnection.pl/img/bg_css.png') repeat;
    opacity: 0.65;
    z-index: 2; 
}


.content { position: relative; z-index:3; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff; }


.logo {
    width:300px; height:auto; margin-bottom:20px;
    animation: pulse 3s infinite;
    opacity: 0.85;
    filter: contrast(125%);
}
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }


.music-panel {
    background: rgba(0,0,0,0.75);
    padding: 20px;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px #7fff00;
}
.music-panel h2 { margin-bottom: 15px; color: #7fff00; }


#visualizer { width:100%; height:120px; background:rgba(0,0,0,0.8); margin-bottom:15px; border-radius:10px; box-shadow:0 0 15px rgba(255,105,180,0.5); }


.player-controls { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.player-controls button { padding:8px 15px; border:none; border-radius:8px; background:#7fff00; color:#000; font-weight:bold; cursor:pointer; transition:0.3s; }
.player-controls button:hover { background:#6ae600; }
.player-controls input[type="range"] { flex:1; accent-color:#7fff00; }
.volume-container { display:flex; align-items:center; gap:5px; }
.volume-icon { font-size:1.2rem; color:#7fff00; text-shadow:0 0 5px #7fff00, 0 0 10px #7fff00; }
#time-display { min-width:80px; color:#7fff00; font-weight:bold; text-align:center; font-family:monospace; }


.track-list-container { flex:1; overflow-y:auto; margin-top:10px; padding-right:5px; }
.track-list-container::-webkit-scrollbar { width:8px; }
.track-list-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius:5px; }
.track-list-container::-webkit-scrollbar-thumb { background: magenta; border-radius:5px; }
.track-list-container { scrollbar-width: thin; scrollbar-color: magenta rgba(0,0,0,0.3); }

.track-list { list-style:none; padding:0; margin:0; text-align:left; }
.track-list li { padding:10px; border-bottom:1px solid rgba(255,255,255,0.2); cursor:pointer; transition:0.3s; color:#fff; }
.track-list li:hover { background: rgba(127,255,0,0.2); color:#7fff00; text-shadow:0 0 5px #7fff00,0 0 10px #7fff00; }
.track-list li.active { background: rgba(127,255,0,0.4); color:#7fff00; font-weight:bold; text-shadow:0 0 5px #7fff00,0 0 15px #7fff00; }


.home-button { position:fixed; top:40px; left:40px; z-index:1000; }
.home-button img { width:40px; transition:0.3s; }
.home-button img:hover { transform:scale(1.8); filter: drop-shadow(0 0 10px #7fff00) drop-shadow(0 0 20px #7fff00); }


.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    z-index: 1000;
}
.footer-link { font-weight: bold; color: #7fff00; text-decoration: none; cursor: pointer; }
.footer-link:hover { text-decoration: none; }
.footer .author { font-weight: bold; text-decoration: none; }
.footer .author:hover { text-decoration: none; }