/* ================================
   基础样式
================================== */
body {
    font-family: 'Arial', sans-serif; /* 设置字体 */
    background-color: #f7f8fa; /* 页面背景颜色 */
    margin: 0; /* 去除默认的页面边距 */
    padding: 0; /* 去除默认的页面内边距 */
}

.container {
    width: 90%; /* 容器宽度为视口的90% */
    margin: 10px auto; /* 居中显示容器，并且上下有10px的外边距 */
    padding: 6px; /* 内边距 */
    background-color: #fff; /* 背景色为白色 */
    border-radius: 12px; /* 圆角效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置容器的阴影 */
}

/* ================================
   标题样式
================================== */
h1 {
    text-align: center; /* 居中显示标题 */
    color: #4CAF50; /* 设置标题颜色 */
    font-size: 2.5em; /* 设置字体大小 */
}

.section-title {
    font-size: 1.6em; /* 设置副标题字体大小 */
    color: #333; /* 副标题颜色 */
    border-bottom: 2px solid #4CAF50; /* 添加绿色的下边框 */
    padding-bottom: 5px; /* 内边距 */
    margin-bottom: 10px; /* 下外边距 */
}

/* ================================
   卡片样式
================================== */
.card, .certificate-card {
    background-color: #fff; /* 设置卡片背景为白色 */
    border-radius: 15px; /* 圆角效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置卡片阴影 */
    padding: 5px; /* 内边距 */
    margin: 10px 0; /* 上下外边距 */
    transition: all 0.3s ease-in-out; /* 平滑的过渡效果 */
    border: 1px solid #f0f0f0; /* 设置卡片的边框 */
}

/* 鼠标悬浮时的卡片效果 */
.card:hover, .certificate-card:hover {
    transform: translateY(-8px); /* 向上移动卡片 */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 卡片标题样式 */
.card-title, .certificate-card-title {
    font-size: 1.6em; /* 设置标题的字体大小 */
    color: #4CAF50; /* 设置标题的颜色 */
    font-weight: bold; /* 设置加粗 */
    margin-bottom: 10px; /* 下外边距 */
    letter-spacing: 1px; /* 字母间距 */
    cursor: pointer; /* 鼠标悬浮时显示手形光标 */
}

/* 卡片内容的样式 */
.card-content, .certificate-card-description {
    font-size: 1.4em; /* 内容的字体大小 */
    color: #555; /* 内容的字体颜色 */
    padding: 0; /* 取消内边距 */
}

/* ================================
   自我评价样式
================================== */
.self-evaluation {
    font-style: italic; /* 设置字体为斜体 */
    color: #777; /* 设置颜色 */
    text-align: center; /* 居中显示 */
    margin-top: 15px; /* 上外边距 */
}

/* ================================
   空间分配
================================== */
.space-between {
    display: inline-block; /* 设置为内联块级元素 */
}

@media (max-width: 768px) {
    .space-between {
        display: block; /* 小屏幕下变为块级元素 */
    }
}

/* ================================
   个人信息样式
================================== */
.info-container {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 自动换行 */
    padding: 20px; /* 内边距 */
    gap: 10px; /* 元素间的间距 */
}

.info-column {
    font-size: 1.4em; /* 字体大小 */
    flex: 1; /* 设置弹性布局项 */
    min-width: 250px; /* 最小宽度为250px */
}

/* 图片列样式 */
.photo-column {
    flex: 1; /* 设置弹性布局项 */
    min-width: 250px; /* 最小宽度为250px */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 图片样式 */
.photo-column img {
    width: 140px; /* 设置图片宽度 */
    height: 100%; /* 高度为100% */
    object-fit: cover; /* 保持比例填充 */
}

/* 小屏幕适配样式 */
@media (max-width: 768px) {
    .info-container {
        flex-direction: column; /* 切换为竖直排列 */
        align-items: center; /* 垂直居中 */
    }

    .info-column {
        min-width: 100%; /* 宽度为100% */
        text-align: center; /* 文本居中 */
    }

    .photo-column {
        min-width: 100%; /* 宽度为100% */
        margin-top: 20px; /* 上外边距 */
    }
}

/* ================================
   技能进度条样式
================================== */
.progress {
    height: 100%; /* 高度为100% */
    border-radius: 20px; /* 圆角效果 */
    text-align: center; /* 居中显示 */
    color: white; /* 字体颜色为白色 */
    line-height: 25px; /* 行高 */
    font-weight: bold; /* 字体加粗 */
}

/* 各项技能进度条 */
.plc { width: 85%; background-color: #4CAF50; } /* PLC进度条 */
.robot { width: 70%; background-color: #2196F3; } /* 机器人进度条 */
.eplan { width: 65%; background-color: #FF9800; } /* E-Plan进度条 */
.vision { width: 60%; background-color: #f44336; } /* 视觉识别进度条 */

/* ================================
   回顶部按钮
================================== */
#backToTop {
    position: fixed; /* 固定位置 */
    bottom: 30px; /* 距离底部30px */
    right: 30px; /* 距离右边30px */
    background-color: #4CAF50; /* 背景颜色 */
    color: white; /* 字体颜色为白色 */
    border: none; /* 去除边框 */
    border-radius: 50%; /* 圆形按钮 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    font-size: 24px; /* 字体大小 */
    text-align: center; /* 文本居中 */
    cursor: pointer; /* 显示为手形光标 */
    display: none; /* 默认不显示 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 鼠标悬浮时按钮的样式 */
#backToTop:hover {
    background-color: #45a049; /* 悬浮时背景色变化 */
}

/* ================================
   奖项展示样式
================================== */
.awards, .certificates {
    display: grid; /* 使用网格布局 */
    gap: 20px; /* 元素间距 */
    margin-bottom: 30px; /* 下外边距 */
}

.awards {
    grid-template-columns: repeat(2, 1fr); /* 两列布局 */
}

.certificates {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自动适应列数 */
}

/* 奖项项样式 */
.award-item, .certificate-card {
    background-color: #f9f9f9; /* 背景色 */
    border-radius: 10px; /* 圆角效果 */
    padding: 20px; /* 内边距 */
    border: 1px solid #e0e0e0; /* 边框 */
    text-align: center; /* 文本居中 */
}

/* 奖项标题样式 */
.award-title, .certificate-card-title {
    font-size: 1.6em; /* 字体大小 */
    color: #2a9d8f; /* 颜色 */
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 10px; /* 下外边距 */
}

/* 奖项描述样式 */
.award-description, .certificate-card-description {
    font-size: 1.4em; /* 字体大小 */
    color: #333; /* 颜色 */
}

/* 奖项日期和机构 */
.award-date, .award-institution {
    font-size: 1.3em; /* 字体大小 */
    color: #555; /* 颜色 */
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    .awards {
        grid-template-columns: 1fr; /* 单列布局 */
    }
}

/* ================================
   动画效果
================================== */
.fade-in {
    animation: fadeIn 2s ease-out; /* 淡入效果 */
}

@keyframes fadeIn {
    0% { opacity: 0; } /* 初始透明度为0 */
    100% { opacity: 1; } /* 最终透明度为1 */
}

/* ================================
   小屏设备适配
================================== */
@media (max-width: 768px) {
    body { font-size: 12px !important; } /* 强制字体大小为12px */
    h1 { font-size: 14px !important; } /* 强制标题字体大小 */
    .section-title { font-size: 13px !important; } /* 强制副标题字体大小 */
    .card-title { font-size: 13px !important; } /* 强制卡片标题字体大小 */
    .card-content { font-size: 12px !important; } /* 强制卡片内容字体大小 */
    .info-column { font-size: 12px !important; } /* 强制信息列字体大小 */
    .award-title { font-size: 13px !important; } /* 强制奖项标题字体大小 */
    .award-description { font-size: 12px !important; } /* 强制奖项描述字体大小 */
    .award-date, .award-institution { font-size: 11px !important; } /* 强制日期和机构字体大小 */
    .certificate-card-title { font-size: 12px !important; } /* 强制证书卡片标题字体大小 */
    .certificate-card-description { font-size: 10px !important; } /* 强制证书卡片描述字体大小 */
    .card-title { white-space: normal; } /* 取消白空间的强制单行显示 */
}