/* 全局样式设置 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif; /* 设置主字体为Arial，无衬线字体 */
  background: linear-gradient(135deg, #2c3e50, #34495e); /* 使用线性渐变背景，从深蓝过渡到灰蓝 */
  color: #ecf0f1; /* 设置文字颜色为浅灰色 */
  overflow-x: hidden; /* 禁止横向滚动条 */
}

/* 导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(44, 62, 80, 0.9); /* 半透明深蓝背景 */
  padding: 20px 40px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000; /* 确保导航栏在最上层 */
}

.navbar a {
  color: #ecf0f1;
  text-decoration: none;
  margin: 0 15px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: #1abc9c; /* 悬停时颜色变化为青绿色 */
}

/* 主容器样式 */
.container {
  max-width: 1200px; /* 最大宽度设为1200px */
  margin: 100px auto 50px; /* 上留100px防止被固定导航栏遮挡 */
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 3fr; /* 使用黄金比例布局，侧边栏1，主内容3 */
  grid-gap: 40px;
}

/* 侧边栏样式 */
.sidebar {
  background-color: rgba(52, 73, 94, 0.8); /* 半透明灰蓝背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.sidebar a {
  display: block;
  color: #ecf0f1;
  text-decoration: none;
  margin: 10px 0;
  font-size: 16px;
  transition: color 0.3s ease;
}

.sidebar a:hover {
  color: #e74c3c; /* 悬停时颜色变化为红色 */
}

/* 主内容样式 */
.main-content {
  background-color: rgba(44, 62, 80, 0.8); /* 半透明深蓝背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.main-content h2, .main-content h3 {
  color: #1abc9c; /* 标题颜色为青绿色 */
}

.main-content p {
  line-height: 1.6;
  font-size: 16px;
}

.main-content img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-content img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}

/* 提示信息样式 */
.alert {
  background-color: #e67e22; /* 橙色背景 */
  color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 18px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .container {
    grid-template-columns: 1fr; /* 单列布局 */
  }
  
  .sidebar {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .navbar a {
    margin: 10px 0;
  }
  
  .alert {
    font-size: 16px;
  }
}

/* 按钮样式 */
.button {
  background: linear-gradient(45deg, #1abc9c, #16a085);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  font-size: 16px;
  margin-top: 10px;
}

.button:hover {
  background: linear-gradient(45deg, #16a085, #1abc9c);
  transform: scale(1.05);
}

/* 图片装饰样式 */
.decorative-img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.decorative-img:hover {
  transform: rotate(5deg) scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* 章节导航系统样式 */
.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.chapter-nav a {
  background-color: #3498db;
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.chapter-nav a:hover {
  background-color: #2980b9;
}

/* 动画效果 */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.slide-in {
  transform: translateX(-50px);
  opacity: 0;
  animation: slideIn 1s forwards;
}

@keyframes slideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 按需添加更多CSS样式以满足设计需求 */