body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start; /* 图片靠左对齐 */
    align-items: center;
    padding-left: 10%; /* 左侧留出空隙 */
}
.content img {
    max-width: 60%;
    height: auto;
}
.footer {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    padding: 10px 0;
}
.footer a {
    text-decoration: none;
    color: #ccc;
}

/* 针对手机端的媒体查询 */
@media (max-width: 768px) {
    body {
        overflow-y: auto; /* 启用滚动条 */
    }
    .header {
        position: sticky; /* 确保 header 固定在页面顶部 */
        top: 0;
        z-index: 20; /* 确保 header 不被内容覆盖 */
        background-color: black; /* 确保 header 背景不透明 */
    }
    .content {
        justify-content: center; /* 图片居中显示 */
        padding: 0;

    }
    .content img {
        max-width: 90%; /* 手机端图片更大 */
        height: auto;
        max-height: 60vh; /* 限制图片高度为视口高度的 60% */
        margin-top: 20px; /* 增加顶部间距，避免与 header 重叠 */
        margin-top: -200px; /* 图片向上提升 */
    }
    .footer {
        font-size: 10px;
        padding: 5px 0;
    }
}

/* 横屏时的优化调整 */
@media (orientation: landscape) and (max-width: 768px) {
    .content img {
        max-width: 90%; /* 横屏时进一步增大图片宽度 */
        max-height: 65vh; /* 限制图片高度为视口高度的 65% */
        margin-top: 100px; /* 减少顶部间距 */
    }
}