body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    text-align: center;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 0 0;
}

h1 {
    color: #666;
    font-size: 2em;
}

p {
    font-size: 1em;
    margin: 8px 0;
}

/* 图片自适应容器 */
.donation-item img {
    display: block; /* 消除图片下方的空白间隙 */
    width: 100%; /* 图片宽度自适应容器 */
    height: auto; /* 图片高度自动调整以保持比例 */
}

/* 捐赠容器的基础样式 */
.donation-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 项目之间平均分配空间 */
}

/* 捐赠项目的基础样式 */
.donation-item {
    margin-bottom: 20px; /* 项目之间的间距 */
    text-align: center; /* 文本居中显示 */
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* 窄屏时，每个捐赠项目占据一行 */
@media (max-width: 768px) {
    .donation-item {
        max-width: 87%;
        flex: 0 0 100%; /* 窄屏时每个项目占据全部宽度 */
    }
}

/* 宽屏时，每个捐赠项目占据一半宽度 */
@media (min-width: 769px) {
    .donation-item {
        flex: 0 0 calc(44% - 10px); /* 宽屏时每个项目占据一半宽度 */
    }
}

/* ... 其他样式保持不变 ... */

.project-showcase {
    background-color: #fff;
    padding: 5px;
    margin-top: 5px; /* 添加上边距以区分捐赠区域 */
}

.project-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 项目从左侧开始排列 */
}

.project-item {
    flex: 0 0 calc(20% - 10px); /* 调整项目宽度以适应每行显示更多项目 */
    margin-right: 20px; /* 项目之间的水平间距 */
    margin-bottom: 10px; /* 项目之间的垂直间距 */
    text-align: center; /* 文本左对齐 */
}

/* ... 其他样式保持不变 ... */
.project-showcase h2 {
    color: #666;
}

.project-item h4 {
    margin: 0; /* 移除标题的外边距 */
    padding: 10px 0; /* 添加内边距以增加点击区域 */
    color: #888; /* 设置标题颜色为灰色 */
    text-decoration: none; /* 移除链接的下划线 */
    font-size: 1em; /* 设置标题字体大小 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.project-item:hover h4 {
    color: #666; /* 鼠标悬停时改变标题颜色为黑色 */
}

/* ... 其他样式保持不变 ... */
a {font-size:16px} 
a:link {color: blue; text-decoration:none;} /*未访问：蓝色、无下划线 */
a:active {color: red; } /*激活：红色 */
a:visited {color:purple;text-decoration:none;} /*已访问：紫色、无下划线 */
a:hover {color: red; text-decoration:underline;} /*鼠标移近：红色、下划线 */

.project-item:nth-child(even) {
    margin-right: 0; /* 偶数项目右侧无间距，以实现紧密排列 */
}

/* 适配移动端 */
@media (max-width: 768px) {
    .project-item {
        flex: 0 0 100%; /* 移动端每行显示一个项目 */
        margin-right: 0; /* 移除移动端项目的水平间距 */
    }
}

.footer {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
    margin-top: 20px; /* 稍微减小上边距，使排版更紧密 */
}