body {
    margin: 0; /* 去除默认边距 */
    padding: 0; /* 去除默认内边距 */
    font-family: 'Microsoft YaHei', sans-serif; /* 设置字体 */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* 背景渐变 */
    min-height: 100vh; /* 最小高度为视口高度 */
}

.container {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 居中对齐 */
    padding: 40px 20px; /* 内边距 */
}

h1 {
    text-align: center; /* 标题居中 */
    color: #2c3e50; /* 标题颜色 */
    margin-bottom: 50px; /* 底部外边距 */
}

.timeline {
    position: relative; /* 相对定位 */
    padding: 20px 0; /* 内边距 */
}

.timeline::before {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    left: 10%; /* 居中 */
    transform: translateX(-50%); /* 使其居中 */
    width: 4px; /* 竖线宽度 */
    height: 100%; /* 竖线高度 */
    background: linear-gradient(to bottom, #FF5733, #FFC300, #DAF7A6); /* 渐变颜色 */
}

.timeline-item {
    margin-bottom: 50px; /* 底部外边距 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative; /* 相对定位 */
}

/* 新增样式：时间轴项的描述文字 */
.description {
    margin-top: 10px; /* 顶部外边距 */
    font-style: italic; /* 斜体 */
    color: #555; /* 描述文字颜色 */
}

.date {
    background: #e74c3c; /* 日期背景颜色 */
    color: white; /* 日期文字颜色 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    position: absolute; /* 绝对定位 */
    left: calc(10% - 100px); /* 居中 */
}

.content {
    background: white; /* 内容背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* 阴影效果 */
    width: 70%; /* 宽度 */
    margin-left: 10%; /* 左侧外边距 */
}

.content img {
    max-width: 100%; /* 最大宽度 */
    border-radius: 5px; /* 圆角 */
}

.message-board {
    background: white; /* 消息板背景颜色 */
    padding: 30px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    margin-top: 50px; /* 顶部外边距 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 修改银杏叶动画相关的CSS */
.ginkgo-leaves {
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度 */
    height: 100%; /* 高度 */
    pointer-events: none; /* 禁用鼠标事件 */
    z-index: 1000; /* 层级 */
    overflow: hidden; /* 隐藏溢出内容 */
}

.leaf {
    position: absolute; /* 绝对定位 */
    width: 80px; /* 叶子宽度 */
    height: 80px; /* 叶子高度 */
    background: url('picture/银杏叶.png') no-repeat; /* 背景图 */
    background-size: contain; /* 背景图自适应 */
    animation: falling 10s linear infinite, swinging 3s ease-in-out infinite alternate; /* 动画效果 */
    opacity: 0.8; /* 透明度 */
}

@keyframes falling {
    0% {
        top: -10%; /* 初始位置 */
        transform: translateX(0) rotate(0deg); /* 初始旋转 */
    }
    100% {
        top: 110%; /* 结束位置 */
        transform: translateX(100px) rotate(360deg); /* 结束旋转 */
    }
}

@keyframes swinging {
    0% {
        transform: translateX(0) rotate(0deg); /* 初始状态 */
    }
    50% {
        transform: translateX(50px) rotate(180deg); /* 中间状态 */
    }
    100% {
        transform: translateX(-50px) rotate(360deg); /* 结束状态 */
    }
}

.music-control {
    position: fixed; /* 固定定位 */
    top: 20px; /* 顶部对齐 */
    right: 20px; /* 右侧对齐 */
    width: 40px; /* 宽度 */
    height: 40px; /* 高度 */
    z-index: 1001; /* 层级 */
    cursor: pointer; /* 鼠标指针样式 */
}

.music-control img {
    width: 100%; /* 图片宽度 */
    height: 100%; /* 图片高度 */
}

@keyframes rotate {
    from {
        transform: rotate(0deg); /* 初始旋转 */
    }
    to {
        transform: rotate(360deg); /* 结束旋转 */
    }
}