/* 全局样式，重置默认的外边距和内边距，设置盒模型和字体 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* 导航栏容器样式 */
.nav-container {
    /* 使用百分比宽度，让导航栏宽度随窗口变化 */
    width: 15%; 
    min-width: 150px; /* 设置最小宽度，防止导航栏过小 */
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    overflow: hidden; /* 新增，确保内容包裹 */
}

/* 导航图标样式 */
.nav-icon {
    /* 使用 vw 单位，让图标大小随窗口变化 */
    width: 2.5vw; 
    height: 2.5vw;
    min-width: 25px; /* 设置最小宽度，防止图标过小 */
    min-height: 25px; /* 设置最小高度，防止图标过小 */
    border-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s; /* 新增，添加背景色过渡效果 */
}

/* 导航项链接样式 */
.nav-item a {
    text-decoration: none;
    color: #333;
    /* 使用 vw 单位，让文字大小随窗口变化 */
    font-size: 1.2vw; 
    min-font-size: 12px; /* 设置最小字体大小，防止文字过小 */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    transition: color 0.3s;
    word-wrap: break-word;
    text-align: center;
}

/* 媒体查询，当窗口宽度小于 768px 时调整样式 */
@media (max-width: 768px) {
    .nav-container {
        width: 100%; /* 窗口较小时，导航栏占满宽度 */
        min-width: auto;
    }

    .nav-icon {
        width: 35px;
        height: 35px;
    }

    .nav-item a {
        font-size: 16px;
    }
}

/* 导航项样式 */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px 0; /* 调整间距 */
    transition: transform 0.3s;
    
}

/* 导航项悬停效果（整体） */
.nav-item:hover {
    transform: scale(1.05);
}
.nav-item:hover .nav-icon {
    filter: brightness(1.1); /* 图标悬停亮度调整 */
}
.nav-item:hover a {
    color: #2196f3; /* 文字悬停颜色 */
}

/* 导航项选中效果（需配合 HTML 的 active 类使用） */
.nav-item.active {
    transform: scale(1.05); /* 选中时缩放 */
}
.nav-item.active .nav-icon {
    background-color: #2196f3; /* 选中时图标背景色 */
    filter: none; /* 清除悬停的亮度效果，避免冲突 */
}
.nav-item.active a {
    color: #2196f3; /* 选中时文字颜色 */
}

/* 导航图标样式 */
.nav-icon {
    width: 35px;
    height: 35px;
    border-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s; /* 新增，添加背景色过渡效果 */
}

/* 导航图标悬停效果 */
.nav-icon:hover {
    filter: brightness(1.2); /* 让背景色变亮 */
}

/* 不同导航项的背景颜色 */
.nav-home { background-color: #ff9800; }
.nav-intro { background-color: #2196f3; }
.nav-team { background-color: #f44336; }
.nav-idea { background-color: #9c27b0; }
.nav-feature { background-color: #34495e; }
.nav-effect { background-color: #00bcd4; }
.nav-resource { background-color: #4caf50; }
.nav-material { background-color: #34495e; }

/* 导航项链接样式 */
.nav-item a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
 
    transition: color 0.3s;
    word-wrap: break-word;
    text-align: center;
}

/* 导航项链接悬停效果 */
.nav-item a:hover {
    color: #eb2d14;
    font-size: 18px; /* 悬停时更改字体大小 */
    font-weight: normal; /* 悬停时更改字体粗细 */
    font-style: normal; /* 悬停时更改字体样式 */
}

/* 分隔线样式 */
.divider {
    width: 80%;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
}

/* 定义导航区域的样式 */
.navigation {
    /* 文本内容居中 */
    text-align: center;
    /* 上外边距为20px */
    margin-top: 20px;
    /* 宽度为100%，占满父容器 */
    width: 100%;
    /* 移除固定高度以适应内容 */
    height: auto; 
}