.container {
            display: flex;
            justify-content: space-around; /* 内容水平居中分布 */
            align-items: center; /* 内容垂直居中 */
            height: 100vh; /* 高度占满整个视口 */
            transition: transform 0.5s ease-in-out; /* 平滑过渡效果 */
        }

        .content-section {
            color: white;
            padding: 20px;
            border-radius: 10px;
            max-width: 40%; /* 最大宽度限制 */
            text-align: left;
            display: none; /* 默认隐藏 */
            opacity: 0; /* 默认透明度为0 */
            transition: opacity 0.5s ease-in-out; /* 渐变效果 */
        }

        .introduction,
        .skills,
        .music-selection {
            display: flex;
            flex-direction: column; /* 改为垂直排列子元素 */
            align-items: center; /* 子元素垂直居中 */
            width: 90%;
            max-width: 800px; /* 最大宽度限制 */
            margin: 20px auto; /* 上下外边距20px，左右自动居中 */
        }
        .projects {
            display: flex;
            flex-direction: column; /* 改为垂直排列子元素 */
            align-items: center; /* 子元素垂直居中 */
            width: 90%;
            max-width: 800px; /* 最大宽度限制 */
            margin: 20px auto; /* 上下外边距20px，左右自动居中 */
        }
        .text-box {
            width: 80%; /* 调整宽度以适应布局 */
            background-color: rgba(0, 0, 0, 0.7); /* 背景颜色半透明黑色 */
            padding: 20px;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 阴影效果 */
            margin-bottom: 20px; /* 文本框与轮播图之间的间距 */
            font-family: '楷体', STKaiti, Arial, sans-serif; /* 使用楷体字体 */
        }

        #carousel-container {
            display: flex;
            justify-content: center; /* 内容水平居中 */
            align-items: center; /* 内容垂直居中 */
            width: 80%; /* 宽度设置为80% */
        }

        #carousel {
            position: relative;
            width: 100%;
            transform-style: preserve-3d; /* 保持3D变换样式 */
            animation: rotate 20s infinite linear; /* 旋转动画 */
        }

        .slide {
            position: absolute;
            width: 60%; /* 图片宽度 */
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 阴影效果 */
            opacity: 0.7; /* 半透明 */
            transition: transform 0.6s ease-in-out; /* 平滑过渡效果 */
        }
        .gallery-container {
            display: flex;
            justify-content: space-between; /* 内容两端对齐 */
            align-items: center; /* 内容垂直居中 */
            width: 50%; /* 宽度设置为50% */
        }

        .gallery-box {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* 背景颜色半透明黑色 */
            padding: 20px;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 阴影效果 */
        }

        .gallery {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            gap: 20px; /* 子元素间距 */
        }

        .gallery img {
            width: calc(33.33% - 20px); /* 每个图片宽度 */
            height: auto;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 阴影效果 */
            opacity: 0.7; /* 半透明 */
        }

        .simple-carousel-container {
            display: flex;
            justify-content: center; /* 内容水平居中 */
            align-items: center; /* 内容垂直居中 */
            width: 100%; /* 宽度设置为50% */
        }

        .simple-carousel {
            width: 200%;
            height: 250px; /* 固定高度 */
            overflow: hidden; /* 隐藏溢出内容 */
            background-color: rgba(0, 0, 0, 0.7); /* 背景颜色半透明黑色 */
            margin-left: -150px;
            padding: 20px;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 阴影效果 */
        }
        #d1{width: 100%;
            height: 300px; /* 固定高度 */
            overflow: hidden; /* 隐藏溢出内容 */
            background-color: rgba(0, 0, 0, 0.7); /* 背景颜色半透明黑色 */
            margin-left: 50px;
            padding: 20px;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 阴影效果 */}
        .simple-slide {
            width: 100%;
            height: 100%;
            opacity: 0; /* 默认透明度为0 */
            transition: opacity 1s ease-in-out; /* 渐变效果 */
        }

        .simple-slide.active {
            opacity: 1; /* 显示时透明度为1 */
        }

        .music-player-container {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.5); /* 背景颜色半透明白色 */
            padding: 10px;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            border: 2px solid #ccc; /* 边框 */
            display: flex;
            flex-direction: column; /* 垂直排列子元素 */
            align-items: center; /* 子元素垂直居中 */
        }

        .song-title {
            margin-bottom: 10px; /* 歌曲名称与唱片图标之间的间距 */
            font-size: 16px;
            color: black;
            font-family: '楷体', STKaiti, Arial, sans-serif; /* 使用楷体字体 */
        }

        .record {
            width: 100px;
            height: 100px;
            background-image: url('Anon2.jpg'); /* 替换为你的唱片图片URL */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            animation: spin 10s linear infinite paused; /* 旋转动画 */
            display: inline-block;
            vertical-align: middle;
        }
        .navigation {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: rgba(255, 255, 255, 0.5); /* 背景颜色半透明白色 */
            padding: 10px;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            border: 2px solid #ccc; /* 边框 */
        }

        .navigation button {
            margin: 0 5px;
            cursor: pointer;
            background-color: transparent;
            border: none;
            color: black;
            font-size: 16px;
        }

        .navigation button:hover {
            color: blue;
        }

        /* 实时时间样式 */
        .real-time-clock {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Georgia Bold Italic', cursive; /* 使用华文彩云字体 */
            font-size: 50px;
            color: white;
            z-index: 1000; /* 确保在最上层 */
        }

        /* 音乐选择器样式 */
        .music-buttons {
            margin-top: 20px;
            display: flex;
            gap: 10px; /* 按钮之间的间距 */
        }

        .music-buttons button {
            font-family: 'Noto Serif SC', STKaiti, Arial, sans-serif; /* 使用楷体字体 */
            padding: 10px 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: pointer;
        }

        .music-buttons button:hover {
            background-color: #e0e0e0;
        }

        /* 技能部分布局 */
        .skills-content {
            display: flex;
            flex-direction: row; /* 水平排列子元素 */
            align-items: center; /* 子元素垂直居中 */
            width: 150%;
            max-width: 1000px; /* 最大宽度限制 */
            margin: 20px ; /* 上下外边距20px，左右自动居中 */
            margin-left: -100px;
            float: left;
            
        }

        .skills-gallery-box {
            flex: 2; /* 占据剩余空间的一半 */
            margin-right: 20px; /* 右侧间距 */
        }

        .skills-text-box {
            flex: 2; /* 占据剩余空间的一半 */
        }

        .skills-text-box .text-box {
            width: 100%; /* 文本框宽度调宽 */
        }

        /* 修改技能图片样式 */
        .skills-gallery-box .gallery img {
            width: calc(33.33% - 20px); /* 每个图片宽度 */
            height: auto;
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.5); /* 描边效果 */
            opacity: 1; /* 半透明 */
            transform: scale(1.1); /* 稍微放大 */
            background-color: rgba(128, 128, 128, 0.5); /* 灰色半透明背景 */
        }

        /* 我的作品部分布局 */
        .works-content {
            display: flex;
            flex-direction: row; /* 水平排列子元素 */
            align-items: flex-start; /* 子元素顶部对齐 */
            width: 150%;
            max-width: 800px; /* 最大宽度限制 */
            margin: 20px ; /* 上下外边距20px，左右自动居中 */
            margin-left: -100px;
            float: left;
        }

        .works-tab-container {
            flex: 0.5; /* 占据剩余空间的一半 */
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.7); /* 背景颜色半透明黑色 */
            border-radius: 10px; /* 圆角 */
           
            margin: 20px; /* 左右间距 */
            margin-left: -100px;
        }

        .works-tab {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 10px 10px 0 0; /* 圆角顶部 */
            background-color: rgba(0, 0, 0, 0.7); /* 背景颜色半透明黑色 */
            color: white;
            margin-right: 10px; /* 右侧间距 */
            transition: background-color 0.3s ease-in-out; /* 背景颜色过渡效果 */
        }

            .works-tab.active {
                background-color: rgba(0, 0, 0, 0.9); /* 激活状态下的背景颜色 */
            }

            .works-tab:hover {
                background-color: rgba(0, 0, 0, 0.8); /* 鼠标悬停时的背景颜色 */
            }

        .works-page {
            display: none; /* 默认隐藏所有页面 */
        }

            .works-page.active {
                display: block; /* 显示激活的页面 */
            }

        .works-gallery {
            display: flex;
            /*flex-wrap: wrap; /* 允许换行 */
            gap: 20px; /* 子元素间距 */
        }

            .works-gallery a {
                display: block;
            }

            .works-gallery img {
                width: 200px; /* 统一图片宽度 */
                height: 200px; /* 统一图片高度 */
                object-fit: fill; /* 图片裁剪方式 */
                border-radius: 10px; /* 圆角 */
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.5); /* 描边效果 */
                opacity: 0.7; /* 半透明 */
                transform: scale(1.1); /* 稍微放大 */
                background-color: rgba(128, 128, 128, 0.5); /* 灰色半透明背景 */
                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 过渡效果 */
            }

                .works-gallery img:hover {
                    transform: scale(1.2); /* 鼠标悬停时稍微放大 */
                    opacity: 1; /* 完全不透明 */
                }

        

            .my-work-column h2 {
                margin-bottom: 20px; /* 标题与内容之间的间距 */
            }

        .featured-work {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

            .featured-work img {
                width: 200px; /* 统一图片宽度 */
                height: 200px; /* 统一图片高度 */
                object-fit: cover; /* 图片裁剪方式 */
                border-radius: 10px; /* 圆角 */
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.5); /* 描边效果 */
                opacity: 0.7; /* 半透明 */
                transform: scale(1.1); /* 稍微放大 */
                background-color: rgba(128, 128, 128, 0.5); /* 灰色半透明背景 */
                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 过渡效果 */
            }

                .featured-work img:hover {
                    transform: scale(1.2); /* 鼠标悬停时稍微放大 */
                    opacity: 1; /* 完全不透明 */
                }

        .featured-work-description {
            margin-left: 20px;
            background-color: rgba(128, 128, 128, 0.5); /* 灰色半透明背景 */
            color: white;
            font-size: 14px;
            padding: 10px;
            border-radius: 10px;
        }

        .other-works {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

            .other-works h3 {
                margin-bottom: 10px; /* 标题与内容之间的间距 */
            }