@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
  :root {
    --fundo: #0d0d0d;
    --texto: #f5f5f5;
    --neon-pink: #ff4081;
    --neon-yellow-hover: #e4f244;
    --neon-cyan: #00ffff;
    --heart-color: #ff5b5b;
    --footer-bg: #111;
    --btn-hover: #007bff;
  }

     body {
      width: 100%;
      margin: 0;
      overflow-y: auto;
      font-family: 'Segoe UI', sans-serif;
      background-color: #000;
    }
/* Corrige lag em dispositivos móveis */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}

   /* Scroll suave e com compensação para âncoras */
    html {
      scroll-behavior: smooth;
    }

    /* Scrollbar personalizada */
    ::-webkit-scrollbar {
      background-color: #111;
      width: 10px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #00ffcc;
    }

    /* Container geral centralizado */
    .main-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
     justify-content: space-between;
    }

  /* Header fixo */
  #header2 {
    position: fixed;
    display: flex;
    background: rgba(0, 0, 0, 1);
    width: 99%;
    left: 4px;
    padding: 0;
    align-items: center;
    height: 105px;
    top: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-radius: 20px;
    z-index: 10;
  }

  #banner2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: -1;
  }

  #banner2 a {
    color: #999;
    text-decoration: none;
  }

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.progress-container {
  background-color: transparent;
  height: 10px;
  width: 100%;
}

.progress-bar {
  background-color: #ff5b5b;
  height: 3px;
  width: 0%;
}

.content {
  padding: 2em;
}

  h2 {
    color: var(--neon-pink);
    margin-top: -130px;
    padding-top: 158px;
    text-align: left;
  }

    h2:target {
      border-bottom: 2px solid #0ff;
    }

 h6 {
      margin-top: 20px;
}

.copy-icon:hover {
opacity: 0.7;
}

#musicContainer {
  max-width: 700px; /* ou 100%, se preferir ocupar toda a largura */
  width: 80%;        /* largura base */
  height: auto;
  background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
  border: 2px solid #00ffff;
  border-radius: 20px;
  scroll-behavior: smooth;
  text-overflow: ellipsis;
  top: 3px;
  padding: 5px;
  margin: 0px auto; /* ← centraliza horizontalmente */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  animation: glowContainer 4s ease-in-out infinite alternate;
}

.dark-pop-card {
  background: #000;
  border-radius: 16px;
  padding: 5px 10px;
  margin: 3px 10px;
  font-family: 'Orbitron', sans-serif;
  display: flex;
  text-overflow: ellipsis;    /* Adiciona os três pontinhos no final */
  justify-content: space-between;
  flex-wrap: nowwrap;
  flex-direction: inherit;
  color: #0ff;
  overflow: visible;
  animation: neonPulse 3s infinite;
  gap: 12px;
}
 
.dark-pop-card .copy-icon {
  font-size: 0.7em;
  background: none;
  border: none;
  color: #0ff;
  margin-right: 15px;
  cursor: pointer;
  transition: text-shadow 0.3s ease-in-out;
  }

.dark-pop-card .copy-icon {
  padding-top: -10px;
  letter-spacing: 1.5px;
}

.dark-pop-card a.music-link:hover {
  color: #e4f244;
}
  .container {
  margin: 0 auto;
  padding: 20px 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  white-space: normal;
  }

.music-link {
  text-align: left;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0ff;
  text-decoration: none;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  flex-shrink: 1;
  font-size: 0.7rem; /* ou por exemplo 14px */
}

.dark-pop-card.activeTrack {
  background: #333;  /* Cor de fundo em destaque */
  color: #000;          /* Texto em preto para contraste */
  font-weight: bold;    /* Texto em negrito */
  box-shadow: 0 0 10px #00ffff;
}

.cantor-wrapper { 
  display: inline-block;
  background-color: #333; /* ← cor de fundo da div */
  box-shadow: 0 0 5px #ff4081;18:59 23/03/2026
  padding: 0px 6px;
  border-radius: 8px;
  margin-top: 20px;
  line-height: 1;
}

.cantor-wrapper h6 {
  margin: 0;         /* remove espaço em cima e embaixo */
  padding: 0;        /* remove qualquer padding */
  font-size: 0.7rem;   /* opcional: ajuste fino do tamanho da fonte */
  background-color: #333;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;    /* Adiciona os três pontinhos no final */
  overflow: hidden;
  color: var(--neon-pink);
  letter-spacing: 1.5px;
}

    /* Estilo dos links do índice A-Z */
    .neon-link {
      color: #00ffff;
      font-size: 1.2rem;
      text-decoration: none;
      letter-spacing: 1.2px;
      font-family: 'Orbitron', sans-serif;
      display: inline-block;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .neon-link:hover {
      transform: scale(1.5);
      color: #ff4081;
      text-shadow: 0 0 6px #ff4081;
      z-index: 1;
    }

.alfabet {
  width: 99%; 
  height: 22px;
  border-radius: 20px;
  margin-left: 3px; 
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  z-index: 2000;
}

.alfabet2 {
  padding: 0px 10px;
  justify-content: center;
  position: relative;
}
    .neon-link:visited,
    .neon-link:focus,
    .neon-link:target {
      color: #00ffff;
      text-shadow: none;
    }

  /* Botão neon */
  .neon-btn {
    width: 100px;
    font-size: 0.6rem;
    background-color: #333;
    color: #888;
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 5px #888, 0 0 8px var(--neon-cyan), 0 0 12px var(--neon-cyan);
  }

  .neon-btn:hover {
    box-shadow: 0 0 5px #fff, 0 0 8px var(--neon-yellow-hover), 0 0 15px var(--neon-yellow-hover);
    transform: scale(1.0);
  }

  /* Imagens com glow */
  .neon {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  }


  .hyphen {
    color: #0ff; /* ou qualquer cor desejada */
    font-weight: normal;
    vertical-align: 4px;
  }

@keyframes glowContainer {
  from {
    box-shadow: 0 0 10px #00ffff;
  }
  to {
    box-shadow: 0 0 25px #00ffff, 0 0 35px #00ffff;
  }
}
/* Adaptação para telas menores */

@media (max-width: 768px) {
  #musicContainer {
    width: 90%;
    padding-top: 10px;
    font-size: 2.0rem;
    margin-top: 3px;
}
@media (max-width: 768px) {
.dark-pop-card {
  padding: 0px 10px;
  display: flex;
  text-overflow: ellipsis;    /* Adiciona os três pontinhos no final */
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowwrap;
  margin: 5px 0;
}
}
@media (max-width: 768px) {
.music-link {
  padding: 5px;
}
}
@media (max-width: 768px) {
 .dark-pop-card .copy-icon {
    font-size: 1.0rem;
    align-self: flex-end;
    margin-top: 1px;
  }
}
@media (max-width: 768px) { 
 .hyphen {
    color: #0ff; /* ou qualquer cor desejada */
    font-weight: normal;
    vertical-align: 1px;
  }
}
@media (max-width: 768px) {
 h2 {
  font-size: 2.0rem;
}
}

@media (max-width: 768px) {
 .alfabet {
  padding: 0;
  }
}
@media (max-width: 768px) {
.neon-link {
    font-size: 0.7rem;
    padding: 4px 2px;
  }
}
@media (max-width: 768px) {
  .copy-icon {
    top: 1px;
    font-size: 0.5rem;
  }
}
   .menu {
         font-size: 1.5rem; 
         margin: 10px 0 10px 0; 
         color: #000;
         -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
         text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 55px #00ffff;
         transition: all 0.5s;
        }