body{
    background-color: #FFFAFA;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url("./../img/index_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
    opacity: 0;
}

body.fade-in {
    opacity: 1;
}

body.fade-out {
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0);
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out forwards;
}

.fade-out {
    animation: fadeOut 1s ease-in-out forwards;
}

.text{
    background-color: rgba(204,204,204,0.6); /* 灰色背景 */
    border-radius: 20px; /* 圆角 */
    padding: 40px; /* 增加内边距，使内容放大 */
    text-align: center; /* 文本居中 */
    transform: scale(1.5); /* 放大内容 */
    transform-origin: center; /* 放大中心点 */
    margin-bottom: 50px; /* 增加底部外边距，防止被底部元素遮挡 */
    position: relative; /* 添加相对定位 */
    z-index: 2; /* 确保内容在覆盖层之上 */

    .title{
        text-align: center;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        margin-bottom: 20px;
        color: deepskyblue;
        font-size: 2em; /* 增加字体大小 */
    }


    .next{
        background-color: transparent;
        text-align: center;
        border-radius: 10px;

        :hover{
            background-color: deepskyblue;
            color: white;
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #CDCDCD; /* 可以根据需要设置背景颜色 */
    text-align: center;
    padding: 10px 0; /* 增加内边距 */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 可选：增加阴影效果 */

    .footer_statement {
    }
}