/* 开始/Start */
/* 以下内容皆学自：https://youtu.be/6HHN0G2cwBM */ 
* {
    padding: 0;
    margin: 0;
}
/* 
"头部"，背景颜色=黑色 
高度（height）占80px（80像素）
宽度（width）占满屏幕
position 解释： https://youtu.be/6HHN0G2cwBM?t=851

 将position改为fixed，那就不会跟随网页运动了（就是会固定在上面）
*/
header {
    background-color: black;
    height: 100px;
    width: 100%;
    position: fixed;
}
/* 
h1 主标题文字颜色 = 白色
position 解释： https://youtu.be/6HHN0G2cwBM?t=851
right:5vw = 向右间距 5%
top: 0 = 弄到最上面
line-heght:80px = 文字的行距 
background-image:url(...) = 在h1中添加背景图片
background-repeat: no-repeat; = 不要重复背景图片
background-posotion: center; = 将背景图片移到中间
width: 210px; = 宽度弄到210px（210像素）
text-indent: -9999px; = 将文字推到 -9999px （使其虽然存在，但看不到，为了搜索引擎优化）
*/
h1 {
    color: white;
    position: absolute;
    left:120px;
    top:0;
    line-height: 80px;
    background-image:url(/images/web-logo.png);
    background-repeat: no-repeat;
    background-position: center;
    /* 核心修复代码（AI的帮助）：https://gemini.google.com/share/8f7d3ac049eb  */
    background-size: 80px 80px;  /* 自动缩放图片，使其完整显示在 80px 的格子内 */
    /* 或者你也可以手动指定大小，比如： */
    /* background-size: 40px 40px; */
    width: 100px;
    height: 100px;
    text-indent: -9999px;
}
/* 
text-decoration 在这边代表链接中的下划线
在第一个:
header a{
        ...
        text-decoration: none;
}
代表在a文本中，不要显示任何"文字装饰"（链接下划线）
*/
header a{
    color: white;
    text-decoration: none;
}
/* 
display: inline; = 在"头部"的"li"区块中（列表），使它变为横着的，而非上下的
margin-right: 4vw; = 添加右边距，4vw = 视窗(屏幕？)宽度的 4%
 */
header li{
    display: inline;
    margin-right: 4vw;
}
/*
position 解释： https://youtu.be/6HHN0G2cwBM?t=851
right:5vw = 向右间距 5%
top: 0 = 弄到最上面
line-heght:80px = 文字的行距
*/
header ul{
    position: absolute;
    right:5vw;
    top:0;
    line-height: 80px;
}
/*
而在下面那段代码中，在
header a:hover{
    text-decoration:underline
} 
个人解读为：
在鼠标在链接上时，显示下划线（underline）
*/
header a:hover{
    text-decoration: underline;
}
/* 在Section中的class需要以"."开始*/

/*  */
.First-about{
    background-color: wheat ;
    /* 在AI的帮助下，添加了背景虚化效果："linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))," */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://io.wss.moe/image/h);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 145vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:white;
    margin: 0;
}
/* 2026/04/02 先做到这里：https://youtu.be/6HHN0G2cwBM?t=1121 */
.First-about h2{
    font-size:60px;
    color: blanchedalmond;
}

.First-about p{
    color: #FEF7E6;
    font-size: 20px;
    margin-top: 5%;
    top: 0%;
    margin-bottom: 5%;
    align-items: center;
    text-align: center;
    justify-content: center;
}

/* 
border = 细边框 
border-radius = 细边框圆角效果
*/
.First-about a{
    display: inline-flex; /* 加上这一行，你的对齐才会生效 */
    color: #FEF7E6;
    text-decoration: none;
    border: 1px solid #FEF7E6;
    padding: 10px 20px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}

/*
justify-content = 水平对齐（上下对齐）
align-items = 垂直对齐（左右对齐）
`line-height: 1.8em;` = 行高1.8倍
*/
.quote{
    background-color: aquamarine;
    color: black;
    display: flex;
    min-height: 80px; /* 改用最小高度更灵活 */
    justify-content: center;
    align-items: center;
    font-size: 20px;
    line-height: 1.8em;
    padding: 20px; /* 增加一点内边距好看一些 */
}

/* HTMl内容 */

.HTML{
    /* 以下内容皆为AI帮助 */
    display: flex;           /* 开启弹性布局，子元素会自动横向排列 */
    width: 100%;             /* 宽度占满全屏 */
    min-height: 400px;       /* 给个最小高度，防止内容太少不好看 */
    background-color: antiquewhite; /* 背景色填满整个区域 */
    align-items: stretch;    /* 让左右两边高度对齐 */
}
.HTML-img{
    width: 50%;
    left: 50%;
    object-fit: cover;       
    /* AI帮助：
    关键：保证图片在拉伸时不失真，自动裁剪填充 */
}

.HTML-info{
    right: 50%;
    width: 50%;
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 文字左对齐 */
    justify-content: center;
    text-align: left;        /* 确保段落文字也是左对齐 */
    padding: 0 50px; /* 额外建议：给文字左右加一点内边距，不会显得太贴边 */
}
.HTML-info h2{
    font-size: 40px;
    margin-bottom: 30px;
}

.HTML-info p{
    text-align: center;
    line-height: 2em;
}

/* HTML End */

/* CSS的部分我直接抄了上面那些、然后把图片弄到右边，然后内容到左边 */
.CSS{
    /* 以下内容皆为AI帮助 */
    display: flex;           /* 开启弹性布局，子元素会自动横向排列 */
    width: 100%;             /* 宽度占满全屏 */
    min-height: 400px;       /* 给个最小高度，防止内容太少不好看 */
    background-color: antiquewhite; /* 背景色填满整个区域 */
    align-items: stretch;    /* 让左右两边高度对齐 */
}
.CSS-img{
    width: 50%;
    /* 可以删除 left: 50%; */
    object-fit: cover; 
    /* AI帮助：
    关键：保证图片在拉伸时不失真，自动裁剪填充 */
}

.CSS-info{
width: 50%;
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 文字左对齐 */
    justify-content: center;
    /* text-align: right; 如果你希望文字正常阅读方向，建议改为 left */
    text-align: left;        
    padding: 0 50px; /* 额外建议：给文字左右加一点内边距，不会显得太贴边 */
}
.CSS-info h2{
    font-size: 40px;
    margin-bottom: 30px;
}

.CSS-info p{
    text-align: center;
    line-height: 2em;
}

/* CSS End */

footer{
    background-color: black;
    color: #B7b7b7;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}


/* 响应式设计语法 https://youtu.be/6HHN0G2cwBM?t=1523 */

.menu{
    display: none;
}
@media screen and (max-width: 768px) {
    header ul {
        display: none;
    }
    header h1{
        left: 50%;
        transform: translateX(-50%);
    }
    .First-about h2{
        font-size: 40px;
    }

.menu{
    display: block;
    background-color: transparent;
    color: white;
    font-size: 35px;
    position: absolute;
    top:15px;
    left: 20px;
    border: none;
    cursor: pointer;
    }

.HTML {
    width: 100%;
    padding: 40px 0
}
.HTML h2{
    font-size: 30px;
}

.CSS {
    width: 100%;
    padding: 40px 0
}
.CSS h2{
    font-size: 30px;
}

/* 结束/Finish */

}