body {
    font-family: Arial, sans-serif;
    margin: 0; /* 移除默认的 body margin */
    padding: 0; /* 移除默认的 body padding */
    height: 100vh; /* 使 body 高度占满整个视窗 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* 使 main 高度占满剩余空间 */
    text-align: center;
    position: relative;
    top: 33vh; /* 将main元素向下移动33%屏幕高度 */
    transform: translateY(-50%); /* 将main元素向上移动自身高度的一半 */
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px 0;
    text-align: center;
    font-size: 12px; /* 调整字体大小 */
    color: rgba(0, 0, 0, 0.3); /* 将文字颜色调整为30%的黑色（灰色） */
}
footer p {
    margin: 0;
    line-height: 1.5; /* 增加行高，确保垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* 尽量不换行 */
}
a {
    color: inherit; /* 使用父元素的颜色，确保链接文字显示标准颜色 */
    text-decoration: none;
    margin: 0 0.3em; /* 增加链接间的间距 */
}
a:hover {
    text-decoration: underline;
}
i {
    margin-right: 0.3em; /* 增加 logo 前的半个字符间距 */
}
img {
    width: 12px; /* 根据实际需求调整大小 */
    height: auto;
    vertical-align: middle; /* 使图片在行内垂直居中 */
    margin-left: 0.6em; /* 增加 logo 前的半个字符间距 */
    margin-right: 0.3em; /* 增加 logo 前的半个字符间距 */
}
/* 响应式设计 */
@media (max-width: 600px) {
    footer {
        font-size: 10px; /* 在较小屏幕上调整字体大小 */
    }
    footer p {
        flex-wrap: wrap; /* 在小屏幕上允许换行 */
    }
    footer p img {
        margin-left: 0; /* 去掉logo前的间距 */
        margin-top: 0.3em; /* 增加顶部间距，以便从logo开始换行 */
    }
}