/* 开始/Start */
/* 以下内容皆学自：https://youtu.be/6HHN0G2cwBM */ 
*{
    padding: 0;
    margin:0;
}
/* 
"头部"，背景颜色=黑色 
高度（height）占80px（80像素）
宽度（width）占满屏幕
position 解释： https://youtu.be/6HHN0G2cwBM?t=851
*/
header {
    background-color: black;
    height: 100px;
    width: 100%;
    position: relative;
}
/* 
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(/images/about-background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color:white;
}
/* 2026/04/02 先做到这里：https://youtu.be/6HHN0G2cwBM?t=1121 */
.First-about h2{
font-size:60px;
color: blanchedalmond;
}

.First-about p{
    color: #FEF7E6;
}

.HTML{

}

.CSS{

}

.contact{

}
/* 结束/Finish */