/* 全局样式 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* 使用一个柔和的粉色径向渐变作为背景 */
    background: radial-gradient(circle, #ffe0e6, #ffc0cb);
    overflow: hidden; /* 隐藏滚动条 */
    font-family: 'ZCOOL KuaiLe', cursive; /* 使用引入的可爱字体 */
}

/* 主要内容区域，用于垂直和水平居中 */
.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 核心文字样式 */
.main-text {
    font-size: 10vw; /* 字体大小随屏幕宽度变化 */
    color: white;
    text-shadow: 3px 3px 5px rgba(255, 105, 180, 0.5); /* 粉色阴影，增加立体感 */
    animation: pulse 2.5s ease-in-out infinite; /* 添加呼吸动画 */
    z-index: 10;
}

/* GIF动图的容器 */
.gif-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 单个GIF动图的样式 */
.gif-item {
    position: absolute;
    width: 120px; /* 您可以根据需要调整GIF的大小 */
    height: 120px;
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: float 6s ease-in-out infinite; /* 添加上下浮动动画 */
}

/* 定义动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}