/* 全局样式设置 */
/* 设置页面的基础字体、背景颜色和文字颜色 */
body {
    font-family: 'Roboto', sans-serif; /* 使用Roboto无衬线字体，确保现代感和高可读性 */
    font-size: 16px; /* 设置基础字体大小 */
    line-height: 1.6; /* 行高设置，提升可读性 */
    color: #333333; /* 主文本颜色，深灰色，减轻视觉疲劳 */
    background: linear-gradient(135deg, #1e3c72 70%, #2a5298 25%, #ff8a00 5%); /* 主色调蓝色与橙色渐变背景 */
    margin: 0;
    padding: 0;
}

/* 固定导航栏样式 */
.navbar {
    position: fixed; /* 固定在顶部 */
    top: 0;
    width: 100%; /* 宽度100% */
    background-color: rgba(30, 60, 114, 0.9); /* 半透明深蓝背景 */
    padding: 15px 20px; /* 内边距 */
    display: flex; /* 使用Flex布局 */
    justify-content: space-between; /* 元素两端对齐 */
    align-items: center; /* 垂直居中 */
    z-index: 1000; /* 确保在最前 */
    transition: background-color 0.3s ease; /* 背景色平滑过渡 */
}

/* 导航栏滚动后背景颜色变化 */
.navbar.scrolled {
    background-color: rgba(30, 60, 114, 1); /* 不透明深蓝背景 */
}

/* 导航项样式 */
.nav-item {
    position: relative;
    padding: 10px 15px;
    color: #ffffff; /* 白色文字 */
    text-decoration: none; /* 去掉下划线 */
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease; /* 文字颜色过渡 */
}

/* 导航项悬停效果 */
.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #ff8a00; /* 点缀色橙色 */
    left: 50%;
    bottom: 0;
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-item:hover {
    color: #ff8a00; /* 悬停时文字变为橙色 */
}

.nav-item:hover::after {
    width: 100%;
    left: 0;
}

/* 面包屑导航样式 */
.breadcrumb {
    margin: 80px 20px 20px; /* 顶部留出导航栏空间 */
    font-size: 14px;
    color: #555555; /* 次要文字颜色 */
}

.breadcrumb a {
    color: #2a5298; /* 辅助色蓝色 */
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #ff8a00; /* 悬停时变为橙色 */
}

/* 容器与网格布局 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 每块最小宽度300px */
    gap: 20px; /* 网格间隙 */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto; /* 居中容器 */
}

/* 卡片样式 */
.card {
    background-color: #ffffff; /* 白色背景 */
    border: 1px solid #e0e0e0; /* 灰色边框 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    padding: 15px;
    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, #ff8a00, #e52e71); /* 斜向渐变橙色到粉色 */
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 4px; /* 圆角按钮 */
    font-size: 16px;
}

.button:hover {
    background: linear-gradient(45deg, #e52e71, #ff8a00); /* 悬停时渐变反转 */
}

/* 图片样式 */
img.decorative {
    width: 100%;
    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.decorative:hover {
    transform: scale(1.05); /* 悬停时略微放大 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* 加深阴影 */
}

/* 代码块样式 */
pre {
    background-color: #f5f5f5; /* 浅灰背景 */
    padding: 15px;
    border-radius: 8px;
    overflow: auto; /* 超出内容可滚动 */
    position: relative;
    margin-bottom: 20px;
}

/* 代码块内代码样式 */
pre code {
    font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
    font-size: 14px;
    color: #2a5298; /* 辅助色蓝色 */
    display: block;
    white-space: pre-wrap; /* 自动换行 */
}

/* 代码块标题样式 */
pre code::before {
    content: "CSS3 示例代码";
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #1e3c72; /* 主色调深蓝 */
}

/* 响应式设计媒体查询 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .breadcrumb {
        margin: 100px 10px 10px; /* 调整边距以适应小屏幕 */
    }

    .container {
        grid-template-columns: 1fr; /* 单列布局 */
        padding: 10px;
    }

    .button {
        width: 100%; /* 按钮全宽 */
        text-align: center;
    }
}

/* 标题样式 */
h2, h3, h4 {
    color: #1e3c72; /* 主色调深蓝 */
    margin-top: 20px;
    margin-bottom: 10px;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.5em;
}

/* 段落样式 */
p {
    font-size: 1em;
    margin-bottom: 15px;
    color: #333333;
}

/* 提示信息样式 */
.prominent-message {
    background-color: rgba(255, 138, 0, 0.1); /* 点缀色橙色背景 */
    border-left: 4px solid #ff8a00; /* 点缀色左边框 */
    padding: 10px 15px;
    margin: 20px;
    font-size: 1.2em;
    color: #2a5298; /* 辅助色蓝色 */
}

/* 按钮链接样式 */
a.button-link {
    text-decoration: none;
    background: linear-gradient(45deg, #ff8a00, #e52e71);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

a.button-link:hover {
    background: linear-gradient(45deg, #e52e71, #ff8a00);
}

/* 列表样式 */
ul, ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

/* 折叠区域样式 */
.details {
    margin-bottom: 15px;
}

details summary {
    cursor: pointer;
    font-weight: bold;
    color: #1e3c72;
}

details[open] summary {
    color: #ff8a00;
}

details p {
    margin-top: 10px;
    color: #555555;
}

/* 按钮样式 */
button {
    background: linear-gradient(45deg, #ff8a00, #e52e71);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 4px;
    font-size: 16px;
}

button:hover {
    background: linear-gradient(45deg, #e52e71, #ff8a00);
}