body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(to bottom, #87CEEB, #98FB98);
    overflow: hidden;
}

.sun {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #FFD700, #FFA500);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    z-index: 800;
}

.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: 900;
}

.cloud {
    position: absolute;
    top: 30px;
    width: 120px;
    height: 60px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: moveCloud 30s linear infinite;
    opacity: 0.8;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud::before {
    width: 60px;
    height: 60px;
    top: -20px;
    left: 40px;
}

.cloud::after {
    width: 80px;
    height: 80px;
    top: -30px;
    left: 80px;
}

.cloud-1 {
    left: -200px;
    animation-duration: 40s;
    opacity: 0.8;
}

.cloud-2 {
    left: -400px;
    top: 60px;
    animation-duration: 50s;
    opacity: 0.9;
}

.cloud-3 {
    left: -600px;
    top: 15px;
    animation-duration: 35s;
    opacity: 0.7;
}

@keyframes moveCloud {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(110vw);
    }
}

.balloon {
    position: absolute;
    width: 80px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Основной фон шарика с градиентом и логотипом внутри */
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 107, 107, 0.8),
            rgba(196, 69, 105, 0.8)
        ),
        url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
    background-color: rgba(255, 107, 107, 0.8);
    background-blend-mode: overlay;
    background-size: 70%; /* Размер логотипа относительно шарика */
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.1s ease-out;
    animation: colorChange 8s infinite alternate;
}

/* Верёвочка с бантиком — теперь точно внизу шарика */
.ribbon {
    position: absolute;
    bottom: -35px; /* Опущена ниже шарика, чтобы верёвочка начиналась снизу */
    left: 50%;
    transform: translateX(-50%);
    width: 2px; /* Очень тонкая верёвочка */
    height: 35px;
    background: #333;
    z-index: 999;
    transform-origin: top center;
}

/* Узел бантика */
.knot {
    position: absolute;
    top: 0; /* Прижат к началу верёвочки */
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
}

/* Левая часть бантика */
.bow-left {
    position: absolute;
    top: -6px; /* Немного выше узла */
    left: -8px;
    width: 12px;
    height: 6px;
    background: #333;
    border-radius: 3px;
    transform: rotate(-45deg);
}

/* Правая часть бантика */
.bow-right {
    position: absolute;
    top: -6px; /* Немного выше узла */
    right: -8px;
    width: 12px;
    height: 6px;
    background: #333;
    border-radius: 3px;
    transform: rotate(45deg);
}

@keyframes colorChange {
    0% {
        background:
            radial-gradient(circle at 50% 20%, #ff6b6b, #c44569),
            url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
        background-size: 70%;
        background-color: rgba(255, 107, 107, 0.8);
        background-blend-mode: overlay;
    }
    20% {
        background:
            radial-gradient(circle at 50% 20%, #4CAF50, #2E7D32),
            url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
        background-size: 70%;
        background-color: rgba(76, 175, 80, 0.8);
        background-blend-mode: overlay;
    }
    40% {
        background:
            radial-gradient(circle at 50% 20%, #2196F3, #0D47A1),
            url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
        background-size: 70%;
        background-color: rgba(33, 150, 243, 0.8);
        background-blend-mode: overlay;
    }
    60% {
        background:
            radial-gradient(circle at 50% 20%, #9C27B0, #4A148C),
            url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
        background-size: 70%;
        background-color: rgba(156, 39, 176, 0.8);
        background-blend-mode: overlay;
    }
    80% {
        background:
            radial-gradient(circle at 50% 20%, #FF9800, #E65100),
            url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
        background-size: 70%;
        background-color: rgba(255, 152, 0, 0.8);
        background-blend-mode: overlay;
    }
    100% {
        background:
            radial-gradient(circle at 50% 20%, #E91E63, #880E4F),
            url('https://redarmy.fm/images/uploaded/logo/logo.png') no-repeat center center;
        background-size: 70%;
        background-color: rgba(233, 30, 99, 0.8);
        background-blend-mode: overlay;
    }
}