/* styles.css */
html, body {
    height: 100vh; /* 设置整个页面高度为200vh */
    margin: 0; /* 移除默认的margin */
    padding: 0; /* 移除默认的padding */
    display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 设置主轴方向为垂直方向 */
}


header {
     flex-shrink: 0; /* 页眉不收缩 */
   background: #f8f9fa; /* 背景颜色 */
   padding: 15px; /* 内边距 10px*/
   display: flex; /* 使用Flexbox布局 */
   align-items: center; /* 垂直居中 另外： justify-content: center;:水平方向居中对齐*/
}
.logo {
    margin-right: 10px; /* 图片与文字之间的间距 */
}
.text
{

    text-align: center; /* 文字居中 */
    flex: 1; /* 使文字部分占据剩余空间 */
}
  
  /* 导航样式 */
nav {
      flex-shrink: 0; /* 导航栏不收缩 */
    background: #e9ecef; /* 背景颜色 */
    padding: 10px; /* 设置内边距 */
    width: 100%; /* 宽度100% */
    /*height: 5%;  */
    display: flex;                /* 启用Flexbox */
    justify-content: space-around; /* 均匀分布导航项 */
}
 

  /* 导航链接样式 */
nav a {
    color: blue;               /* 文字颜色 */
    text-decoration: none;      /* 去除下划线 */
    padding: 10px 20px;         /* 内边距 */
    transition: background-color 0.3s; /* 过渡效果 */
}
 
/* 鼠标悬停效果 */
nav a:hover {
    background-color:white; /* 鼠标悬停时的背景颜色#575757 */
}


/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
    nav {
        flex-direction: column; /* 垂直排列 */
        align-items: center;    /* 居中对齐 */
    }
    nav a {
        padding: 0;       /* 减少内边距 10px */
        width: 100%;         /* 使链接宽度为100% */
        text-align: center;  /* 文字居中 */
    }
}
/* 使用Flexbox布局 */
nav ul {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-around; /* 在主轴上均匀分布项目 */
}

footer {
    flex-shrink: 0; /* 页脚不收缩 */
    background: #f1f1f1; /* 设置背景色 */
    padding: 10px; /* 设置内边距 */
}

main {
    flex: 1; /* 主体内容占据剩余空间，并可滚动 */
    background: lightblue; /* 设置背景色 */
    background-size: cover; /* 覆盖整个容器 */
    min-height: 100vh; /* 至少与视口高度一样高 */
    overflow-y: auto; /* 允许垂直方向滚动 */
}
main h1 {
    text-align: center;
    color: #333;
}
main p {  
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px; 
   margin-left: 20px; 
    margin-right: 40px;    
}