body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F0E6FA; /* 浅紫罗兰背景 */
    color: #333;
    line-height: 1.6;
}

.container {
    width: 90%; /* 稍微放宽容器宽度 */
    max-width: 1200px; /* 设置最大宽度 */
    margin: auto;
    overflow: hidden;
    padding: 0 20px; /* 增加左右内边距 */
}

header {
    background-color: #9932CC; /* 深紫罗兰头部 */
    color: white;
    padding: 10px 0;
    /* text-align: center; */ /* 移除居中对齐 */
    overflow: hidden;
}

header .container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 标题和导航两端对齐 */
    align-items: center; /* 垂直居中 */
}

header h1 {
    margin: 0;
    color: #EE82EE; /* 紫罗兰色标题 */
    /* float: left; */ /* 移除浮动 */
}

header nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

header nav li {
    display: inline-block; /* 使用 inline-block */
    margin-left: 20px; /* 调整左外边距 */
    /* padding: 0 20px 0 20px; */ /* 移除内边距 */
}

header a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    padding: 5px 10px; /* 增加链接点击区域 */
    transition: color 0.3s ease; /* 添加过渡效果 */
}

header a:hover {
    color: #EE82EE; /* 紫罗兰色悬停效果 */
}

#hero {
    background: #8A2BE2; /* 蓝紫罗兰背景 */
    color: white;
    min-height: 500px; /* 增加最小高度 */
    text-align: center;
    padding: 80px 20px; /* 调整内边距 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中内容 */
    justify-content: center; /* 水平居中内容 */
    background-image: url('hdqb.jpeg'); /* 背景图片 */
    background-size: cover; /* 覆盖整个区域 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 不重复 */
    position: relative; /* 用于伪元素叠加层 */
}

/* 添加一个半透明叠加层，提高文字可读性 */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明 */
    z-index: 1; /* 确保叠加层在背景图上方 */
}

#hero .container {
    position: relative; /* 确保内容在叠加层上方 */
    z-index: 2;
    /* Flexbox handled by parent */
}

#hero h2 {
    margin-top: 0;
    font-size: 60px; /* 调整字体大小 */
    margin-bottom: 20px; /* 增加底部外边距 */
}

#hero p {
    font-size: 20px; /* 调整字体大小 */
    margin-bottom: 30px; /* 增加底部外边距 */
}

#features, #media, #news, #community, #about, #download {
    padding: 60px 0; /* 增加 section 的上下内边距 */
    text-align: center;
}

#features h2,
#media h2,
#news h2,
#community h2,
#about h2,
#download h2 {
    color: #9932CC; /* 深紫罗兰标题 */
    margin-bottom: 40px; /* 增加标题底部外边距 */
}

#features {
     background-color: #F0E6FA; /* 浅紫罗兰背景 */
}

#media {
     background-color: #DDA0DD; /* 淡紫罗兰背景 */
}

#news {
     background-color: #F0E6FA; /* 浅紫罗兰背景 */
}

#community {
     background-color: #DDA0DD; /* 淡紫罗兰背景 */
}

#about {
    background-color: #F0E6FA; /* 浅紫罗兰背景 */
}

#download {
     background-color: #DDA0DD; /* 淡紫罗兰背景 */
}

.feature-list,
.media-gallery,
.news-list,
.community-links,
.download-links {
    margin-top: 30px;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 居中对齐 */
    gap: 30px; /* 增加元素之间的间距 */
    flex-wrap: wrap; /* 允许项目换行 */
}

.media-item {
    max-width: 100%; /* 图片最大宽度为其父容器宽度 */
    height: auto; /* 高度自动调整，保持图片比例 */
    border-radius: 8px; /* 添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    /* 如果需要固定图片大小，可以使用 width 和 height，但要注意保持比例或使用 object-fit */
}

.feature-item,
.news-item {
    flex-basis: calc(33% - 20px); /* 控制项目宽度，考虑 gap */
    background: white; /* 白色背景 */
    padding: 30px; /* 增加内边距 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
    text-align: left; /* 左对齐文本 */
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

.feature-item:hover,
.news-item:hover {
    transform: translateY(-10px); /* 悬停时向上移动 */
}

.feature-item h3 {
    color: #EE82EE; /* 紫罗兰色标题 */
    margin-top: 0;
    margin-bottom: 15px; /* 增加底部外边距 */
}

.news-item h3 {
    color: #9932CC; /* 深紫罗兰标题 */
    margin-top: 0;
    margin-bottom: 10px; /* 增加底部外边距 */
}

.news-item a {
    color: #8A2BE2; /* 蓝紫罗兰链接 */
    text-decoration: none;
    font-weight: bold;
    display: inline-block; /* 使链接成为块级元素以应用外边距 */
    margin-top: 15px; /* 增加顶部外边距 */
}

.news-item a:hover {
    text-decoration: underline;
    color: #9932CC; /* 深紫罗兰悬停效果 */
}

.community-links a,
.download-links a {
    color: white; /* 白色链接 */
    text-decoration: none;
    font-weight: bold;
    background-color: #EE82EE; /* 紫罗兰色背景 */
    padding: 12px 25px; /* 调整内边距 */
    border-radius: 5px;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.community-links a:hover,
.download-links a:hover {
    background-color: #9932CC; /* 深紫罗兰悬停效果 */
}

.btn {
    display: inline-block;
    background: #EE82EE; /* 紫罗兰色按钮 */
    color: white;
    padding: 12px 30px; /* 调整内边距 */
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 18px; /* 调整字体大小 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.btn:hover {
    background: #9932CC; /* 深紫罗兰悬停效果 */
}

footer {
    background-color: #8A2BE2; /* 蓝紫罗兰底部 */
    color: white;
    text-align: center;
    padding: 20px 0; /* 调整内边距 */
    margin-top: 40px; /* 增加顶部外边距 */
}

footer .container {
    /* Flexbox not needed */
}

/* Basic responsiveness */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    header .container {
        flex-direction: column; /* 导航栏在小屏幕上垂直堆叠 */
        align-items: flex-start;
    }

    header h1,
    header nav {
        float: none; /* 移除浮动 */
        text-align: center; /* 居中对齐 */
        width: 100%;
    }

    header nav ul {
        text-align: center; /* 导航链接居中 */
        margin-top: 10px;
    }

    header nav li {
        margin: 0 10px; /* 调整导航链接间距 */
    }

    #hero h2 {
        font-size: 40px;
    }

    #hero p {
        font-size: 16px;
    }

    .feature-list, .news-list, .community-links, .download-links {
        flex-direction: column; /* 项目在小屏幕上垂直堆叠 */
        align-items: center; /* 垂直居中 */
    }

    .feature-item, .news-item {
        flex-basis: 90%; /* 项目宽度设置为容器宽度的90% */
    }

    .community-links a, .download-links a {
        width: calc(100% - 50px); /* 按钮宽度适应容器 */
        margin-bottom: 10px; /* 增加按钮底部间距 */
    }
}