@media only screen and (min-width: 769px) {
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 避免滚动条出现 */
}
body {
    background-image: url("https://pic.imgdb.cn/item/6700e4e0d29ded1a8cbfcaee.jpg"); /* 设置初始背景图片 */
    background-size: cover; /* 背景图像将始终覆盖整个页面 */
    background-position: center; /* 背景居中 */
    background-repeat: no-repeat; /* 背景不重复 */
    background-attachment: fixed; /* 背景固定 */
}

  #canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute; /* 使用绝对定位让canvas覆盖在背景图片上 */
  top: 0;
  left: 0;
  z-index: 1; /* 确保canvas在最上层 */
}

    h1 {
      text-align: center;
      color: white;
      margin-top: 30px;
    }

    .container2 {
      display: flex;
      justify-content: center;
      /* 水平居中 */
      align-items: center;
      /* 垂直居中 */
      margin-top: -30px;
    }

    .content {
      width: 400px;
      padding: 20px;
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      background-color: rgba(250, 248, 248, 0.044);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-top: 10px;
      /* 将卡片在垂直方向上向下移动一定距离 */
      text-align: center;
      color: white;
      font-weight: bolder;
      font-size: 17px;
      line-height: 1.4em; /* 设置行高,即行间距 */
    }

    #first-line {
      color: white;
      font-weight: 900;
    }

    #second-line {
      color: white;
      font-weight: 900;
    }

    #third-line {
      color: white;
      font-weight: 900;
    }

    #sixth-line {
      color: white;
    }

    #last-line {
      color: yellow;
    }

    .contianer3 {
      display: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #aplayer {
      width: 400px;
      margin: 0 auto;
      border-radius: 10px;
      padding: 20px;
    }

    .button-contianer {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    #changeBg {
      background-color: rgba(249, 127, 147, 0.445); /* 背景色 */
      color: white; /* 文字颜色 */
      padding: 10px 20px; /* 内边距 */
      border: none; /* 去掉边框 */
      border-radius: 20px; /* 圆角 */
      cursor: pointer; /* 鼠标样式 */
      font-weight: 900;
      width: 95px;
      height: 40px;
    }

    #musicButton {
      background-color: rgba(249, 127, 147, 0.445);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 900;
      width: 95px;
      height: 40px;
    }

    #nextPageButton {
      background-color: rgba(249, 127, 147, 0.445);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 900;
      width: 95px;
      height: 40px;
    }

    #changeBg:hover,
    #musicButton:hover,
    #nextPageButton:hover,
    #changeBg:active,
    #musicButton:active,
    #nextPageButton:active {
      background-color: rgb(239, 129, 145); /* 按钮激活时的背景色 */
    }
}
