body {
  width: 95.5%;
  max-width: 500px;
  background: #010101;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 60px;
  padding-left: 0;
  background-image: url('https://gd-hbimg.huaban.com/8c7c65ae93efaf2373aa331527d883bce6ae0f5092d19-pJRl3s_fw658');
  background-size: 58% auto;
  background-position: left center; /* 初始位置为左侧 */
  background-repeat: no-repeat;
  opacity: 0.8;
  height: 70vh;
  animation: animateBackground 10s infinite alternate;
}

@keyframes animateBackground {
  100% { background-position: right 50vh; } /* 背景位置为页面右侧，高度为50vh */
  50% { background-position: center 65vh; } /* 背景位置为页面中央，高度为75vh */
  0% { background-position: left 50vh; }   /* 背景位置为页面左侧，高度为100vh */
}

.video-container {
  width: 100%;
  max-height: 300px; /* 设置最大高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: #666 0.05px solid;
  border-radius: 10px;
}
#videoPlayer {
  width: 100%;
  height: 250px; /* 设置封面图高度为250px */
}
.button-container {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}
.button-container button {
  font-size: 17px; /* 设置按钮中文字的字体大小 */
  padding: 2px 8px; /* 设置按钮的内边距 */
  background-color: #ddd; /* 设置按钮的背景颜色 */
  color: #000; /* 设置按钮的文字颜色 */
  border: none; /* 去掉按钮边框 */
  border-radius: 3px; /* 设置按钮圆角 */
  cursor: pointer; /* 设置鼠标悬停时的光标 */
  transition: background-color 0.1s ease; /* 添加过渡效果 */
}
.button-container button:active {
  background-color: #b00; /* 设置按钮点击时的背景颜色 */
}
.title-container {
  margin-top: 15px; /* 与容器保持15px的距离 */
  text-align: left; /* 标题靠左对齐 */
  color: #ccc; /* 字体颜色 */
  font-size: 18px; /* 设置文字大小为15px */
  width: 95.5%; /* 让宽度与body一致 */
  text-indent: 2.5em; /* 标题文字右移两个字节 */
}
.description-container {
  margin-top: -5px; /* 与标题保持0px的距离 */
  text-align: left; /* 文字说明靠左对齐 */
  color: #aaa; /* 字体颜色 */
  font-size: 13px; /* 设置文字大小为13px */
  width: 85.5%; /* 让宽度与body一致 */
  text-indent: 2em; /* 说明文字右移两个字节 */
}
hr {
  border: none; /* 去掉默认边框 */
  height: 0.15px; /* 设置高度（粗细） */
  background-color: #aaa; /* 设置颜色 */
  margin: 8px 0; /* 设置上下边距 */
}
a {
  text-decoration: none;
}
.top-description {
  font-size: 12px; /* 设置字体大小为12px */
  color: #666; /* 字体颜色 */
  text-align: left;
  white-space: nowrap;
  overflow: hidden; /* 隐藏超出部分 */
  margin: 20px 0 0 -24em; /* 距离页面顶部10px，左侧缩进2em */
}
.fly-in-text {
  display: inline-block;
  opacity: 0; /* 初始不显示文字 */
  animation: flyin 1s ease forwards; /* 设置动画持续时间和一次执行 */
  animation-delay: calc(var(--char-index) * 0.1s); /* 根据字符索引延迟动画 */
}
@keyframes flyin {
  from {
    transform: translateX(100vw); /* 初始位置在视口外的右侧 */
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}