body {
  position: relative;
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle at 50% 0%, rgba(138,43,226,0.2), transparent 50%), black;
  color: white;
  font-family: 'Inter', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
  animation: fadeIn 1s ease-out;
  z-index: 0;
}

.header {
  text-align: center;
}

.header h1 {
  font-size: 45px;
  margin: 10px;
  text-shadow: 0px 0px 3px white;
}

.header p {
  font-size: 16px;
  margin: 5px 0;
  text-shadow: 0px 0px 15px white;
}

.light {
  position: absolute;
  width: 0;
  height: 0;
  background: #fff;
  box-shadow: 0 0 25px 10px #d1d1d1;
  opacity: 0;
  animation: floatDown 7s infinite linear;
  z-index: -1;
}

.x1 { left: 10%; animation-duration: 6s; transform: scale(1.4); }
.x2 { left: 30%; animation-duration: 4s; transform: scale(0.8); }
.x3 { left: 50%; animation-duration: 5.5s; transform: scale(1.2); }
.x4 { left: 70%; animation-duration: 7s; transform: scale(1.7); }
.x5 { left: 90%; animation-duration: 4.2s; transform: scale(0.9); }

@keyframes floatDown {
  0% { top: -100px; opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; top: 100vh; }
  100% { opacity: 0; top: 120vh; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#now-playing {
  font-size: 18px;
  margin-top: -11px;
  margin-bottom: 15px;
  color: #ffffff;
}

#listeners {
  font-size: 18px;
  margin-bottom: 15px;
  color: #ffffff;
}

#telegram {
  font-size: 18px;
  margin-top: 2px;
  margin-bottom: 25px;
  color: #ffffff;
  text-decoration: none;
}

.telegram a {
  color: #ffffff;
  text-decoration: none;
}

.telegram a:hover {
  text-decoration: underline;
}

.telegram-link {
    color: #ffffff;
    text-decoration: none;
}

#tglink {
    color: #ffffff;
    text-decoration: none;
}

.telegram-link:hover {
    text-decoration: underline;
}