body {
    display: flex; /* 将body设置为flex容器 */
    flex-direction: column; /* flex项目的排列方向为垂直列 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    height: 100vh; /* 高度为视口高度的100% */
    margin: 0; /* 外边距为0 */
    background-color: #f0f0f0; /* 背景颜色为浅灰色 */
}

.container {
    display: flex; /* 将container设置为flex容器 */
    flex-direction: column; /* flex项目的排列方向为垂直列 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    width: 100%; /* 宽度为100% */
}

#welcomeMessage {
    font-size: 1.5em; /* 字体大小为1.5倍 */
    margin-bottom: 20px; /* 下边距为20像素 */
}

#urlDisplay {
    font-size: 1em; /* 字体大小为默认大小 */
}

@media screen and (max-width: 600px) {
    /* 当屏幕宽度小于或等于600像素时的媒体查询 */
    .container {
        flex-direction: column; /* 将flex项目的排列方向设为垂直列 */
    }

    #welcomeMessage {
        font-size: 1.2em; /* 字体大小调整为1.2倍 */
        margin-right: 0; /* 右边距为0 */
        margin-bottom: 10px; /* 下边距为10像素 */
    }
}

footer {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 距离底部为0 */
    width: 100%; /* 宽度为100% */
    text-align: center; /* 文本居中对齐 */
    padding: 10px 0; /* 上下内边距为10像素 */
}

.copyright {
    color: black; /* 文字颜色为黑色 */
    font-size: 0.8em; /* 字体大小为0.8倍 */
    background-color: transparent; /* 背景颜色透明 */
}

.copyright a {
    color: black; /* 链接文字颜色为黑色 */
    text-decoration: none; /* 无下划线 */
}

.red-text {color: red;} /* 定义一个类选择器，使应用该类的元素文字颜色为红色 */

/* 让内容放大消失，配合js使用 */
.fadeOut {animation: fadeOutAnimation 10s ease-in-out forwards;}
@keyframes fadeOutAnimation {0% {transform: scale(1);opacity: 1;}  100% {transform: scale(1.5);opacity: 0;}  }