*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top,#001f2f,#050505);
  color:#fff;
  min-height:100vh;
  text-align:center;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(rgba(0,255,255,.08),transparent 70%);
  animation:rotateBg 25s linear infinite;
  z-index:-1;
}

@keyframes rotateBg{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.container{
  width:95%;
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.header{
  margin-top:20px;
}

.header h1{
  color:#00ffff;
  font-size:48px;
  text-shadow:
    0 0 10px #00ffff,
    0 0 30px #00ffff,
    0 0 60px #00ffff;
}

.live{
  margin-top:12px;
  font-size:18px;
  font-weight:bold;
  color:#ff4444;
  animation:blink 1s infinite;
}

@keyframes blink{
  50%{
    opacity:.3;
  }
}

.slogan{
  margin-top:10px;
  color:#aaa;
  font-size:15px;
  letter-spacing:2px;
}

.card{
  margin-top:30px;
  background:rgba(10,10,10,.85);
  border:1px solid #00ffff;
  border-radius:25px;
  padding:25px;
  backdrop-filter:blur(12px);

  box-shadow:
    0 0 20px rgba(0,255,255,.4),
    0 0 50px rgba(0,255,255,.2);
}

.label{
  color:#aaa;
  font-size:13px;
  letter-spacing:4px;
}

.marquee{
  overflow:hidden;
  white-space:nowrap;
  margin-top:20px;
}

.marquee span{
  display:inline-block;
  padding-left:100%;
  animation:scrollSong 15s linear infinite;
  font-size:28px;
  font-weight:bold;
  color:#fff;
}

@keyframes scrollSong{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-100%);
  }
}

audio{
  width:100%;
  margin-top:25px;
  filter:drop-shadow(0 0 10px #00ffff);
}

.stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-top:30px;
}

.stat-box{
  min-width:200px;
  background:rgba(15,15,15,.9);
  border:1px solid #00ffff;
  border-radius:18px;
  padding:18px;
  font-size:18px;

  box-shadow:
    0 0 15px rgba(0,255,255,.3);
}

.stat-box:hover{
  transform:translateY(-3px);
  transition:.3s;
}

.love-area{
  margin-top:25px;
}

#loveBtn{
  border:none;
  padding:15px 35px;
  border-radius:50px;
  cursor:pointer;
  font-size:18px;
  font-weight:bold;
  color:#fff;

  background:
    linear-gradient(
      90deg,
      #ff0066,
      #ff3399
    );

  box-shadow:
    0 0 25px #ff0066;
}

#loveBtn:hover{
  transform:scale(1.05);
}

.history-card{
  margin-top:30px;
  background:rgba(15,15,15,.9);
  border:1px solid #00ffff;
  border-radius:20px;
  padding:25px;

  box-shadow:
    0 0 20px rgba(0,255,255,.3);
}

.history-card h2{
  color:#00ffff;
  margin-bottom:20px;
}

#history{
  list-style:none;
  text-align:left;
}

#history li{
  padding:12px;
  border-bottom:1px solid #222;
}

footer{
  margin-top:30px;
  color:#999;
  font-size:14px;
  line-height:1.8;
}

.equalizer{
  margin-top:20px;
  height:70px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
}

.equalizer span{
  width:10px;
  background:#00ffff;
  border-radius:10px;

  box-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff;

  animation:eq 1s infinite ease-in-out;
}

.equalizer span:nth-child(1){animation-delay:.0s;}
.equalizer span:nth-child(2){animation-delay:.1s;}
.equalizer span:nth-child(3){animation-delay:.2s;}
.equalizer span:nth-child(4){animation-delay:.3s;}
.equalizer span:nth-child(5){animation-delay:.4s;}
.equalizer span:nth-child(6){animation-delay:.5s;}
.equalizer span:nth-child(7){animation-delay:.6s;}

@keyframes eq{
  0%{
    height:10px;
  }

  50%{
    height:70px;
  }

  100%{
    height:10px;
  }
}

@media(max-width:700px){

  .header h1{
    font-size:32px;
  }

  .marquee span{
    font-size:20px;
  }

  .stat-box{
    width:100%;
  }

}