/* 定义 HTML 和 Body 的全局样式 */
html, body {
    height: 100%;
    min-height: 100vh; /* 确保页面至少填满视口 */
    margin: 0; /* 去掉默认外边距 */
    padding: 0; /* 去掉默认内边距 */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 布局主轴方向为垂直 */
    align-items: center; /* 内容水平居中 */
    justify-content: flex-start; /* 内容从顶部开始对齐 */
    background-image: url('/wallpaper/壁纸.jpg'); /* 设置背景图 */
    background-size: cover; /* 背景图覆盖整个页面 */
    background-position: center; /* 背景图居中显示 */
    background-repeat: no-repeat; /* 背景图不重复 */
    background-attachment: fixed; /* 固定背景图，不随页面滚动 */
}

/* 定义主内容区域样式 */
.content {
    padding: 50px 0 100px 0; /* 设置上下内边距，避免内容过于贴近顶部或底部 */
    text-align: center; /* 内容居中对齐 */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
    gap: 20px; /* 子元素之间的垂直间距 */
    flex: 1; /* 让内容部分占据剩余空间 */
}

/* 链接的全局样式 */
.content h1 a {
    display: inline-flex; /* 图标和文字在一行 */
    align-items: center; /* 图标和文字垂直居中对齐 */
    gap: 10px; /* 图标与文字之间的水平间距 */
    text-decoration: none; /* 移除链接下划线 */
    color: black; /* 链接文字默认颜色 */
    font-size: 18px; /* 设置文字大小 */
}

/* 图标的样式，调整为和文字大小一致 */
.content h1 a img {
    width: 18px; /* 图标宽度设置为 18px，与文字大小匹配 */
    height: 18px; /* 图标高度设置为 18px，保持比例一致 */
    display: block; /* 避免 inline 元素的额外间隙问题 */
}

/* 鼠标悬停链接时的样式 */
.content h1 a:hover {
    color: #007BFF; /* 鼠标悬停时文字变蓝 */
}

/* 页脚样式 */
footer {
    width: 100%; /* 页脚宽度为页面宽度 */
    text-align: center; /* 文本居中对齐 */
    font-size: 12px; /* 小字体 */
    padding: 5px 0; /* 页脚上下内边距 */
    line-height: 0.8; /* 紧凑的行高 */
}

/* 标题的样式，移除多余的上下外边距 */
h1 {
    margin: 0;
}

/* 隐藏子菜单的基本样式 */
.submenu {
    margin-left: 20px; /* 子菜单左边距 */
}
.submenu ul {
    list-style-type: none; /* 移除默认的列表样式 */
    padding-left: 0;
}
.submenu ul li {
    padding: 5px 0; /* 给每个子项添加上下内边距 */
}
.submenu ul li a {
    text-decoration: none; /* 去除链接下划线 */
    color: #007bff; /* 设置链接文字颜色 */
}
.submenu ul li a:hover {
    color: #0056b3; /* 设置链接悬停时的颜色 */
}

/* 导航栏基础样式 */
header {
    background-color: #333; /* 设置导航栏背景颜色 */
    padding: 10px 0; /* 设置内边距，增加上下空间 */
}

nav ul {
    list-style-type: none; /* 移除列表的默认样式（圆点） */
    padding: 0;
    margin: 0;
    text-align: center; /* 水平居中菜单项 */
}

nav ul li {
    display: inline-block; /* 将菜单项横向排列 */
    margin-right: 20px; /* 每个菜单项之间的间距 */
}

nav ul li a {
    color: white; /* 设置链接文字颜色为白色 */
    text-decoration: none; /* 移除链接的下划线 */
    font-size: 18px; /* 设置字体大小 */
    padding: 5px 10px; /* 为链接添加内边距 */
}

nav ul li a:hover {
    background-color: #555; /* 鼠标悬停时改变背景颜色 */
    text-decoration: underline; /* 鼠标悬停时加下划线 */
}