/* style.css */
html {
    font-size: 100%; /* 设置基准字体大小 */
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    font-size: 0.9em; /* 默认字体大小 */
}

/* 媒体查询：手机屏幕 */
@media (max-width: 768px) {
    body {
        font-size: 0.8em; /* 在手机上减小字体大小 */
    }
}

.container {
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding: 0 10px; /* 为手机屏幕添加内边距 */
}

header {
    background-color: #333;
    color: #ffffff;
    padding: 10px 0; /* 调整内边距以适应小屏幕 */
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.5em; /* 调整标题大小 */
}

section {
    padding: 15px; /* 调整内边距以适应小屏幕 */
    background-color: #ffffff;
    margin-bottom: 15px; /* 调整外边距 */
}

footer {
    text-align: center;
    padding: 10px; /* 调整内边距 */
    background-color: #333;
    color: #ffffff;
}

a {
    color: rgba(9, 149, 250, 0.78);
    text-decoration: none;
}

.table-container {
    width: 100%;
    overflow-x: auto; /* 允许横向滚动 */
    -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* 设置表格的最小宽度，确保有内容可以滚动 */
}

th, td {
    white-space: nowrap;
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #f4f4f4;
}

/* 媒体查询：为小屏幕优化 */
@media (max-width: 768px) {
    table {
        min-width: 100%; /* 在小屏幕上，表格至少占满容器宽度 */
    }
}

ul {
    padding-left: 15px; /* 调整列表内边距 */
}

li {
    margin-bottom: 5px; /* 调整列表项外边距 */
}

/* 媒体查询：手机屏幕 */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.2em; /* 在手机上进一步减小标题大小 */
    }
}