/* 引入 Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

/* 定义CSS变量 */
:root {
    --white: #f9f9f9; /* 白色 */
    --dark: black; /* 黑色 */
    --green-light: #00df5e; /* 浅绿色 */
    --yellow: #f7df1e; /* 黄色 */
    --gray: #828282; /* 灰色 */
    --gray-200: #333333; /* 深灰色 */
    --gray-400: #212121; /* 更深灰色 */
    --gray-400-rgb: 33, 33, 33; /* 更深灰色的RGB值 */
    --alpha: 0.8; /* 透明度 */
}

/* 全局样式重置 */
* {
    padding: 0; /* 去除所有元素的内边距 */
    margin: 0; /* 去除所有元素的外边距 */
    box-sizing: border-box; /* 包括边框和内边距在元素的总宽度和高度内 */
}

/* 无序列表样式重置 */
ul {
    list-style-type: none; /* 去除列表项目符号 */
}

/* 链接样式 */
a {
    text-decoration: none; /* 去除下划线 */
    color: var(--white); /* 链接文字颜色为白色 */
}

/* 画布样式 */
#canvas {
    background-color: #2c343f; /* 背景颜色 */
    width: 100%; /* 宽度为100% */
    height: 100%; /* 高度为100% */
}

/* 页面主体样式 */
body {
    background-image: url("src/assets/images/wp2757874-wallpaper-gif.gif"); /* 背景图片 */
    color: var(--white); /* 文字颜色为白色 */
    font-size: 16px; /* 基本字体大小 */
    font-family: 'DM Sans', sans-serif; /* 字体 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    flex-direction: column; /* 列方向排列 */
    position: relative; /* 相对定位 */
    min-width: 100%; /* 最小宽度为100% */
}

/* 容器样式 */
div.container {
    width: 95%; /* 容器宽度 */
}

.img1 {
    width: 100px;
    height: 100px;
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}
.img1:hover {
    transform: scale(1.2); /* 放大1.2倍 */
}

/* 页眉样式 */
header {
    display: flex; /* 使用flex布局 */
    justify-self: center; /* 居中对齐内容 */
    width: 100%; /* 宽度为100% */
    height: 60px; /* 高度为60px */
    margin-top: 40px; /* 顶部外边距 */
    margin-bottom: 83px; /* 底部外边距 */
    position: sticky; /* 粘性定位 */
    background-color: rgba(var(--gray-400-rgb), var(--alpha)); /* 背景颜色及透明度 */
}

/* 页眉内容样式 */
header .content {
    width: 80%; /* 内容宽度 */
    height: 100%; /* 高度为100% */
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 子元素之间的空间均匀分布 */
    align-items: center; /* 垂直居中对齐 */
}

/* 页眉logo样式 */
header .content span.logo {
    font-size: 26px; /* 字体大小 */
    font-weight: 700; /* 字体加粗 */
    margin-left: 10%; /* 左外边距 */
}

/* 页眉导航列表样式 */
header .content ul {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 子元素之间的空间均匀分布 */
    gap: 60px; /* 子元素间距 */
    font-size: 20px; /* 字体大小 */
}

/* 页眉导航项样式 */
header .content ul li {
    cursor: pointer; /* 鼠标悬停时显示手型 */
}

/* 主体样式 */
main {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 子元素之间的空间均匀分布 */
    margin-bottom: 69px; /* 底部外边距 */
}

/* 主体左侧样式 */
main .left {
    width: 377px; /* 宽度为377px */
}

/* 主体左侧标题样式 */
main .left h1 {
    font-size: 2.0rem; /* 字体大小 */
    font-weight: 700; /* 字体加粗 */
}

/* 主体左侧副标题样式 */
main .left h2 {
    font-size: 25px; /* 字体大小 */
    font-weight: 500; /* 半加粗 */
    color: var(--gray); /* 文字颜色为灰色 */
    margin-top: 18px; /* 顶部外边距 */
    margin-bottom: 37px; /* 底部外边距 */
}

/* 按钮样式 */
main button {
    font-family: 'DM Sans', sans-serif; /* 字体 */
    font-size: 14px; /* 字体大小 */
    font-weight: 700; /* 字体加粗 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
}

/* 简历按钮样式 */
main .btn .cv {
    width: 143px; /* 宽度为143px */
    height: 42px; /* 高度为42px */
    color: var(--dark); /* 文字颜色为黑色 */
    background-color: var(--yellow); /* 背景颜色为黄色 */
    border: 0; /* 无边框 */
    margin-right: 15px; /* 右外边距 */
    padding: 12px 25px; /* 内边距 */
}

/* PDF样式 */
#pdf {
    color: var(--dark); /* 文字颜色为黑色 */
}

/* 联系按钮样式 */
main .btn .contact {
    width: 160px; /* 宽度为160px */
    height: 42px; /* 高度为42px */
    color: var(--white); /* 文字颜色为白色 */
    background-color: var(--dark); /* 背景颜色为黑色 */
    border: 1px solid var(--gray-200); /* 边框颜色为深灰色 */
    padding: 12px 16px; /* 内边距 */
}

/* 主体右侧图片样式 */
main .right img {
    max-width: 350px; /* 图片最大宽度 */
}


/* About Me Section */
section.about-me {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    flex-direction: column; /* 列方向排列 */
}

section.about-me h2 {
    font-size: 2rem; /* 设置标题字体大小 */
    font-weight: 700; /* 加粗标题字体 */
    color: var(--white); /* 设置标题颜色 */
    margin-bottom: 30px; /* 底部外边距 */
}

section.about-me p {
    max-width: 745px; /* 最大宽度 */
    font-size: 1.125rem; /* 设置段落字体大小 */
    font-weight: 400; /* 正常字体粗细 */
    color: var(--gray); /* 设置段落颜色 */
    line-height: 32px; /* 行高 */
    text-align: center; /* 居中对齐文本 */
}

/* Contacts Section */
section.contacts {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐子元素 */
    flex-wrap: wrap; /* 换行显示子元素 */
    gap: 121px; /* 子元素间距 */
    margin-bottom: 67px; /* 底部外边距 */
    margin-top: 70px; /* 顶部外边距 */
}

section.contacts div.contact {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 列方向排列 */
    align-items: center; /* 居中对齐 */
    width: 170px; /* 设置宽度 */
    height: 150px; /* 设置高度 */
    border-radius: 10px; /* 圆角 */
}

section.contacts div.contact div.icon {
    width: 62px; /* 设置图标宽度 */
    height: 62px; /* 设置图标高度 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐图标 */
    align-items: center; /* 垂直居中图标 */
    background-color: var(--gray-400); /* 图标背景颜色 */
    border-radius: 31px; /* 圆角 */
    margin-bottom: 20px; /* 底部外边距 */
}

section.contacts div.contact div.icon i {
    font-size: 32px; /* 图标字体大小 */
    color: var(--yellow); /* 图标颜色 */
}

section.contacts span.title {
    font-size: 18px; /* 标题字体大小 */
    font-weight: 700; /* 加粗字体 */
    color: var(--white); /* 标题颜色 */
    margin-bottom: 5px; /* 底部外边距 */
}

section.contacts span.description {
    font-size: 16px; /* 描述字体大小 */
    font-weight: 400; /* 正常字体粗细 */
    color: var(--gray); /* 描述颜色 */
}

/* Projects Section */
section.projects {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 列方向排列 */
    align-items: center; /* 居中对齐 */
    margin-bottom: 67px; /* 底部外边距 */
}

.img1 {
    height: 80px; /* 图片高度 */
    width: 80px; /* 图片宽度 */
    border-radius: 10px; /* 圆角 */
}

section.projects h2 {
    font-size: 24px; /* 标题字体大小 */
    font-weight: 700; /* 加粗字体 */
    color: var(--white); /* 标题颜色 */
    margin-bottom: 30px; /* 底部外边距 */
}

section.projects div.cards {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐子元素 */
    flex-wrap: wrap; /* 换行显示子元素 */
    gap: 10px; /* 子元素间距 */
}

section.projects div.card {
    width: 80px; /* 卡片宽度 */
    height: 80px; /* 卡片高度 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 列方向排列 */
    align-items: center; /* 居中对齐 */
    background-color: var(--gray-400); /* 卡片背景颜色 */
    border: 1px solid var(--gray-200); /* 卡片边框 */
    padding: 0px 0px; /* 内边距 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    border-radius: 10px; /* 圆角 */
}

section.projects div.cards div.card div.img-project {
    margin-top: 0px; /* 顶部外边距 */
    width: 80px; /* 图片宽度 */
    height: 80px; /* 图片高度 */
    background-color: var(--dark); /* 背景颜色 */
    margin-bottom: 0px; /* 底部外边距 */
    border: 1px solid var(--gray-200); /* 边框 */
    border-radius: 15px; /* 圆角 */
}

section.projects div.cards div.card div.description-project {
    width: 80px; /* 描述区域宽度 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 列方向排列 */
    align-items: flex-start; /* 左对齐 */
}

section.projects div.cards div.card div.description-project span.title-project {
    font-size: 12px; /* 标题字体大小 */
    font-weight: 500; /* 半粗体 */
    margin-bottom: 6px; /* 底部外边距 */
}

section.projects div.cards div.card span.tag-project {
    font-size: 14px; /* 标签字体大小 */
    font-weight: 400; /* 正常字体粗细 */
    color: var(--gray); /* 标签颜色 */
}

/* Skills Section */
section.skills {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 列方向排列 */
    align-items: center; /* 居中对齐 */
    margin-bottom: 185px; /* 底部外边距 */
}

section.skills h2 {
    font-size: 24px; /* 标题字体大小 */
    font-weight: 700; /* 加粗字体 */
    color: var(--white); /* 标题颜色 */
    margin-bottom: 35px; /* 底部外边距 */
}

section.skills div.cards-skills {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐子元素 */
    flex-wrap: wrap; /* 换行显示子元素 */
    gap: 51px; /* 子元素间距 */
}

section.skills div.cards-skills div.card-skill {
    width: 150px; /* 卡片宽度 */
    height: 150px; /* 卡片高度 */
    background-color: var(--gray-400); /* 卡片背景颜色 */
    border: 1px solid var(--gray-200); /* 卡片边框 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐子元素 */
    align-items: center; /* 垂直居中子元素 */
    border-radius: 10px; /* 圆角 */
}

section.skills div.cards-skills div.card-skill i {
    font-size: 5rem; /* 图标字体大小 */
    color: var(--yellow); /* 图标颜色 */
}

/* 页脚样式 */
footer {
    width: 100%; /* 页脚宽度为100% */
    height: 60px; /* 页脚高度为60px */
    display: flex; /* 使用flex布局 */
    justify-self: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    background-color: var(--gray-400); /* 背景颜色为深灰色 */
}
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px; /* 可根据需要调整 */
    text-align: center;
}

.footer p {
    margin: 0;
}

/* 页脚文字样式 */
footer span {
    font-size: 16px; /* 字体大小 */
    font-weight: 700; /* 字体加粗 */
    color: var(--white); /* 文字颜色为白色 */
    margin-left: 45%; /* 左外边距 */
}

/* 页脚文字链接样式 */
footer span a {
    color: var(--yellow); /* 链接文字颜色为黄色 */
}

/* 服务卡片图标颜色 */
.card-serve i {
    color: var(--gray); /* 图标颜色为灰色 */
}

/* 返回顶部按钮样式 */
div.goto-top {
    display: flex; /* 使用flex布局 */
    justify-self: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    width: 50px; /* 宽度为50px */
    height: 50px; /* 高度为50px */
    border-radius: 25px; /* 圆角边框半径 */
    background-color: var(--gray-400); /* 背景颜色为深灰色 */
    position: fixed; /* 固定定位 */
    bottom: 70px; /* 距离底部70px */
    right: 20px; /* 距离右侧20px */
}

/* 返回顶部按钮图标样式 */
div.goto-top i {
    font-size: 32px; /* 图标字体大小 */
    color: var(--yellow); /* 图标颜色为黄色 */
    margin-left: 10px; /* 左外边距 */
}

/* 目标元素的伪元素样式 */
.target::before {
    content: ''; /* 伪元素内容为空 */
    display: block; /* 伪元素显示为块级元素 */
    height: 60px; /* 高度为60px（固定头部的高度）*/
}

/* 响应式设计：屏幕宽度最大为900px */
@media screen and (max-width: 900px) {
    header {
        margin-bottom: 30px; /* 页眉底部外边距 */
    }
    header .content ul {
        display: none; /* 隐藏导航列表 */
    }
    main {
        flex-direction: column-reverse; /* 主体方向反向排列 */
        align-items: center; /* 垂直居中对齐 */
        margin-bottom: 30px; /* 主体底部外边距 */
    }
    main .left {
        display: flex; /* 使用flex布局 */
        flex-direction: column; /* 列方向排列 */
        align-items: center; /* 垂直居中对齐 */
    }
    main .right {
        display: flex; /* 使用flex布局 */
        align-items: center; /* 垂直居中对齐 */
        flex-direction: column; /* 列方向排列 */
    }
    main .right img {
        max-width: 70%; /* 图片最大宽度为70% */
    }
    main .left h1 {
        font-size: 1.5rem; /* 标题字体大小 */
        font-weight: 700; /* 字体加粗 */
    }
    main .left h2 {
        font-size: 1rem; /* 副标题字体大小 */
        font-weight: 700; /* 字体加粗 */
    }
    section.about-me {
        margin-bottom: 30px; /* 底部外边距 */
    }
    section.contacts {
        gap: 0px; /* 无间距 */
        margin-bottom: 30px; /* 底部外边距 */
    }
    section.projects {
        margin-bottom: 30px; /* 底部外边距 */
    }
    section.skills {
        margin-bottom: 30px; /* 底部外边距 */
    }
    .target::before {
        content: ''; /* 伪元素内容为空 */
        display: block; /* 伪元素显示为块级元素 */
        height: 0px; /* 高度为0px（修正固定头部的高度）*/
    }
    section.skills div.cards-skills {
        gap: 25px; /* 卡片间距 */
    }
    section.skills div.cards-skills div.card-skill {
        width: 85px; /* 卡片宽度 */
        height: 75px; /* 卡片高度 */
    }
    section.skills div.cards-skills div.card-skill i {
        font-size: 3rem; /* 图标字体大小 */
    }
}
@media (max-width: 600px) {
    .footer {
        padding: 10px 0;
    }
}