/* ========== 全局基础样式 ========== */
body {
    font-family: 'Georgia', serif;
    background-color: #F8F8F8;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* 主要内容容器 */
.wrapper {
    width: 80%;
    max-width: 900px;
    margin: 20px auto;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* ========== 2列布局 ========== */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* 左侧主要内容区域 */
.main-content {
    width: 65%;
}

/* 右侧信息栏 */
.sidebar {
    width: 30%;
    background-color: #C16F36;
    color: white;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

/* 响应式设计：在小屏幕上变成单列布局 */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .main-content, .sidebar {
        width: 100%;
    }
}

/* ========== 头部样式 ========== */
header h1 {
    font-size: 28px;
    font-weight: bold;
    color: #3D3D3D;
}

header p {
    font-size: 18px;
    color: #B66532;
    font-weight: bold;
}

/* ========== 导航栏 ========== */
nav ul {
    padding: 0;
    list-style: none;
    background: black;
    text-align: center;
    margin: 20px 0;
}

nav ul li {
    display: inline;
    padding: 10px 15px;
}

nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: white;
    padding: 10px 15px;
    text-transform: uppercase;
}

nav ul li a.current {
    background: white;
    color: black;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
}

/* 适配双栏模式的图片 */
.main-image {
    width: 100%; /* 让图片占满父容器 */
    max-width: 500px; /* 限制图片最大宽度，避免溢出 */
    height: auto; /* 保持图片比例 */
    display: block;
    margin: 0 auto 20px; /* 居中对齐，并在下方添加间距 */
    border-radius: 10px; /* 圆角优化 */
}

/* 在小屏幕上让图片适应 */
@media screen and (max-width: 768px) {
    .main-image {
        max-width: 100%; /* 在小屏幕上填充整个容器 */
    }
}

/* ========== 按钮样式 ========== */
.fancy-button {
    background: #B66532;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
}

.fancy-button:hover {
    background: #944E24;
}

/* ========== 返回顶部按钮 ========== */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

#backToTop:hover {
    background: #444;
}

/* ========== 夜间模式 ========== */
.dark-mode {
    background-color: #121212;
    color: #E0E0E0;
}

/* 夜间模式下的主要内容区域 */
.dark-mode .wrapper {
    background-color: #222;
    color: #E0E0E0;
}

/* 夜间模式下的导航栏 */
.dark-mode nav ul {
    background: #222;
}

.dark-mode nav ul li a {
    color: #E0E0E0;
}

.dark-mode nav ul li a.current {
    background: #E0E0E0;
    color: black;
}

/* 夜间模式下的侧边栏 */
.dark-mode .sidebar {
    background-color: #B66532;
    color: white;
}

/* 夜间模式下的按钮 */
.dark-mode .fancy-button {
    background: #E0E0E0;
    color: black;
}

.dark-mode .fancy-button:hover {
    background: #C4C4C4;
}

/* 夜间模式下的返回顶部按钮 */
.dark-mode #backToTop {
    background: white;
    color: black;
}

.dark-mode #backToTop:hover {
    background: #DDD;
}

/* 夜间模式下的页脚 */
.dark-mode footer {
    background-color: #181818;
    color: #E0E0E0;
}

.dark-mode footer a {
    color: #B66532;
}