body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #fff;
  overflow: hidden;
}

h1 {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 50px;
  font-size: 48px;
  text-shadow: 0 0 10px #00ffea, 0 0 20px #00ffea, 0 0 30px #00ffea, 0 0 40px #00ffea, 0 0 50px #00ffea, 0 0 60px #00ffea, 0 0 70px #00ffea;
  transition: all 0.3s ease;
  animation: neonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes neonGlow {
  from {
    text-shadow: 0 0 10px #00ffea, 0 0 20px #00ffea, 0 0 30px #00ffea, 0 0 40px #00ffea, 0 0 50px #00ffea, 0 0 60px #00ffea, 0 0 70px #00ffea;
  }
  to {
    text-shadow: 0 0 20px #00ffea, 0 0 30px #00ffea, 0 0 40px #00ffea, 0 0 50px #00ffea, 0 0 60px #00ffea, 0 0 70px #00ffea, 0 0 80px #00ffea;
  }
}

h1:hover {
  transform: scale(1.1);
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* 生成 128 种冷色调颜色的渐变 */
  background: linear-gradient(45deg,
    hsl(180, 100%, 50%), hsl(185, 100%, 50%), hsl(190, 100%, 50%), hsl(195, 100%, 50%),
    hsl(200, 100%, 50%), hsl(205, 100%, 50%), hsl(210, 100%, 50%), hsl(215, 100%, 50%),
    hsl(220, 100%, 50%), hsl(225, 100%, 50%), hsl(230, 100%, 50%), hsl(235, 100%, 50%),
    hsl(240, 100%, 50%), hsl(245, 100%, 50%), hsl(250, 100%, 50%), hsl(255, 100%, 50%),
    hsl(260, 100%, 50%), hsl(265, 100%, 50%), hsl(270, 100%, 50%), hsl(275, 100%, 50%),
    hsl(280, 100%, 50%), hsl(285, 100%, 50%), hsl(290, 100%, 50%), hsl(295, 100%, 50%),
    hsl(300, 100%, 50%), hsl(305, 100%, 50%), hsl(310, 100%, 50%), hsl(315, 100%, 50%),
    hsl(320, 100%, 50%), hsl(325, 100%, 50%), hsl(330, 100%, 50%), hsl(335, 100%, 50%),
    hsl(340, 100%, 50%), hsl(345, 100%, 50%), hsl(350, 100%, 50%), hsl(355, 100%, 50%),
    hsl(0, 100%, 50%), hsl(5, 100%, 50%), hsl(10, 100%, 50%), hsl(15, 100%, 50%),
    hsl(20, 100%, 50%), hsl(25, 100%, 50%), hsl(30, 100%, 50%), hsl(35, 100%, 50%),
    hsl(40, 100%, 50%), hsl(45, 100%, 50%), hsl(50, 100%, 50%), hsl(55, 100%, 50%),
    hsl(60, 100%, 50%), hsl(65, 100%, 50%), hsl(70, 100%, 50%), hsl(75, 100%, 50%),
    hsl(80, 100%, 50%), hsl(85, 100%, 50%), hsl(90, 100%, 50%), hsl(95, 100%, 50%),
    hsl(100, 100%, 50%), hsl(105, 100%, 50%), hsl(110, 100%, 50%), hsl(115, 100%, 50%),
    hsl(120, 100%, 50%), hsl(125, 100%, 50%), hsl(130, 100%, 50%), hsl(135, 100%, 50%),
    hsl(140, 100%, 50%), hsl(145, 100%, 50%), hsl(150, 100%, 50%), hsl(155, 100%, 50%),
    hsl(160, 100%, 50%), hsl(165, 100%, 50%), hsl(170, 100%, 50%), hsl(175, 100%, 50%)
  );
  background-size: 1000% 1000%;
  /* 调整动画时间，让变换更顺畅 */
  animation: gradient 30s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  transition: all 0.3s ease;
}

.content p {
  font-size: 36px;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: colorChange 1s infinite;
}

@keyframes colorChange {
  0% { color: #FF0000; }
  12.5% { color: #FF7F00; }
  25% { color: #FFFF00; }
  37.5% { color: #00FF00; }
  50% { color: #0000FF; }
  62.5% { color: #4B0082; }
  75% { color: #9400D3; }
  87.5% { color: #FF00FF; }
  100% { color: #FF0000; }
}

.content p:hover {
  transform: scale(1.1);
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.beian-number {
  color: white;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.beian-number:hover {
  color: #e60073;
  text-decoration: underline;
}