/* 
==================================================================
整体页面样式设置
==================================================================
*/
/* 设置页面的盒模型为 border-box，使得padding和border不会影响元素的宽度和高度 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 设置页面的基本字体、背景和颜色 */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif; /* 使用现代无衬线字体，确保可读性 */
    font-size: 16px; /* 正文字号设为16px，介于15-17px之间 */
    line-height: 1.6; /* 设置行高，提升阅读体验 */
    color: #333; /* 设置基本字体颜色为深灰，减少视觉疲劳 */
    background: linear-gradient(135deg, #4567b7, #a1d99b); /* 设置蓝绿色渐变背景，象征科技与可靠性 */
    animation: gradientBG 15s ease infinite; /* 应用渐变动画，使背景不断变化 */
    transition: background 0.5s ease-in-out; /* 设置背景过渡效果，提升视觉平滑性 */
}

/* 定义背景渐变的关键帧动画 */
@keyframes gradientBG {
    0% {
        background: linear-gradient(135deg, #4567b7, #a1d99b);
    }
    50% {
        background: linear-gradient(135deg, #9c27b0, #e91e63);
    }
    100% {
        background: linear-gradient(135deg, #ff5722, #ff9800);
    }
}

/* 
==================================================================
导航栏样式设置
==================================================================
*/
/* 设置固定在页面顶部的导航栏 */
.navbar {
    position: fixed; /* 固定定位，始终显示在顶部 */
    top: 0;
    width: 100%; /* 宽度为100%，适配所有屏幕 */
    background: rgba(69, 103, 183, 0.9); /* 半透明背景色，增强层次感 */
    display: flex;
    justify-content: space-around; /* 子元素均匀分布 */
    padding: 15px 0; /* 上下内边距15px */
    z-index: 1000; /* 设置较高的层级，确保导航栏在最上层 */
    transition: background 0.3s ease; /* 背景色过渡效果 */
}

/* 当页面滚动时，导航栏背景色加深 */
.navbar.scrolled {
    background: rgba(69, 103, 183, 1);
}

/* 导航栏链接样式 */
.navbar a {
    color: #fff; /* 链接文字颜色为白色 */
    text-decoration: none; /* 去除下划线 */
    font-weight: bold; /* 加粗字体 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
    font-size: 17px; /* 字号设为17px，符合标题的协调 */
}

/* 导航栏链接悬停时颜色变化 */
.navbar a:hover {
    color: #a1d99b; /* 辅色用于悬停效果，增强互动感 */
}

/* 
==================================================================
主容器布局
==================================================================
*/
/* 使用响应式网格布局，确保内容在不同屏幕上自适应排列 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* 每个板块最小宽度500px，自动适应 */
    gap: 40px; /* 设置网格间隙 */
    padding: 100px 40px 40px 40px; /* 设置内边距，上方留出导航栏空间 */
}

/* 
==================================================================
卡片样式设置
==================================================================
*/
/* 定义内容卡片的基础样式 */
.card {
    background: rgba(255, 255, 255, 0.1); /* 半透明白色背景，增强层次感 */
    border-radius: 10px; /* 圆角边框 */
    padding: 20px; /* 内边距20px，提升内容可读性 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动画过渡效果 */
}

/* 卡片悬停时的效果 */
.card:hover {
    transform: translateY(-10px); /* 轻微上移，增强互动反馈 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* 加深阴影，增加立体感 */
}

/* 
==================================================================
按钮样式设置
==================================================================
*/
/* 定义按钮的基础样式 */
.button {
    background: linear-gradient(45deg, #ff5722, #ff9800); /* 橙红色渐变，传达热情与动力 */
    border: none; /* 无边框 */
    border-radius: 25px; /* 圆角按钮 */
    color: #fff; /* 按钮文字颜色为白色 */
    padding: 10px 20px; /* 上下10px，左右20px的内边距 */
    cursor: pointer; /* 鼠标指针为手型 */
    transition: background 0.3s ease, transform 0.3s ease; /* 过渡效果 */
    font-size: 16px; /* 按钮文字大小 */
}

/* 按钮悬停时的效果 */
.button:hover {
    background: linear-gradient(45deg, #e64a19, #fb8c00); /* 颜色加深，增强点击感 */
    transform: scale(1.05); /* 轻微放大，增加互动性 */
}

/* 
==================================================================
视差滚动效果样式
==================================================================
*/
/* 定义具有视差效果的背景区域 */
.parallax {
    background-image: url('https://images.gptkong.com/demo/sample5.png'); /* 使用指定的装饰性图片 */
    height: 500px; /* 高度500px，确保视觉冲击力 */
    background-attachment: fixed; /* 固定背景，启用视差效果 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 禁止背景图片重复 */
    background-size: cover; /* 背景图片覆盖整个区域 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，增加立体感 */
    transition: transform 0.3s ease; /* 过渡效果 */
}

/* 
==================================================================
淡入动画样式
==================================================================
*/
/* 定义淡入效果的基础样式 */
.fade-in {
    opacity: 0; /* 初始透明 */
    transform: translateY(20px); /* 初始位置下移20px */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 过渡效果 */
}

/* 当元素可见时应用 */
.fade-in.visible {
    opacity: 1; /* 不透明 */
    transform: translateY(0); /* 复位位置 */
}

/* 
==================================================================
SVG动态图形样式
==================================================================
*/
/* 定义SVG图形的动画样式 */
.svg-graphic {
    width: 100px; /* 宽度100px */
    height: 100px; /* 高度100px */
    animation: rotate 5s linear infinite; /* 无限旋转动画 */
}

/* 定义旋转关键帧动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg); /* 起始旋转角度 */
    }
    to {
        transform: rotate(360deg); /* 结束旋转角度 */
    }
}

/* 
==================================================================
搜索栏样式设置
==================================================================
*/
/* 定义搜索栏的基础样式 */
.search-bar {
    display: flex;
    align-items: center; /* 垂直居中 */
    background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    border-radius: 20px; /* 圆角 */
    padding: 5px 15px; /* 内边距 */
    transition: background 0.3s ease; /* 过渡效果 */
}

/* 搜索栏悬停时的效果 */
.search-bar:hover {
    background: rgba(255, 255, 255, 0.4); /* 背景色加深 */
}

/* 搜索输入框样式 */
.search-bar input {
    border: none; /* 无边框 */
    background: transparent; /* 背景透明 */
    outline: none; /* 无轮廓线 */
    margin-left: 10px; /* 左外边距10px */
    color: #fff; /* 输入文字颜色为白色 */
    font-size: 16px; /* 输入文字大小 */
}

/* 
==================================================================
表格样式设置
==================================================================
*/
/* 定义表格的基础样式 */
table {
    width: 100%; /* 表格宽度100% */
    border-collapse: collapse; /* 边框合并 */
    margin: 20px 0; /* 上下外边距20px */
}

/* 表格、表头和表格单元格边框样式 */
table, th, td {
    border: 1px solid #ddd; /* 灰色边框 */
}

/* 表头和表格单元格的内边距和文本对齐 */
th, td {
    padding: 12px; /* 内边距12px */
    text-align: left; /* 文本左对齐 */
}

/* 表头背景颜色和文字颜色 */
th {
    background-color: rgba(69, 103, 183, 0.7); /* 压色导航栏背景色 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 17px; /* 表头文字大小 */
}

/* 
==================================================================
代码块样式设置
==================================================================
*/
/* 定义pre和code标签的基础样式 */
pre {
    background: rgba(0, 0, 0, 0.8); /* 深色背景，增强代码可读性 */
    color: #fff; /* 代码文字颜色为白色 */
    padding: 15px; /* 内边距15px */
    border-radius: 10px; /* 圆角边框 */
    overflow: auto; /* 自动出现滚动条 */
    font-size: 14px; /* 代码文字大小 */
    position: relative; /* 相对定位 */
}

/* 在代码块前添加标题 */
pre code::before {
    content: "CSS3 代码示例"; /* 代码块标题 */
    display: block;
    background: #333; /* 背景色 */
    color: #fff; /* 文字颜色 */
    padding: 5px 10px; /* 内边距 */
    border-top-left-radius: 10px; /* 左上圆角 */
    border-top-right-radius: 10px; /* 右上圆角 */
    font-weight: bold; /* 加粗字体 */
    font-size: 14px; /* 字体大小 */
}

/* 使标题不被遮挡 */
pre code {
    overflow: visible;
}

/* 
==================================================================
图片样式设置
==================================================================
*/
/* 定义装饰性图片的基础样式 */
img.decorative-image {
    width: 320px; /* 固定宽度320px */
    height: 320px; /* 固定高度320px */
    object-fit: cover; /* 保持图片比例且填满容器 */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果，增加立体感 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动画过渡效果 */
    margin: 10px auto; /* 自动左右外边距，实现居中 */
    display: block; /* 块级元素 */
}

/* 装饰性图片悬停时的效果 */
img.decorative-image:hover {
    transform: scale(1.05); /* 轻微放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

/* 
==================================================================
文字内容样式设置
==================================================================
*/
/* 设置h2到h4标题的字体和颜色 */
h2, h3, h4 {
    font-family: 'Lora', serif; /* 使用有衬线字体，增强标题的特色 */
    color: #fff; /* 标题文字颜色为白色 */
    margin-top: 20px; /* 标题上方外边距20px */
    margin-bottom: 10px; /* 标题下方外边距10px */
}

/* 设置段落文字的颜色和间距 */
p {
    color: #e0e0e0; /* 段落文字颜色为浅灰，增强可读性 */
    margin-bottom: 15px; /* 段落下方外边距15px */
    font-size: 16px; /* 字体大小16px */
}

/* 
==================================================================
链接样式设置
==================================================================
*/
/* 定义内部链接的基础样式 */
a.internal-link {
    color: #a1d99b; /* 辅色用于链接 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
    font-weight: bold; /* 加粗字体 */
}

/* 内部链接悬停时的效果 */
a.internal-link:hover {
    color: #ff9800; /* 点缀色用于悬停，吸引视线 */
}

/* 
==================================================================
折叠区域样式设置
==================================================================
*/
/* 定义折叠区域的容器样式 */
.details-container {
    margin: 20px 0; /* 上下外边距20px */
}

/* 定义详情标签的样式 */
details summary {
    background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    padding: 10px 15px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 指针为手型 */
    font-weight: bold; /* 加粗字体 */
    color: #fff; /* 文字颜色为白色 */
}

/* 展示详情内容的样式 */
details[open] summary {
    background: rgba(255, 255, 255, 0.4); /* 背景色加深 */
}

/* 详情内容样式 */
details p {
    background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    padding: 10px 15px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    margin-top: 10px; /* 顶部外边距10px */
    color: #e0e0e0; /* 文字颜色为浅灰 */
    font-size: 16px; /* 字体大小 */
}

/* 
==================================================================
响应式设计调整
==================================================================
*/
/* 针对最大宽度768px的设备，调整导航栏和容器布局 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* 垂直排列导航链接 */
        padding: 10px 0; /* 缩小内边距 */
    }

    .container {
        grid-template-columns: 1fr; /* 单列布局 */
        padding: 80px 20px 20px 20px; /* 调整内边距 */
    }

    img.decorative-image {
        width: 100%; /* 宽度100%，适应小屏幕 */
        height: auto; /* 高度自适应 */
    }

    h2, h3, h4 {
        font-size: 18px; /* 调整标题字体大小 */
    }

    p {
        font-size: 15px; /* 调整段落字体大小 */
    }
}

/* 针对最大宽度480px的设备，进一步优化布局 */
@media (max-width: 480px) {
    .navbar a {
        font-size: 16px; /* 调整导航链接字体大小 */
    }

    .button {
        padding: 8px 16px; /* 调整按钮内边距 */
        font-size: 15px; /* 调整按钮字体大小 */
    }

    .search-bar input {
        margin-left: 8px; /* 调整搜索输入框的左外边距 */
        font-size: 15px; /* 调整输入文字大小 */
    }
}

/* 
==================================================================
其他辅助样式
==================================================================
*/
/* 定义页面底部的样式 */
footer {
    background: rgba(69, 103, 183, 0.9); /* 导航栏相同背景色 */
    color: #fff; /* 文字颜色为白色 */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 内边距20px */
    margin-top: 40px; /* 顶部外边距40px */
    font-size: 16px; /* 字体大小16px */
}

/* 定义页面标题的样式 */
.page-title {
    text-align: center; /* 居中对齐 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 24px; /* 字体大小24px */
    margin-top: 60px; /* 顶部外边距60px */
    margin-bottom: 40px; /* 底部外边距40px */
}

/* 定义分隔线的样式 */
.separator {
    width: 60px; /* 宽度60px */
    height: 4px; /* 高度4px */
    background: #ff9800; /* 点缀色 */
    margin: 20px auto; /* 上下外边距20px，自动左右外边距，居中显示 */
    border-radius: 2px; /* 圆角 */
}