body {
    background-color: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    --color-idx1:#7B61FF;
}
/* header {
    border:  1px solid #57E4FF;
    border-bottom: radial-gradient(#57E4FF, #8B95F2, #8B72EE, #8556EA, #4138E5);
} */

/* 轮播图动画 */
#carousel{
    margin: auto; /* 居中 */
    width: 400px; /* 设置宽度 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 超出隐藏 */
    height: 300px;
    background: lightgray 50% / cover no-repeat;
    box-shadow: 0px 4px 34px 7px rgba(123, 97, 255, 0.29);
}
#carousel > ul {
    display: flex; /* 图片处理为一行 */
    position: absolute; /* 设置绝对定位，实现相对于#carousel的绝对定位 */
}
#carousel > ul,
#carousel > ul > li{
    padding: 0;
    margin: 0;
    list-style:none; 
}

#carousel > ul{
     animation: switch 10s ease 1s infinite alternate; /* 设定动画播放 */
}

#carousel > ul:hover{
     animation-play-state: paused; /* 暂停动画 */
}

@keyframes switch{ /* 制定动画规则 */
    0%,13%{
        left: 0;
        --color-idx0:#7B61FF;
        --color-idx1:#CECFD5;
        --color-idx2:#CECFD5;
        --color-idx3:#CECFD5;
        --color-idx4:#CECFD5;
    }
    27%,41%{
        left: -400px;
        --color-idx1:#7B61FF;
        --color-idx0:#CECFD5;
        --color-idx2:#CECFD5;
        --color-idx3:#CECFD5;
        --color-idx4:#CECFD5;
    }
    55%,69%{
        left: -800px;
        --color-idx2:#7B61FF;
        --color-idx1:#CECFD5;
        --color-idx0:#CECFD5;
        --color-idx3:#CECFD5;
        --color-idx4:#CECFD5;
    }
    83%,100% {
        left: -1200px;
        --color-idx3:#7B61FF;
        --color-idx1:#CECFD5;
        --color-idx2:#CECFD5;
        --color-idx0:#CECFD5;
        --color-idx4:#CECFD5;
    }
}
/* 轮播图动画 */