body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  max-width: 210mm; /* A4 纸宽度 */
  margin: auto; /* 居中展示 */
  padding: 40px 30px 40px 30px; //top right bottom left
  box-sizing: border-box;
  position: relative; /* 需要相对定位，以便伪元素相对于 body 定位 */
  border: 3px solid black; /* 设置边框样式：3px宽度，实线，黑色颜色 */
  margin-top: 80px; /* 将整个 body 内容往下移动 */
  background-color: #e9e8e2;
}

.paper {
  background-color: white;
}

//@media print {
//  .button-container {
//    display: none;
//  }
//  body {
//    /* 在打印页面的顶部添加额外的 padding */
//
//    margin-top: 0px
//    border: none;
//    box-shadow: none; /* 清除页面的阴影效果 */
//    /* 将页面的内容宽度设置为A4纸的宽度，以确保与打印出来的页面尺寸一致 */
//
//  }
//}

.button-container {
  position: fixed; /* 设置按钮为固定定位 */
  bottom: 20px; /* 距离浏览器窗口底部的距离 */
  right: 20px; /* 距离浏览器窗口右侧的距离 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-around; /* 将按钮水平居中排列，并平均分配间距 */
  margin-bottom: 20px; /* 添加一些间距，使按钮与页面内容分开 */
}

#printButton {
  z-index: 999; /* 设置按钮在页面的层级，避免被其他内容遮挡 */
  padding: 10px 16px; /* 设置按钮的内边距 */
  border: none; /* 去除按钮的边框 */
  border-radius: 10px; /* 设置按钮的圆角弧度 */
  background-color: #ffffff; /* 设置按钮的背景颜色为浅灰色 */
  color: #000; /* 设置按钮的文本颜色为黑色 */
  font-size: 16px; /* 设置按钮的文本字体大小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加按钮的阴影效果 */
  margin-right: 15px; /* Add margin between the buttons */
}

#printButton:hover {
  background-color: #dcdcdc; /* 设置按钮的背景颜色，当鼠标悬停在按钮上时 */
  cursor: pointer; /* 当鼠标悬停在按钮上时，显示手型光标 */
}

body::before {
  content: ""; /* 必须设置 content 属性，伪元素才会显示 */
  position: absolute; /* 使用绝对定位，覆盖在 body 上方 */
  top: -30px; /* 负值：往上拓展一圈 */
  right: -30px; /* 负值：往右拓展一圈 */
  bottom: -30px; /* 负值：往下拓展一圈 */
  left: -30px; /* 负值：往左拓展一圈 */

  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.3);
  z-index: -1; /* 使伪元素在 body 下方 */
  background-color: white;
}

.title {
  font-size: 1.9em;
  text-align: center;
  //font-weight: bold;
  margin-bottom: 10px;
}

.basic-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.basic-info-item {
  flex: 1;
  text-align: center;
}

h1 {
  padding-bottom: 0em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #bfbebe;
  font-weight: normal;
}
h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-block-start: -0.5em;
  margin-block-end: -0.7em;
}

h3 {
  //background-color: rgba(0, 0, 0, 0.05);
  //padding: 0 0.5em;
  //line-height: 1em;
  font-size: 1rem;
  margin-block-end: -0.7em;
  //border-radius: 4px;
}

/* 添加 @media print 媒体查询 */
@media print {
  .button-container {
    display: none;
  }
  body {
    border: none;
    margin-top: 0px;
    width: 210mm;
  }
  body::before {
    box-shadow: none; /* 清除页面的阴影效果 */
  }
}

@media screen and (max-width: 1000px) {
  body {
    zoom: 0.9; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 900px) {
  body {
    zoom: 0.8; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 800px) {
  body {
    zoom: 0.7; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 700px) {
  body {
    zoom: 0.6; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 600px) {
  body {
    zoom: 0.5; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 500px) {
  body {
    zoom: 0.4; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 400px) {
  body {
    zoom: 0.3; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 300px) {
  body {
    zoom: 0.2; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}
@media screen and (max-width: 200px) {
  body {
    zoom: 0.1; /* 设置页面整体缩放比例，根据需要调整缩放比例 */
  }
}