/* 菜单按钮样式 */
#menuButton {
  position: fixed;
  top: 0;
  left: 0;
  background: none;
  border: none; /* 移除边框 */
  padding: 0; /* 调整内边距 */
  z-index: 1002;
}

#menuButton img {
  width: 90px; /* 或您希望的尺寸 */
  height: auto; /* 保持图片的宽高比 */
  display: block; /* 使图片正常显示 */
  padding: 20px;
}

/* 左侧可隐藏菜单 */
.side-menu {
  width: 0;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0px;
  padding-top: 20%;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s;
  z-index: 1001; /* 确保菜单在页面内容之上 */
  -webkit-overflow-scrolling: touch;
}

/* 菜单项样式 */
.side-menu button,
.side-menu a {
  top: 50px;
  display: block;
  color: white;
  font-family: "Sometype Mono", "Noto Serif SC", serif, monospace;
  text-align: left;
  padding: 16px;
  text-decoration: none;
  font-size: 25px;
  border: none;
  background: none;
}
.side-menu p {
  bottom: 0;
  display: block;
  color: white;
  font-family: "Sometype Mono", "Noto Serif SC", serif, monospace;
  text-align: left;
  padding: 16px;
  text-decoration: none;
  font-size: 18px;
  border: none;
  background: none;
}

/* 页面内容样式 */
.menu-page {
  width: 30%;
  height: 100%;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 5%;
  padding-left: 2%;
  padding-right: 2%;
  background: rgba(255, 255, 255);
  z-index: 1002; /* 位于菜单之上 */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.menu-page h1 {
  text-align: right;
  color: #000;
  font-family: "Sometype Mono", "Noto Serif SC", serif, monospace;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

.menu-page p {
  text-align: left;
  color: #000;
  font-family: "Sometype Mono", "Noto Serif SC", serif, monospace;
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  margin-bottom: 30%;
}

.menu-page p .strong {
  font-weight: 700;
}

.menu-page p .italic {
  font-style: italic;
}

.menu-page button {
  position: fixed;
  top: 0;
  left: 0;
  background: none;
  border: none; /* 移除边框 */
  padding: 0;
}

.menu-page img {
  width: 90px; /* 或您希望的尺寸 */
  height: auto; /* 保持图片的宽高比 */
  display: block; /* 使图片正常显示 */
  padding: 10px;
}

/* 声音button */
/* 声音按钮的基本样式 */

/* 媒体查询 - 针对手机 */
@media (max-width: 600px) {
  .side-menu {
    width: 0; /* 较小屏幕上的菜单宽度 */
    padding-top: 30%;
  }

  .menu-page {
    width: 80%; /* 较小屏幕上的页面内容宽度 */
    padding: 10%;
    -webkit-overflow-scrolling: touch; /* iOS设备的惯性滚动 */
    overflow-y: scroll; /* 启用垂直滚动 */
    -webkit-touch-callout: auto;
  }

  /* 可以根据需要调整其他元素的样式 */
}

/* 媒体查询 - 针对平板电脑 */
@media (min-width: 601px) and (max-width: 1024px) {
  .side-menu {
    width: 0; /* 较大屏幕上的菜单宽度 */
    padding-top: 10%;
  }

  .menu-page {
    width: 50%; /* 较大屏幕上的页面内容宽度 */
    padding: 10%;
    -webkit-touch-callout: auto;
    -webkit-overflow-scrolling: touch; /* iOS设备的惯性滚动 */
    overflow-y: scroll; /* 启用垂直滚动 */
  }

  /* 可以根据需要调整其他元素的样式 */
}

/* 可以继续添加更多媒体查询以适应更大的屏幕尺寸 */