/* 
主样式表：融合未来感与高级质感的网页设计
本样式表采用HTML5和CSS3技术，结合自然有机风格与智能科技元素，创造一个色彩丰富、层次分明且响应迅速的网页布局。设计理念强调视觉平衡与用户体验，通过使用线性和径向渐变、阴影效果、关键帧动画等高级CSS技术，营造出沉浸感强烈的科技美学氛围。同时，充分考虑不同设备的兼容性，确保在从320px到1920px的各种屏幕宽度下都能提供优质的视觉和交互体验。

1. 全局样式
- 设置网页的基本字体、背景色和整体布局。
- 使用流式布局和Flexbox确保内容在各种屏幕尺寸下自适应排列。
- 应用全局的颜色方案，确保主色、辅色和点缀色的协调搭配。

2. 头部导航
- 固定顶部导航栏，确保在滚动时始终可见。
- 使用Flexbox布局导航项，保持布局的灵活性和响应性。
- 添加悬停效果，增强用户的交互体验。

3. 主要内容区域
- 采用模块化设计，每个内容块宽度不低于500px，确保信息的清晰展示。
- 使用Grid布局实现复杂的多列排版，增加视觉层次感。
- 在内容块之间留有适当的空白，确保页面的呼吸感和整体平衡。

4. 侧边栏与互动模块
- 使用固定或粘性的布局方式，确保侧边栏在滚动时依然可见。
- 互动模块采用渐变背景和阴影效果，突出重点区域，吸引用户注意。

5. 图像与插画
- 所有装饰性图片采用圆角、阴影和悬浮效果处理，增强立体感。
- 使用CSS3的过渡效果，实现图片在悬停时的动态变化，提高页面的互动性。

6. 文字与排版
- 标题（h2/h3/h4）采用较大字号，确保可读性和视觉冲击力。
- 正文字体保持适中的大小和行间距，提升阅读体验。
- 使用字体阴影和不同颜色区分不同层级的文本，增强信息层次感。

7. 动画与过渡
- 应用关键帧动画为自然元素添加动态效果，如飘落的叶子或波动的水面。
- 使用平滑过渡效果，确保用户在与页面交互时的流畅体验。

8. 响应式设计
- 通过媒体查询实现不同屏幕尺寸下的布局调整，确保在移动设备和桌面设备上的一致性。
- 优化图片和视频等多媒体内容的呈现方式，适应不同的显示环境。

9. 表格与数据展示
- 表格采用交替的背景色和边框样式，提升数据的可读性和美观度。
- 使用Box Shadow为表格添加深度感，使其在页面中更具立体感。

10. 其他装饰元素
- 使用渐变线条和科技感装饰元素，增强页面的未来感。
- 通过CSS伪元素添加装饰性的细节，提升整体设计的精致度。

结语：
本样式表通过综合运用现代Web技术和视觉美学原则，打造出一个色彩丰富、层次分明且充满科技感的网页设计。每个细节的精心设计不仅提升了用户的视觉体验，也保证了网页在各种设备上的完美呈现。
*/

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #81C784 70%, #A1887F 25%, #2196F3 5%);
    color: #333;
    line-height: 1.6;
}

/* 顶部导航栏样式 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 243, 224, 0.9);
    padding: 20px 40px;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.navbar .logo {
    font-size: 1.5em;
    font-weight: bold;
    color: #A1887F;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.navbar ul li a {
    text-decoration: none;
    color: #333;
    font-size: 1em;
    transition: color 0.3s;
}

.navbar ul li a:hover {
    color: #2196F3;
}

/* 主内容区样式 */
.main-content {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 20px;
    padding: 140px 40px 40px 40px;
    max-width: 1920px;
    margin: 0 auto;
}

.article {
    background-color: rgba(255, 243, 224, 0.8);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.article h2, .article h3, .article h4 {
    color: #81C784;
}

.article pre {
    background-color: #FFF;
    padding: 15px;
    border-radius: 5px;
    overflow: visible;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.article pre code {
    font-family: 'Courier New', Courier, monospace;
    color: #A1887F;
}

/* 侧边栏样式 */
.sidebar {
    background-color: rgba(161, 136, 127, 0.9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.sidebar img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.sidebar img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 互动模块样式 */
.interactive {
    background-color: rgba(129, 199, 132, 0.8);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.interactive:hover {
    background-color: rgba(129, 199, 132, 1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr 2fr;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar ul {
        flex-direction: column;
        width: 100%;
    }

    .navbar ul li {
        width: 100%;
        text-align: left;
    }

    .main-content {
        grid-template-columns: 1fr;
    }

    .sidebar, .interactive {
        width: 100%;
    }
}

/* 按钮样式 */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2196F3;
    color: #FFF;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
    background-color: #1976D2;
    transform: translateY(-2px);
}

/* 卡片式设计 */
.card {
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 10px 0;
    transition: transform 0.3s, box-shadow 0.3s;
}

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

/* 图片样式 */
.decorative-image {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.decorative-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 代码块样式 */
.code-block {
    background-color: #2d2d2d;
    color: #ccc;
    padding: 15px;
    border-radius: 5px;
    overflow: visible;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
}

.code-block::before {
    content: "代码示例";
    position: absolute;
    top: -20px;
    left: 0;
    background-color: #81C784;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

thead {
    background-color: #81C784;
    color: #FFF;
}

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

tbody tr:nth-child(even) {
    background-color: #FFF3E0;
}

/* 按需隐藏或展示内容 */
.collapsible {
    background-color: #81C784;
    color: #FFF;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
    border-radius: 5px;
    margin-top: 10px;
}

.active, .collapsible:hover {
    background-color: #66BB6A;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: rgba(255, 243, 224, 0.8);
    border-radius: 5px;
}

.content p {
    margin: 10px 0;
}