*{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:'Press Start 2P', cursive;
    background:#000;
    color:#fff;
    overflow-x:hidden;
    position:relative;
  }

  /* VHS static background */
  body::before{
    content:"";
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbGZnOHM3ZnFwcGR0dmJ6bXl2c3pyODIzcnhqcjd2dGE4NGMwdnd2bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LmWnCBTOGUmw8/giphy.gif') repeat;
    opacity:0.15;
    z-index:-1;
    pointer-events:none;
  }

  header{
    text-align:center;
    padding:60px 20px 120px 20px;
  }
  header h1{
    font-size:2.0em;
    color:#00ffcc;
    text-shadow:0 0 10px #00ffcc,0 0 20px #ff00ff;
    animation:glitch 1s infinite;
  }

  @keyframes glitch{
    0%,100%{text-shadow:2px 0 #ff00ff,-2px 0 #00ffcc;}
    20%{text-shadow:-2px 0 #ff00ff,2px 0 #00ffcc;}
    40%{text-shadow:2px 0 #ff00ff,-2px 0 #00ffcc;}
    60%{text-shadow:-2px 0 #ff00ff,2px 0 #00ffcc;}
    80%{text-shadow:2px 0 #ff00ff,-2px 0 #00ffcc;}
  }

  .equalizer{
    display:flex;justify-content:center;align-items:flex-end;
    height:100px;gap:6px;margin-top:30px;
  }
  .bar{
    width:12px;background:#ff00ff;
    animation:bounce 1s infinite ease-in-out;
  }
  .bar:nth-child(1){animation-delay:0s;}
  .bar:nth-child(2){animation-delay:0.15s;}
  .bar:nth-child(3){animation-delay:0.3s;}
  .bar:nth-child(4){animation-delay:0.45s;}
  .bar:nth-child(5){animation-delay:0.6s;}
  @keyframes bounce{0%,100%{height:20px;}50%{height:90px;}}

  section{
    padding:60px 20px;
    max-width:1100px;
    margin:auto;
    text-align:center;
    background:rgba(0,0,0,0.7);
    margin-bottom:40px;
    border:2px solid #00ffcc;
    border-radius:10px;
  }
  h2{color:#00ffcc;margin-bottom:20px;}

  p{line-height:1.5;margin-bottom:30px;}

  .socials{
    display:flex;justify-content:center;gap:30px;margin-bottom:50px;
    flex-wrap:wrap;
  }
  .socials a{
    color:#ff00ff;text-decoration:none;font-size:1.4em;
    transition:transform 0.2s,color 0.2s;
  }
  .socials a:hover{transform:scale(1.3);color:#00ffcc;}

  /* Members cards */
  .members{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
  }
  .member{
    background:#111;
    border:2px solid #ff00ff;
    border-radius:10px;
    padding:20px;
    transition:transform 0.3s, box-shadow 0.3s;
    box-shadow:0 0 10px rgba(255,0,255,0.3);
  }
  .member:hover{
    transform:scale(1.05) rotate(-2deg);
    box-shadow:0 0 20px rgba(0,255,204,0.6);
  }
  .member h3{margin-bottom:15px;color:#00ffcc;}
  .member a{
    display:inline-block;margin:5px 10px;color:#ff00ff;
    text-decoration:none;font-size:0.7em;
  }
  .member a:hover{color:#00ffcc;}

.layout {
  display: flex;
  align-items: flex-start; /* wyrównanie do góry */
  gap: 20px;
  margin: 20px;
}

  /* Sidebar bottom-left */
  .sidebar{
    position:fixed;
    bottom:15px;
    left:15px;
    width:250px;
    font-size:0.7em;
    background:rgba(0,0,0,0.8);
    border:1px solid #00ffcc;
    border-radius:8px;
    padding:10px;
    box-shadow:0 0 10px rgba(0,255,204,0.4);
  }
  .sidebar h3{
    font-size:0.8em;
    color:#00ffcc;
    margin-bottom:8px;
  }
  .sidebar iframe{
    width:100%;
    height:200px;
  }

  .container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  margin-right: 340px;
}

.sidebar-left {
  width: 200px;
  background: rgba(0,0,0,0.7);
  border: 2px solid #00ffcc;
  border-radius: 8px;
  padding: 15px;
  position: sticky;
  top: 20px;
}

.sidebar-left h2 {
  font-size: 1em;
  color: #00ffcc;
  margin-bottom: 10px;
}

.sidebar-left ul {
  list-style: none;
}
.sidebar-left li {
  margin-bottom: 12px;
}
.sidebar-left a {
  color: #ff00ff;
  text-decoration: none;
  transition: color 0.2s;
}
.sidebar-left a:hover {
  color: #00ffcc;
}

main#content {
  flex: 1;
  background: rgba(0,0,0,0.7);
  border: 2px solid #ff00ff;
  border-radius: 10px;
  padding: 20px;
  min-height: 400px;
}

.sidebar-right {
  position: fixed;
  top: 70px;
  right: 15px;
  width: 300px;
  background: rgba(0,0,0,0.7);
  border: 2px solid #00ffcc;
  border-radius: 8px;
  padding: 15px;
}

.sidebar-right iframe {
  width: 100%;
  height: 250px;
  border: none;
}

.sidebar-playlist {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 300px;
  font-size: 0.7em;
  background: rgba(0,0,0,0.8);
  border: 1px solid #00ffcc;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0,255,204,0.4);
}
.sidebar-playlist iframe {
  width: 100%;
  height: 200px;
}

  .contact{
    margin-top:10px;
  }
  .contact a{
    display:block;
    color:#ff00ff;
    text-decoration:none;
    margin-bottom:5px;
  }
  .contact a:hover{color:#00ffcc;}

  .logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  perspective: 1000px; 
}

.logo {
  width: 120px;
  height: auto;
  animation: spin3D 6s linear infinite, glitch 1.5s infinite;
  filter: drop-shadow(0 0 10px #00ffcc);
}

@keyframes spin3D {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes glitch {
  0%, 100% { filter: drop-shadow(0 0 5px #00ffcc); }
  20% { filter: drop-shadow(-3px 0 #ff00ff) drop-shadow(3px 0 #00ffcc); }
  40% { filter: drop-shadow(3px 0 #ff00ff) drop-shadow(-3px 0 #00ffcc); }
  60% { filter: drop-shadow(0 -3px #ff00ff) drop-shadow(0 3px #00ffcc); }
  80% { filter: drop-shadow(-2px -2px #ff00ff) drop-shadow(2px 2px #00ffcc); }
}

/* === MOBILE RESPONSIVE FIX === */
@media (max-width: 900px) {
  header {
    padding: 40px 10px 60px 10px;
  }

  header h1 {
    font-size: 1.2em;
  }

  .layout {
    flex-direction: column;
    align-items: stretch;
    margin: 10px;
    gap: 10px;
  }

  .sidebar-left {
    width: 100%;
    position: relative;
    top: auto;
  }

  .container {
    flex-direction: column;
    margin-right: 0;
    padding: 10px;
  }

  main#content {
    width: 100%;
    min-height: auto;
  }

  .sidebar-right,
  .sidebar-playlist {
    position: relative;
    width: 100%;
    margin-top: 20px;
    right: auto;
    bottom: auto;
  }

  .sidebar-right iframe,
  .sidebar-playlist iframe {
    height: 180px;
  }

  .equalizer {
    height: 60px;
    gap: 4px;
  }

  .bar {
    width: 8px;
  }
}

/* jeszcze węższe ekrany (telefony) */
@media (max-width: 600px) {
  body {
    font-size: 10px;
  }

  header h1 {
    font-size: 1em;
  }

  .logo {
    width: 80px;
  }

  .sidebar-left h2,
  .sidebar-right h2,
  .sidebar-playlist h2 {
    font-size: 0.9em;
  }

  .sidebar-left ul li a {
    font-size: 0.8em;
  }
}

/* === HAMBURGER MENU === */
.hamburger {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  color: #00ffcc;
  border: 2px solid #ff00ff;
  border-radius: 8px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.7em;
  padding: 10px 15px;
  margin: 0 auto 20px auto;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hamburger:hover {
  background: rgba(255, 0, 255, 0.2);
  transform: scale(1.05);
}

/* Tylko dla ekranów mobilnych */
@media (max-width: 900px) {
  .hamburger {
    display: block;
  }

  .sidebar-left {
    display: none;
    width: 100%;
    position: relative;
    margin-top: 10px;
  }

  .sidebar-left.active {
    display: block;
    animation: slideDown 0.3s ease forwards;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}