body {
    margin: 0;
    overflow: hidden;
    background: white;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

svg{
    mix-blend-mode:color-burn;
    width: 100%;
    height: auto;
}


.blob {
    position: absolute;
    width: 600px;
    height: 600px;
    filter: blur(100px); /* Soft edges for blobs */
    opacity: 0.5;
    border-radius: 50%;
    animation: float 3s infinite, gradientMove 10s infinite; /* 添加渐变移动动画 */
}

/* 浮动动画 */
@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(150px, 150px) scale(1.05);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 渐变移动动画 */
@keyframes gradientMove {
    0% {
        background: radial-gradient(circle at 50% 50%, rgba(255, 99, 132, 1), rgba(255, 159, 64, 0.7));
    }
    25% {
        background: radial-gradient(circle at 50% 50%, rgba(54, 162, 235, 1), rgba(153, 102, 255, 0.7));
    }
    50% {
        background: radial-gradient(circle at 50% 50%, rgba(255, 205, 86, 1), rgba(255, 99, 132, 0.7));
    }
    75% {
        background: radial-gradient(circle at 50% 50%, rgba(255, 159, 64, 1), rgba(54, 162, 235, 0.7));
    }
    100% {
        background: radial-gradient(circle at 50% 50%, rgba(255, 99, 132, 1), rgba(255, 159, 64, 0.7));
    }
}



@media screen and (max-width: 430px) {
    html{
        overflow: hidden;
        background-attachment: fixed;
        max-width: 430px;
    }

    body {
        background-size: contain; /* 调整为适应内容 */
        background-position: center; /* 居中背景 */
        background-attachment: fixed; /* 背景固定，避免随页面滚动 */
    }

svg{
    width: 80%;
}

    .blob {
        width: 50px;
        height: 150px;
        top: 10vh;
        left: -50vw;
    }

}