html {
    height: 100%; /* 确保html元素占据整个视口高度 */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #fff; /* 背景纯白色 */
    color: #333;
    text-align: center; /* 全局文本居中 */
    display: flex; /* 设置为flex容器 */
    flex-direction: column; /* 主轴方向为垂直 */
    min-height: 100vh; /* 确保body至少和视口一样高，实现内容不足时的垂直居中效果 */
}

.container {
    width: 80%;
    margin: 0 auto; /* 块级元素居中 */
    overflow: hidden;
    padding: 0 20px;
}

header {
    background: #fff; /* 背景纯白色 */
    color: #333; /* 文字颜色调整 */
    padding-top: 30px;
    min-height: 70px;
    border-bottom: 1px solid #eee; /* 边框颜色变浅 */
    display: flex;
    flex-direction: column;
    align-items: center; /* flex子元素居中 */
}

header #logo {
    width: 200px; /* 图标尺寸调整 */
    height: 200px; /* 图标尺寸调整 */
    margin-bottom: 10px; /* 调整边距 */
}

header h1 {
    margin-top: 0;
    margin-bottom: 5px; /* 调整边距 */
}

header .slogan {
    padding-top: 5px;
    color: #666; /* Slogan颜色调整 */
    margin-bottom: 15px;
}

nav {
    background: #fff; /* 背景纯白色 */
    color: #333; /* 文字颜色调整 */
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

nav ul {
    padding: 0;
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline-block; /* 改为inline-block以便更好地控制间距和居中 */
    margin: 0 10px; /* 调整链接间距 */
}

nav a {
    color: #007bff; /* 链接颜色改为标准蓝色 */
    text-decoration: none;
    font-size: 18px;
}

nav a:hover {
    text-decoration: underline;
}

main {
    padding: 20px 0;
    text-align: center; /* 主要内容区域文本居中 */
    flex-grow: 1; /* 让main元素占据所有可用的垂直空间，将footer推向底部 */
}

main .container p {
    text-align: center; /* 如果希望主要内容段落也居中 */
}

footer {
    background: #fff; /* 背景纯白色 */
    color: #333; /* 文字颜色调整 */
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

footer a {
    color: #007bff; /* 链接颜色改为标准蓝色 */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* 移动端适配 */
@media(max-width: 768px){
    .container {
        width: 95%;
    }

    header #logo,
    header h1,
    header .slogan {
        /* 桌面端已通过flex居中，移动端无需额外设置float:none和text-align:center */
        margin-left: auto; /* 确保在flex容器内也居中 */
        margin-right: auto;
    }

    nav ul li {
        display: block; /* 导航链接在移动端垂直排列 */
        margin: 10px 0; /* 调整垂直间距 */
    }
}