body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding-bottom: 60px; /* 确保至少有40px的空间，加上一些额外的空间以保证视觉效果 */
}


.active {
  background-color: #498ee2; /* 选择一个显眼的颜色 */
  color: white;
}

.navbar {
  background-color: #333;
  overflow: hidden;
  font-size: 16px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.container {
  width: 70%;
  margin: 20px auto;
  background: white;
  padding: 20px;
}

.data-frame {
  width: 90%; /* 数据框的宽度调整为容器的70% */
  margin: 0 auto 50px auto; /* 数据框居中显示，并增加底部外边距为20px */
  padding: 20px 30px; /* 增加数据框的左右内边距，确保内容不紧靠边框 */
  background-color: #ffffff; /* 指定背景色 */
}




.container h1, .container p, .container h2 {
  margin: 10px 0; /* 调整标题和段落的上下边距 */
}

.container a {
  display: block;
  margin: 10px 0; /* 调整链接的上下边距 */
  color: #337ab7;
  text-decoration: none;
}

.container a:hover {
  text-decoration: underline;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  bottom: 0;
  
}

/* Add margin to the bottom of the container to make space for the footer */
.container {
  margin-bottom: 50px; /* Adjust this value based on the height of your footer */
}


@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}