html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
}

body {
  background-color: #34005a;
  background-image:
    -webkit-linear-gradient(135deg, #2a048a 0%, #ff1ee9 35%, #00fff7 100%);
  background-image:
    -moz-linear-gradient(135deg, #2a048a 0%, #ff1ee9 35%, #00fff7 100%);
  background-image:
    linear-gradient(135deg, #2a048a 0%, #ff1ee9 35%, #00fff7 100%);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.container {
  text-align: center;
  max-width: 90%;
  animation: fadeIn 1.4s ease-in-out;
  box-shadow: 0 0 40px 6px #00fff740, 0 0 90px 12px #ff1ee930;
  border-radius: 28px;
  background: rgba(27,3,46,0.66);
  padding: 2.2em 1.4em;
}

.dj-name {
  font-size: 3.3rem;
  letter-spacing: 0.12em;
  color: #30ffe1;
  text-shadow:
    0 0 22px #30ffe1cc,
    0 0 44px #1b98ff99,
    0 0 92px #ee2ed8cc,
    0 0 120px #00fff8cc;
  animation: shine 2.2s infinite;
}

.headline {
  font-size: 1.8rem;
  margin-top: 1.4rem;
  margin-bottom: 2rem;
  text-shadow:
    0 0 25px #ff1ee9,
    0 0 38px #7f00ff,
    0 0 120px #00fff7;
  animation: pulseGlow 2.3s infinite alternate;
}

.notify-button {
  margin-top: 0.5em;
  background: linear-gradient(90deg, #ff1ee9 0%, #30ffe1 60%, #0a0080 100%);
  color: #1a0034;
  font-size: 1.14rem;
  border-radius: 33px;
  padding: 0.85em 2.5em;
  font-family: inherit;
  border: none;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 24px #ff1ee9cc, 0 0 34px #00fff799;
  transition: transform 0.22s, box-shadow 0.22s, background 0.33s;
  outline: none;
  animation: floatBtn 2.7s infinite cubic-bezier(0.4,0.09,0.35,1);
}

.notify-button:focus,
.notify-button:hover {
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 38px #ff1ee9ee, 0 0 60px #00fff7ee;
  background: linear-gradient(90deg, #30ffe1 10%, #ff1ee9 90%);
}

/* Social icons neon animation */
.social {
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.social a {
  color: #21ffe2;
  font-size: 1.85rem;
  filter: drop-shadow(0 0 12px #30ffe1cc);
  transition: color 0.19s, filter 0.19s, transform 0.22s;
  text-decoration: none;
  outline: none;
}

.social a:focus,
.social a:hover {
  color: #ff1ee9;
  filter: drop-shadow(0 0 21px #ff1ee9cc) brightness(1.25);
  transform: scale(1.22) rotate(-7deg);
}

/* Animations */
@keyframes shine {
  0%, 100% {
    text-shadow: 0 0 22px #30ffe1cc, 0 0 44px #1b98ff99, 0 0 92px #ee2ed8cc, 0 0 120px #00fff8cc;
  }
  50% {
    text-shadow: 0 0 33px #fff, 0 0 66px #e1ffea, 0 0 200px #ff1ee9cc;
  }
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 25px #ff1ee9, 0 0 38px #7f00ff, 0 0 120px #00fff7; }
  to   { text-shadow: 0 0 48px #fff, 0 0 82px #ff00d4, 0 0 180px #30ffe1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes floatBtn {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-16px); }
}