/* 顶部导航栏样式 */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #000; /* 黑色背景 */
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    z-index: 1000; /* 保证导航栏在最前面 */
}

#nav-logo {
    height: 40px; /* Logo 高度 */
    cursor: pointer; /* 鼠标悬停变成手型 */
}

/* 页面标题样式 */
#page-header {
    position: absolute; /* 绝对定位以方便控制位置 */
    top: 55px; /* 距页面顶部的距离 */
    left: 30px; /* 距页面左侧的距离 */
    margin: 0; /* 移除默认外边距 */
}

#page-header h1 {
    font-size: 2rem; /* 标题字体大小 */
    font-weight: bold; /* 标题加粗 */
    color: #333; /* 标题颜色 */
}


/* 主体内容样式 */
#task-container {
    margin-top: 110px; /* 留出导航栏的空间 */
    display: flex;
    flex-direction: row; /* 水平排列卡片 */
    justify-content: center; /* 居中对齐任务卡片 */
    gap: 20px; /* 卡片之间的间距 */
    padding: 20px;
    background-color: #f9f9f9; /* 浅灰背景 */
    min-height: 50vh; /* 确保占满整个页面 */
    flex-wrap: wrap; /* 超出屏幕时换行 */
}

/* 单个任务卡片样式 */
.task-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px; /* 固定宽度 */
    height: 270px; /* 设置一个固定的高度，确保任务卡片大小一致 */
    background-color: black; /* 白色背景 */
    border-radius: 15px; /* 圆角矩形 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
    padding: 20px;
    text-align: center;
    overflow: hidden; /* 防止内容超出边框 */
}

/* 调整任务卡片内部元素，避免内容挤压 */
.task-image {
    width: 100%; /* 宽度自动适应卡片 */
    height: 150px; /* 固定图片的高度 */
    object-fit: cover; /* 图片填充并保持比例 */
    border-radius: 10px; /* 图片圆角 */
}

/* 项目信息样式 */
.task-info {
    margin-top: 15px;
    flex-grow: 1; /* 填充剩余空间 */
}

.task-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
}

.task-date {
    font-size: 14px;
    color: #ffffff;
}

.page-subheader h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-left: 30px;
    margin-top: 60px;
}