/* 日期和时间显示样式 */
#clock {
    position: fixed; /* 固定在页面上 */
    top: 20px; /* 距离顶部 20px */
    right: 20px; /* 距离右侧 20px */
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* 文字颜色为白色 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    padding: 10px;
    border-radius: 5px;
    z-index: 1000; /* 确保时间显示在最上层 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px; /* 日期和时间之间的间距 */
}

#date {
    font-size: 16px;
}

#time {
    font-size: 20px;
}

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0073e6; /* 蓝色背景 */
    color: #fff; /* 文字颜色为白色 */
    display: flex;
    flex-direction: column; /* 手机端改为纵向布局 */
}

/* 导航栏样式 */
.sidebar {
    width: 100%; /* 手机端占满宽度 */
    background-color: #005bb5; /* 深蓝色导航栏 */
    padding: 10px;
    box-sizing: border-box;
    text-align: center; /* 内容居中 */
}
.content {
    width: 100%;
    max-width: 100%; /* 确保内容不超出屏幕 */
    overflow: auto; /* 如果内容过多，允许滚动 */
}
.sidebar h2 {
    color: #fff; /* 欢迎标题颜色 */
    margin-bottom: 10px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    display: flex; /* 横向排列 */
    justify-content: center; /* 内容居中 */
    flex-wrap: wrap; /* 允许换行 */
}

.sidebar ul li {
    margin: 5px 10px; /* 调整间距 */
}

.sidebar ul li a {
    text-decoration: none;
    color: #fff; /* 导航链接颜色 */
    font-size: 16px;
    display: block;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.sidebar ul li a:hover {
    background-color: #0073e6; /* 鼠标悬停时背景颜色变为蓝色 */
}

/* 内容区域样式 */
.content {
    padding: 20px;
    background-color: #0073e6; /* 内容区域背景颜色 */
    margin-top: 80px; /* 为导航栏留出空间 */
}

/* 章节样式 */
h1 {
    color: #ffcc00; /* 章节标题颜色 */
    text-align: center; /* 标题居中 */
}

p {
    line-height: 1.6;
    text-align: center; /* 内容居中 */
}

/* 媒体查询：适配手机端 */
@media (max-width: 768px) {
    #clock {
        top: 10px;
        right: 10px;
        font-size: 14px;
        padding: 8px;
    }

    #date {
        font-size: 12px;
    }

    #time {
        font-size: 16px;
    }

    .sidebar {
        position: fixed; /* 固定在顶部 */
        top: 0;
        left: 0;
        z-index: 1000; /* 确保导航栏在最上层 */
    }

    .content {
        margin-top: 120px; /* 为导航栏和日期时间显示留出空间 */
    }
}