@charset "utf-8";
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: #000;
  color: #00ffea;
  animation: background-glow 5s infinite alternate; /* 添加背景闪烁动画 */
}

@keyframes background-glow {
  from {
    box-shadow: 0 0 10px rgba(0, 255, 234, 0.3);
  }
  to {
    box-shadow: 0 0 50px rgba(0, 255, 234, 0.8);
  }
}

header {
  background-color: #1a1a1a;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 255, 234, 0.5);
  position: relative;
}

header h1 {
  margin: 0;
  font-size: 48px;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  color: #00ffea;
  text-shadow: 0 0 5px rgba(0, 255, 234, 0.8);
  animation: text-blink 2s infinite; /* 标题闪烁 */
}

@keyframes text-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.5;
  }
}

header nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

header nav ul li a {
  text-decoration: none;
  color: #00ffea;
  font-size: 18px;
  transition: color 0.3s ease;
}

header nav ul li a:hover {
  color: #ff00ff;
}

/* 主体内容区域样式 */
main {
  padding: 20px;
}

main section h2 {
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  margin-bottom: 10px;
  color: #00ffea;
  text-shadow: 0 0 3px rgba(0, 255, 234, 0.7);
  position: relative;
  overflow: hidden;
}

main section h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 234, 0.5),
    transparent
  );
  animation: title-flow 5s linear infinite;
}

@keyframes title-flow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

main section p {
  font-size: 16px;
  line-height: 1.5;
}

main section.featured-section img.flowing-image {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  display: block;
  filter: hue-rotate(30deg) saturate(1.5); /* 图片色彩调整 */
  animation: image-flow 10s linear infinite; /* 图片流动动画 */
}

@keyframes image-flow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

footer {
  background-color: #1a1a1a;
  text-align: center;
  padding: 10px;
  color: #00ffea;
}

.container {
  text-align: center;
}

.parent {
  position: relative;
  background-color: #1a1a1a;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 255, 234, 0.5);
  height: 400px;
}
.box {
  font-family: NCL ROBOWAPIX;
  width: 80%px;
  height: 50%px;
  background-color: #18648a;
}
.image-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.image-container img {
  width: 157px;
  height: auto;
  margin: 8px;
}
.image-format {
  width: auto;
  height: 50px;
}
.text1 {
  margin: 0;
  font-size: 48px;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  color: #00ffea;
  text-shadow: 0 0 5px rgba(0, 255, 234, 0.8);
  animation: text-blink 2s infinite; /* 标题闪烁 */
}
/*这里下面部分是响应式卡片布局的css代码，呵呵*/
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* 单个卡片样式 */
.card {
  background-color: #f8459e;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  overflow: hidden;
  transition: transform 0.3s ease;
  text-align: center;
}

/* 卡片内容区域 */
.card-content {
  padding: 20px;
}
.card a {
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  color: #00ffea;
  text-shadow: 0 0 3px rgba(0, 255, 234, 0.7);
  position: relative;
  overflow: hidden;
}
/* 卡片描述 */
.card p {
  margin-bottom: 0;
  color: #6f0462;
}

/* 鼠标悬停效果 */
.card:hover {
  transform: translateY(-5px);
}
/*这里上面部分是响应式卡片布局的css代码，呵呵*/
.selection {
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 0px 80px 0px;
}

/* 图标样式 */
.icon {
  height: 30px;
  width: auto;
  margin-right: 10px;
}

.text {
  color: white;
  font-size: 24px;
  margin: 0 20px;
  margin: 0;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  color: #00ffea;
  text-shadow: 0 0 5px rgba(0, 255, 234, 0.8);
  animation: text-blink 2s infinite;
}
@keyframes text-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.5;
  }
}
/* 线条样式 */
.line {
  border-top: 2px solid rgba(0, 255, 234, 0.8);
  flex-grow: 1;
  margin-top: 15px;
}

/* 右侧线条样式 */
.right-line {
  margin-left: 20px;
}
body {
  background-image: url("background3.png");
  background-repeat: no - repeat;
  background-attachment: fixed;
}
.bg-image1 {
  background-image: url("background4.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: cyberpunkTransition 2s ease-in-out;
}

.bg-image2 {
  background-image: url("background3.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: cyberpunkTransition 2s ease-in-out;
}

@keyframes cyberpunkTransition {
  0% {
    filter: hue-rotate(0deg); /* 色调旋转角度 */
    opacity: 1; /* 透明度 */
    transform: scale(1); /* 放大效果 */
  }

  30% {
    filter: hue-rotate(120deg);
    opacity: 0.5;
    transform: scale(1.2);
  }

  78% {
    filter: hue-rotate(200deg);
    opacity: 0.6;
    transform: scale(0.6);
  }
  100% {
    filter: hue-rotate(360deg);
    opacity: 1;
    transform: scale(1);
  }
}