/* 
  整体页面的基础样式设置
  - 使用无衬线字体 'Roboto'，确保文字清晰易读
  - 设置背景色为白色，主文本颜色为深灰色，标题颜色为深蓝色
  - 确保页面无水平滚动，所有内容响应式布局
*/
body {
  font-family: 'Roboto', sans-serif;
  color: #424242;
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* 
  导航栏样式
  - 固定在页面顶部，具有半透明背景，提升科技感
  - 使用Flexbox进行布局，内容居中对齐
  - 导航链接在悬停时颜色变化，增强用户交互体验
*/
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(21, 101, 192, 0.9);
  padding: 15px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: #4CAF50;
}

/* 
  主内容区域样式
  - 使用Grid布局，确保内容模块化且响应式
  - 设置最大宽度，居中对齐，增加适当的内边距
*/
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  padding: 100px 20px 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 
  文章模块样式
  - 设置白色背景、圆角、阴影效果，营造立体感
  - 添加过渡效果，提升用户交互体验
*/
.article {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

/* 
  标题样式
  - h2 和 h3 标签设置不同的字体大小和颜色
  - 增加底部间距，提升可读性
*/
h2 {
  color: #1A237E;
  font-size: 24px;
  margin-bottom: 15px;
}

h3 {
  color: #1565C0;
  font-size: 20px;
  margin-bottom: 10px;
}

/* 
  段落样式
  - 设置字体大小，增加段落间距
  - 对代码块内文字进行样式调整，确保可读性
*/
p {
  font-size: 16px;
  margin-bottom: 20px;
}

pre {
  background-color: #F5F5F5;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', Courier, monospace;
  color: #D32F2F;
}

/* 
  表格样式
  - 设置表头背景色、文字对齐
  - 为表格添加边框和间距，提升可读性
*/
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #BDBDBD;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #E0E0E0;
}

/* 
  图片样式
  - 设置圆角、阴影、悬停效果
  - 确保图片在不同屏幕尺寸下自适应
*/
img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 
  按钮样式
  - 设置背景色、文字颜色、边框、圆角
  - 添加过渡效果，提升点击反馈
*/
.button {
  background-color: #4CAF50;
  color: #FFFFFF;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #388E3C;
}

.button:active {
  transform: scale(0.98);
}

/* 
  动画效果
  - 定义淡入上升动画
  - 应用于具有 .fade-in 类的元素
*/
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

/* 
  响应式设计
  - 使用媒体查询确保在不同屏幕尺寸下的布局优化
  - 调整主内容区域的网格列数
*/
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .navbar {
    flex-direction: column;
  }
  .navbar a {
    margin-bottom: 10px;
  }
}

/* 
  表单和按钮的无样式，以确保页面不包含表单元素
  - 隐藏任何可能的输入框、搜索框等
*/
input, textarea, button[type="submit"] {
  display: none;
}

/* 
  折叠区域样式
  - 使用细线和过渡效果，实现平滑的展开和折叠
  - 增加指示符，提示用户可展开区域
*/
.collapsible {
  background-color: #E3F2FD;
  color: #0D47A1;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.collapsible:hover {
  background-color: #BBDEFB;
}

.content {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #F1F1F1;
}

.active + .content {
  max-height: 500px; /* 足够的高度以显示内容 */
}

/* 
  强调类
  - 用于突出显示关键内容
  - 设置高亮颜色和加粗字体
*/
.highlight {
  color: #4CAF50;
  font-weight: bold;
}

/* 
  页脚样式
  - 设置背景色、文字颜色、内边距
  - 使用Flexbox进行布局，内容居中对齐
*/
.footer {
  background-color: #1A237E;
  color: #FFFFFF;
  padding: 20px;
  text-align: center;
}

/* 
  过渡动画的优化，确保所有动画效果流畅
*/
* {
  box-sizing: border-box;
  transition: all 0.3s ease;
}