/* 页面整体设置 */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f4f4f4;
    overflow: hidden;
}

/* 设置背景图为 740x420 长宽比，并适应屏幕 */
.container {
    width: 100%;
    height: 0;
    padding-bottom: 57.14%; /* 420/740 = 0.567 => 100% * 0.567 = 57.14% */
    background: url('Bio4Apps2025_background.png') no-repeat center center;
    background-size: contain; /* 背景图按比例填充，不会被裁剪 */
    position: relative;
}

/* 修改 header 背景 */
#header {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    width: 80%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-image: url('Bio4Apps2025_background.png'); /* 将背景图设置为 header 的背景 */
    background-size: contain; /* 背景图按比例显示 */
    background-position: center; /* 背景图居中显示 */
    color: white; /* 改变字体颜色以保证在背景上清晰可见 */
}

/* 内容区域布局 */
#content {
    display: flex;
    width: 80%;
    gap: 20px;
}

/* 菜单样式 */
#menu {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 主内容 */
#main {
    flex: 3;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* 内容较长时支持滚动 */
}

/* TOPICS 样式 */
.topics {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.topic {
    background: #eef;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}