:root {
  --dark: #000;
  --lite: #eee;
  --neon-pink: #f8328c;
  --neon-blue: #04d9ff;
}

@keyframes bgchange {
  to { background-position: 180vh; }
}

@keyframes glow {
  0% { text-shadow: 0 0 2px var(--neon-blue), 0 0 4px var(--neon-blue), 0 0 6px var(--neon-blue), 0 0 8px var(--neon-blue); }
  100% { text-shadow: 0 0 2px var(--neon-pink), 0 0 4px var(--neon-pink), 0 0 6px var(--neon-pink), 0 0 8px var(--neon-pink); }
}

html { scroll-behavior: smooth; }

body {
  background: var(--dark);
  color: var(--lite);
}

h1 {
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.5) 20%,
    rgba(1.6, 85.1, 100, 0.7) 40%,
    var(--neon-blue) 50%,
    var(--neon-pink) 60%,
    rgba(97.3, 19.6, 54.9, 0.7) 80%,
    rgba(0, 0, 0, 0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: bold;
  animation: bgchange 6s infinite alternate;
}

h1 a {
  color: transparent;
}

h1 a:hover {
  background: none;
  color: #fff;
  text-shadow:
    0 0 2px var(--neon-blue),
    0 0 4px var(--neon-blue),
    0 0 6px var(--neon-blue),
    0 0 8px var(--neon-blue);
  animation: glow 2s infinite alternate;
  transition: all 0.5s;
}

a,
.track {
  color: var(--neon-blue);
  text-decoration: none;
  transition: color 1s;
}

a:hover,
.track:hover {
  color: var(--neon-pink);
  transition: color 0.5s;
}

.track {
  cursor: pointer;
}

.active-track {
  color: #fff;
  text-shadow:
    0 0 2px var(--neon-blue),
    0 0 4px var(--neon-blue),
    0 0 6px var(--neon-blue),
    0 0 8px var(--neon-blue);
  animation: glow 2s infinite alternate;
}

.active-track:hover {
  color: #fff;
}

.w3-content {
  max-width: 600px;
}

.border-bottom-neon {
  padding: 4px;
  background: linear-gradient(to top, var(--neon-pink) 0%, #000 30%);
}

.border-top-neon {
  padding: 12px;
  background: #000;
  border-top: 4px solid var(--neon-blue);
}

#player {
  max-width: 99%;
  background: var(--dark);
}

#playlist {
  padding-left: 0;
  list-style-type: none;
}

#playlist li {
  margin: 2px 0 2px 0;
}