/* 基本字体设置 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 设置苹果字体 */
  margin: 0px;
}

/* Header 样式 */
header.top {
  display: flex;
  margin: 0px;
  height: 200px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap; /* 防止换行 */
}

header.top img {
  margin: 0px 10px 0px 10px;
}

header.top div {
  display: flex;
  flex-direction: column; /* 让 h1 和 h2 垂直排列 */
  text-align: left; /* 让文本左对齐 */
}

#language {
  display: flex;
  flex-direction: row;
  text-align: left; /* 让文本左对齐 */
  margin: 90px 20px 90px 40px;
}

#language img {
  width: auto;
  height: 30px;
}

header.top h1 {
  font-family: Microsoft YaHei;
  font-size: 600%;
  color: #104b28;
  padding: 15px 0px 0px 0px;
  margin: 0px;
  max-width: 100%;
  white-space: nowrap; /* 防止换行 */
}

header.top h2 {
  font-family: Microsoft YaHei;
  font-size: 200%;
  color: #104b28;
  padding: 0px;
  margin: 0px 0px 0px 10px;
}

/* 响应式调整：小屏幕时修改字体大小 */
@media screen and (max-width: 768px) {
  #LaboratoryLogo {
    height: 40px;
    width: auto;
    max-width: 100%; /* 限制图片的最大宽度 */
  }
  
  header.top {
    height: auto; /* 高度自适应 */
    padding: 10px; /* 添加内边距 */
  }

  header.top h1 {
    font-size: 150%; /* 调整标题字体 */
  }

  header.top h2 {
    font-size: 100%; /* 调整副标题字体 */
  }

  header.top div {
    text-align: center; /* 小屏幕时文本居中 */
  }

  #language {
    margin: 20px 10px; /* 调整语言选择的间距 */
    font-size: 80%;
  }

  #language img {
    height: 25px; /* 调整图标的高度 */
  }  
}

/* 导航栏样式 */
nav {
  height: 45px;
  background-color: #f5f5f7;
  text-align: center;
}

nav ul {
  font-size: 160%;
  list-style-type: none;
  padding: 5px 0px 0px 0px;
  margin: auto;
}

nav ul li {
  display: inline;
  padding: 5px 20px 5px 20px;
}

nav ul li a:link {
  color: black;
  border-bottom: none;
  font-weight: bold;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

nav ul li.selected {
  background-color: #ddddde;
}

@media screen and (max-width: 768px) {
  nav {
    height: 30px;
  }
  
  nav ul {
    font-size: 80%; /* 缩小字体 */
  }

  nav ul li {
    padding: 5px 10px; /* 缩小间距 */
  }
}

/* 内容区域布局 */
div#tableContainer {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

div#tableRow {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

section#section_groupPhoto,
section#text,
#news {
  border-style: groove;
  border-width: thin;
  border-color: #ddddde;
  border-radius: 15px;
  padding: 20px;
  text-align: left;
}

section#section_groupPhoto {
  flex: 1;
  max-width: 33%; /* 默认占三分之一宽度 */
  text-align: center; /* 让内容居中 */
}

section#text {
  flex: 2;
  max-width: 50%; /* 默认占一半宽度 */
}

#news {
  flex: 1;
  max-width: 33%; /* 默认占三分之一宽度 */
}

.thumbnail, .article_thumbnail {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 15px; /* 设置圆角 */
  transition: transform 0.3s ease;
}

.thumbnail:hover, .article_thumbnail:hover {
  transform: scale(1.05); /* 放大效果 */
}

@media screen and (max-width: 768px) {
  section#section_groupPhoto,
  section#text,
  #news {
    max-width: 100%; /* 在小屏幕时占满全宽 */
    margin: 10px 0; /* 增加间距 */
  }

  section#section_groupPhoto {
    padding: 10px; /* 调整内边距 */
  }

  section#text {
    padding: 10px;
  }

  #news {
    padding: 10px;
  }

  .thumbnail, .article_thumbnail {
    max-width: 100%; /* 确保图片大小适应 */
  }
}

/* 文字样式 */
section#text h1 {
  font-size: 150%;
}

section#text p {
  line-height: 1.6; /* 设置段落行间距 */
}

@media screen and (max-width: 768px) {
  section#text h1 {
    font-size: 120%; /* 调整标题大小 */
  }

  section#text p {
    font-size: 90%; /* 调整段落字体 */
  }
}

/* 新闻区域样式 */
#news header a {
  font-size: 120%; /* 调整链接字体 */
  color: black; /* 设置颜色 */
  text-decoration: none; /* 去掉下划线 */
  font-weight: bold; /* 加粗 */
  transition: transform 0.3s ease;
  display: inline-block;
}

#news header a:hover {
  transform: scale(1.1); /* 放大效果 */
}

#news article {
  margin: 30px 10px;
}

@media screen and (max-width: 768px) {
  #news header a {
    font-size: 110%; /* 缩小字体 */
  }
}

/* 页脚样式 */
footer {
  background-color: #675c47;
  color: #efe5d0;
  text-align: center;
  padding: 15px;
  margin: 0px 10px 10px 10px;
  font-size: 90%;
}

@media screen and (max-width: 768px) {
  footer {
    padding: 10px; /* 减小内边距 */
    font-size: 80%; /* 缩小字体 */
  }
}