/* 全局样式设置 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Merriweather', serif; /* 设置全局字体 */
    background-color: #F5EFE6; /* 主色调：米色，营造温暖复古氛围 */
    color: #5B4636; /* 辅色调：深棕色，增强文字可读性 */
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
}

/* 导航栏样式 */
.navbar {
    position: fixed; /* 固定在顶部 */
    top: 0;
    width: 100%; /* 全宽 */
    background-color: #3E2C2C; /* 辅色：深棕色 */
    padding: 10px 0; /* 上下内边距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影效果，增加层次感 */
    z-index: 1000; /* 确保导航栏在最前 */
}

.navbar ul {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 居中对齐 */
    list-style: none; /* 去除列表样式 */
    margin: 0;
    padding: 0;
}

.navbar li {
    margin: 0 15px; /* 左右间距 */
    position: relative; /* 为下拉菜单定位做准备 */
}

.navbar a {
    color: #F5EFE6; /* 点缀色：米色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 16px; /* 字体大小 */
    font-family: 'Bodoni', serif; /* 标题字体 */
}

.navbar a:hover {
    color: #D4AF37; /* 悬停时变为金色 */
    transition: color 0.3s; /* 过渡效果 */
}

/* 下拉菜单样式 */
.dropdown {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位 */
    top: 35px; /* 距离父元素顶部 */
    left: 0;
    background-color: #4B2E2E; /* 深色背景 */
    padding: 10px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
}

.navbar li:hover .dropdown {
    display: block; /* 悬停时显示 */
}

.dropdown a {
    color: #F5EFE6; /* 点缀色 */
    padding: 5px 10px; /* 内边距 */
    display: block; /* 块级显示 */
}

.dropdown a:hover {
    background-color: #D4AF37; /* 悬停背景色 */
    color: #3E2C2C; /* 悬停文字色 */
}

/* 主内容容器样式 */
.container {
    max-width: 1200px; /* 最大宽度 */
    margin: 100px auto 50px; /* 顶部预留导航栏空间，左右自动居中，底部间距 */
    padding: 20px;
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 换行 */
    gap: 20px; /* 间隙 */
}

/* 装饰性图片样式 */
img.decorative {
    max-width: 650px; /* 最大宽度 */
    width: 100%; /* 自适应宽度 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 阴影效果 */
    transition: transform 0.3s, box-shadow 0.3s; /* 过渡效果 */
}

img.decorative:hover {
    transform: scale(1.05); /* 悬停放大 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* 增强阴影 */
}

/* 文章样式 */
article {
    flex: 2 1 600px; /* 弹性布局，最小宽度600px */
    background-color: #FFFFFF; /* 背景白色 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
}

article h2, article h3 {
    font-family: 'Bodoni', serif; /* 标题字体 */
    color: #4B2E2E; /* 深色标题 */
}

article p {
    font-size: 16px; /* 正文字号 */
    margin-bottom: 16px; /* 段落间距 */
}

article code {
    background-color: #F0F0F0; /* 代码背景色 */
    padding: 2px 4px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-family: 'Courier New', monospace; /* 等宽字体 */
}

article pre {
    background-color: #F0F0F0; /* 代码块背景色 */
    padding: 10px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    overflow-x: auto; /* 横向滚动 */
}

article table {
    width: 100%; /* 表格宽度满 */
    border-collapse: collapse; /* 合并边框 */
    margin-bottom: 20px; /* 表格下间距 */
}

article table, article th, article td {
    border: 1px solid #ddd; /* 表格边框 */
}

article th, article td {
    padding: 12px; /* 单元格内边距 */
    text-align: left; /* 左对齐 */
}

article th {
    background-color: #D4AF37; /* 表头背景色 */
    color: #FFFFFF; /* 表头文字色 */
}

article tr:nth-child(even) {
    background-color: #F9F9F9; /* 偶数行背景色 */
}

/* 侧边栏样式 */
.sidebar {
    flex: 1 1 300px; /* 弹性布局，最小宽度300px */
    background-color: #3E2C2C; /* 深色背景 */
    color: #F5EFE6; /* 点缀色文字 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
}

.sidebar img {
    width: 100%; /* 图片宽度满 */
    border-radius: 50%; /* 圆形图片 */
    margin-bottom: 20px; /* 图片下间距 */
}

.sidebar p {
    font-size: 15px; /* 小字号 */
}

/* 代码示例样式 */
.code-example {
    background-color: #1E1E1E; /* 深色背景 */
    color: #C5C5C5; /* 代码颜色 */
    padding: 10px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-family: 'Courier New', monospace; /* 等宽字体 */
    overflow-x: auto; /* 横向滚动 */
    margin-bottom: 20px; /* 下间距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column; /* 竖排导航 */
    }
    .navbar li {
        margin: 10px 0; /* 导航项上下间距 */
    }
    .container {
        flex-direction: column; /* 主容器竖向排列 */
    }
    .sidebar {
        order: -1; /* 侧边栏置顶 */
    }
}