/* 重置一些默认样式 */
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Noto Serif SC";
    /* 设置全局字体 */

}

/* 使用 Flexbox 布局 */
body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
}


/* 页眉容器样式 */
.headertext-container {
    height: 200px;
    /* 页眉高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 子元素水平分布 */
    align-items: center;
    /* 子元素垂直居中 */
    position: fixed;
    /* 固定定位，始终在视口顶部 */
    top: 0;
    /* 距离顶部 0 像素 */
    left: 0;
    /* 距离左侧 0 像素 */
    right: 0;
    /* 距离右侧 0 像素 */
    padding: 60px 80px;
    /* 内边距：上下 60 像素，左右 50 像素 */
    z-index: 1000;
    /* 确保页眉位于其他内容之上 */
    line-height: 20px;
    /* 行高 */
    white-space: nowrap;
    /* 防止内容换行 */
    box-sizing: border-box;
    /* 包含内边距和边框在高度中 */
}

/* 页眉样式 */
.headertext {
    font-size: 30px;
    /* 字体大小 */
    margin: 0;
    /* 移除默认外边距 */
    transition: color 0.3s ease;
    /* 颜色变化过渡效果 */
    font-family: 'Bauhaus 93', sans-serif;
    /* 字体设置 */
}

/* 主内容区域样式 */
.main-content {
    flex: 1;
    padding: calc(200px + 10px) 10px calc(50px + 10px) 10px;
    /* 使用 calc 动态计算 padding */
    box-sizing: border-box;
    /* 包含内边距和边框在高度中 */
}

/* 页脚样式 */
.footer {
    position: fixed;
    /* 固定定位，始终在视口底部 */
    left: 0;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    text-align: center;
    padding: 10px 0%;
    z-index: 1000;
    box-sizing: border-box;
}

/* 链接样式 */
a {
    text-decoration: none;
    /* 移除默认下划线 */
    color: #ffffff;
    /* 链接字体颜色为白色 */
}