/* 设置音频播放器的整体样式 */
audio {
  width: 70%; /* 根据需要调整宽度 */
  background-color: none; /* 背景颜色 */
  border-radius: 30px; /* 圆角 */
  padding: 10px; /* 内边距 */
  margin: 10px auto; /* 外边距，使播放器居中 */
  display: inline-block; /* 使块级元素水平居中 */
}

/* 尝试自定义进度条的颜色（可能仅部分浏览器有效）*/
audio::-webkit-media-controls-panel {
  background-color: #ccff99; /* 播放器面板背景色 */
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button,
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #333; /* 控制按钮颜色 */
}

audio::-webkit-media-controls-timeline {
  background-color: none; /* 进度条背景颜色 */
}

audio::-webkit-media-controls-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #3498db, #2ecc71); /* 自定义进度条已播放部分颜色 */
  height: 100%;
  width: 0; /* 初始宽度为0 */
  transition: width 0.3s ease; /* 平滑过渡效果 */
}



/* 容器样式 */
.audio-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  flex-direction: column;  /* 子元素垂直排列 */
  width: 100%;             /* 宽度占满父容器 */
  max-width: 600px;        /* 最大宽度限制 */
  margin: 5px auto;       /* 上下外边距为5px, 左右自动使整个div居中 */
  padding: 10px;           /* 内边距 */
  /* background-color: #f9f9f9;*/ /* 背景颜色 */
  border-radius: 10px;     /* 圆角 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
  border-bottom: 3px solid #66cccc; /* 下边框：2像素宽，实线，颜色#3498db */
}

/* span 文本样式 */
.audio-container span {
  font-size: 1.2em;        /* 字体大小 */
  font-style: oblique;
  color: #ff6666;             /* 文字颜色 */
  margin-bottom: 5px;     /* 底部间距 */
}

/* audio 样式 */
.audio-container audio {
  width: 100%;             /* 宽度占满父容器 */
}

.audio-container sub {
   display: inline-block;
   font-size: 1.1em;     
   color: #66cc99;           
}

.separator {
   border: none; /* 移除默认边框 */
   border-top: 2px solid #996699; /* 加粗上边框，可以设置颜色 */
   margin: 10px 0; /* 设置上下的边距 */
}