/* 网页通用样式 reset 和基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #c7d2fe;
    background: linear-gradient(to bottom, #0d1b2a, #4e54c8); /* 深邃背景渐变 */
    overflow-x: hidden; /* 防止水平滚动条 */
    line-height: 1.6; /* 增加行间距，提升阅读体验 */
}

a {
    text-decoration: none; /* 移除默认链接下划线 */
    color: inherit; /* 链接颜色继承父元素颜色 */
}

/* 全局容器样式 */
.container {
    max-width: 1200px; /* 限制内容区域最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 20px; /* 默认内边距 */
}

/* 标题通用样式 */
h2, h3 {
    font-family: 'Montserrat Bold', sans-serif;
    color: #ffffff; /* 标题文字颜色 */
    margin-bottom: 15px; /* 标题下外边距 */
    font-weight: bold; /* 确保标题加粗 */
}

h2 {
    font-size: 2.5em; /* 主标题字号 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 标题文字阴影，增强立体感 */
}

h3 {
    font-size: 1.8em; /* 副标题字号 */
}

p {
    margin-bottom: 15px; /* 段落下外边距 */
    font-size: 1em; /* 段落文字大小 */
    color: #c7d2fe; /* 段落文字颜色，略微偏灰的白色，在深色背景下更柔和 */
}

/* 代码块样式 */
pre {
    background-color: #1e293b; /* 代码块背景色，深色突出代码 */
    color: #f8f8f2; /* 代码文字颜色，浅色高亮 */
    padding: 20px; /* 代码块内边距 */
    border-radius: 8px; /* 代码块圆角 */
    overflow-x: auto; /* 水平方向内容溢出时显示滚动条 */
    margin-bottom: 20px; /* 代码块下外边距 */
    font-size: 0.9em; /* 代码字体稍小 */
    line-height: 1.4; /* 代码行间距 */
    tab-size: 4; /* 制表符宽度 */
    white-space: pre-wrap; /* 允许代码换行 */
    word-wrap: break-word; /* 长单词换行 */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* 代码块阴影 */
}

pre code {
    display: block; /* 确保代码块独占一行 */
    padding: 0; /* 移除代码内部默认内边距 */
}

/* 链接样式 */
a {
    color: #38bdf8; /* 链接颜色，亮蓝色 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
}

a:hover {
    color: #1e40af; /* 鼠标悬停时链接颜色 */
}

/* 分割线样式 */
hr {
    border: none;
    border-top: 1px solid #6b7280; /* 分割线颜色，柔和的灰色 */
    margin: 30px 0; /* 分割线上下的外边距 */
}

/* 卡片样式 */
.card {
    background-color: rgba(255, 255, 255, 0.05); /* 卡片背景，半透明白色 */
    border-radius: 10px; /* 卡片圆角 */
    padding: 25px; /* 卡片内边距 */
    margin-bottom: 20px; /* 卡片下外边距 */
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2); /* 卡片阴影 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 卡片边框，更显层次 */
}

.card h3 {
    margin-top: 0; /* 移除卡片标题顶部外边距 */
}

/* 视差滚动 Section 样式 */
.parallax-section {
    position: relative;
    height: 100vh; /* 视口高度 */
    overflow: hidden; /* 裁剪溢出内容 */
    display: flex;
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    text-align: center; /* 文本居中 */
    color: white; /* 文本颜色 */
    background-position: center; /* 背景位置居中 */
    background-size: cover; /* 背景图片覆盖整个区域 */
    background-repeat: no-repeat; /* 禁止背景重复 */
    padding: 0; /* 移除内边距，全屏展示 */
}

.parallax-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 叠加一层半透明黑色背景，增强文字对比度 */
    z-index: 1; /* 确保叠加层在内容下方 */
}

.parallax-content {
    position: relative;
    z-index: 2; /* 确保内容在叠加层之上 */
    padding: 20px; /* 内容内边距 */
}

/* 示例文章展示区域样式 */
.article-section {
    background-color: #111827; /* 文章展示区域背景色，更深沉的颜色 */
    padding: 40px 20px; /* 增加文章区域上下内边距 */
    border-radius: 12px; /* 文章区域圆角 */
    margin-bottom: 40px; /* 文章区域下外边距 */
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4); /* 文章区域阴影 */
}

.article-section h2 {
    color: #ffffff; /* 文章区域标题颜色 */
    border-bottom: 2px solid #6b7280; /* 标题下划线 */
    padding-bottom: 10px; /* 标题下划线与文字间距 */
    margin-bottom: 20px; /* 标题下外边距 */
}

.article-section p, .article-section ul, .article-section ol, .article-section table {
    color: #d1d5db; /* 文章区域段落等文本颜色，更柔和的灰色 */
    margin-bottom: 15px;
}

.article-section pre {
    background-color: #0f172a; /* 文章代码块背景色，更深邃 */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 代码块阴影 */
}

.article-section table {
    width: 100%;
    border-collapse: collapse; /* 合并表格边框 */
    margin-top: 10px;
}

.article-section th, .article-section td {
    border: 1px solid #4b5563; /* 表格边框颜色 */
    padding: 8px; /* 表格单元格内边距 */
    text-align: left; /* 文本左对齐 */
}

.article-section th {
    background-color: #374151; /* 表头背景色 */
    color: #fff; /* 表头文字颜色 */
    font-weight: bold; /* 表头文字加粗 */
}

/* 图片样式 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自适应列数网格 */
    gap: 15px; /* 网格间距 */
    margin-bottom: 20px; /* 图片网格下外边距 */
}

.image-grid img {
    width: 100%; /* 图片宽度100% */
    height: auto; /* 高度自适应 */
    border-radius: 8px; /* 图片圆角 */
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); /* 图片阴影 */
    transition: transform 0.3s ease; /* 变形过渡效果 */
}

.image-grid img:hover {
    transform: scale(1.05); /* 鼠标悬停时图片放大 */
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 15px;
    }

    h2 {
        font-size: 2.2em;
    }

    h3 {
        font-size: 1.6em;
    }

    p, pre, li {
        font-size: 0.95em;
    }

    .card {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 720px;
        padding: 10px;
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.4em;
    }

    .card {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .container {
        max-width: 360px;
        padding: 5px;
    }

    h2 {
        font-size: 1.6em;
    }

    h3 {
        font-size: 1.2em;
    }

    p, pre, li {
        font-size: 0.9em;
    }

    .card {
        padding: 10px;
    }

    .parallax-section {
        height: auto; /* 在小屏幕上允许视差滚动区域高度自适应 */
        padding: 50px 20px; /* 增加小屏幕视差滚动区域的上下内边距 */
    }
    .parallax-content {
        text-align: left; /* 小屏幕上文本左对齐，更易阅读 */
    }
}
/* 额外的动画效果和视觉增强 */
@keyframes aurora-move {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.aurora-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: aurora-move 15s linear infinite;
}

.vibrant-gradients {
    background: radial-gradient(circle at center, #ff9f1c, #ff5733, transparent); /* 放射渐变背景 */
}

.subtle-shadows * {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 为元素添加微妙的阴影 */
}

.rounded-corners * {
    border-radius: 8px; /* 为元素添加圆角 */
}