/* 设置 body 的基本样式 */
body {
    font-family: Arial, sans-serif; /* 设置字体 */
    margin: 0; /* 去除默认外边距 */
    padding: 0; /* 去除默认内边距 */
    background-color: #f4f4f4; /* 设置背景颜色 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
}

/* 设置 header 的样式 */
header {
    background-color: #333; /* 设置背景颜色 */
    color: #fff; /* 设置文字颜色 */
    padding: 1rem 0; /* 设置内边距 */
    text-align: center; /* 文字居中 */
}

/* 设置 header 内部 h1 的样式 */
header h1 {
    margin: 0; /* 去除默认外边距 */
}

/* 设置导航栏 ul 的样式 */
nav ul {
    list-style: none; /* 去除列表样式 */
    padding: 0; /* 去除默认内边距 */
}

/* 设置导航栏 li 的样式 */
nav ul li {
    display: inline; /* 列表项水平排列 */
    margin: 0 1rem; /* 设置左右外边距 */
}

/* 设置导航栏链接的样式 */
nav ul li a {
    color: #fff; /* 设置文字颜色 */
    text-decoration: none; /* 去除下划线 */
}

/* 设置 main 的样式 */
main {
    padding: 2rem; /* 设置内边距 */
}

/* 设置 section 的样式 */
section {
    margin-bottom: 2rem; /* 设置底部外边距 */
}

/* 设置 section 内部 h2 的样式 */
section h2 {
    color: #333; /* 设置文字颜色 */
}

/* 设置 section 内部 p 的样式 */
section p {
    color: #666; /* 设置文字颜色 */
}

/* 设置 section 内部 img 的样式 */
section img {
    max-width: 100%; /* 图片最大宽度为100% */
    height: auto; /* 高度自动 */
    display: block; /* 图片为块级元素 */
}

/* 设置 .avatar-frame 的样式 */
.avatar-frame {
    width: 100px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
    border-radius: 50%; /* 设置圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    border: 3px solid #fff; /* 设置边框 */
    margin-right: 20px; /* 设置右侧外边距 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: absolute; /* 绝对定位 */
    top: 10px; /* 顶部对齐 */
    left: 10px; /* 左侧对齐 */
}

/* 设置 .avatar-frame 内部 img 的样式 */
.avatar-frame img {
    width: 100%; /* 宽度为100% */
    height: auto; /* 高度自动 */
}

/* 设置 .ets2-logo 的样式 */
.ets2-logo {
    position: absolute; /* 绝对定位 */
    top: 10px; /* 顶部对齐 */
    right: 10px; /* 右侧对齐 */
    width: 70px; /* 设置宽度 */
    height: auto; /* 高度自动 */
}

/* 设置 #about 的样式 */
#about {
    text-align: left; /* 文字左对齐 */
}

/* 设置 ul 的样式 */
ul {
    list-style: none; /* 去除列表样式 */
    padding: 0; /* 去除默认内边距 */
}

/* 设置 ul 内部 li 的样式 */
ul li {
    margin-bottom: 1rem; /* 设置底部外边距 */
}

/* 设置 ul 内部 li 内部 a 的样式 */
ul li a {
    color: #007BFF; /* 设置文字颜色 */
    text-decoration: none; /* 去除下划线 */
}

/* 设置 ul 内部 li 内部 a 的悬停样式 */
ul li a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* 设置 footer 的样式 */
footer {
    background-color: #333; /* 设置背景颜色 */
    color: #fff; /* 设置文字颜色 */
    text-align: center; /* 文字居中 */
    padding: 1rem 0; /* 设置内边距 */
    position: fixed; /* 固定定位 */
    width: 100%; /* 宽度为100% */
    bottom: 0; /* 底部对齐 */
    display: flex; /* 使用弹性布局 */
    justify-content: space-around; /* 项目之间均匀分布 */
    align-items: center; /* 垂直居中 */
}

/* 设置 footer 内部 p 和 a 的样式 */
footer p, footer a {
    margin: 0; /* 去除默认外边距 */
    color: #fff; /* 设置文字颜色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 12px; /* 设置字体大小 */
}

/* 设置 .fade-in 的动画样式 */
.fade-in {
    opacity: 0; /* 初始透明度 */
    transform: translateY(20px); /* 初始位置 */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* 设置过渡效果 */
}

/* 设置 .fade-in 可见时的样式 */
.fade-in.visible {
    opacity: 1; /* 透明度变为1 */
    transform: translateY(0); /* 位置回到原位 */
}

/* 设置 .rounded-image 的样式 */
.rounded-image {
    border-radius: 15px; /* 设置圆角 */
}

/* 设置 .divider 的样式 */
.divider {
    border: 0; /* 去除边框 */
    height: 1px; /* 设置高度 */
    background: #333; /* 设置背景颜色 */
    margin: 20px 0; /* 设置上下外边距 */
}