body { 
    margin: 0; 
    padding: 0;
    background-color: #ff4d4d;
    text-align: center; 
    overflow: hidden;
}

.balloon-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.balloon {
    display: inline-block;
    width: 120px;
    height: 145px;
    background: hsl(215,50%,65%);
    border-radius: 80%;
    position: absolute;
    bottom: -145px;
    box-shadow: inset -10px -10px 0 rgba(0,0,0,0.07);
    z-index: 10;
    animation: balloons 4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes balloons {
    0% { 
        transform: translateY(0) rotate(-1deg);
    }
    100% { 
        transform: translateY(-100vh - 72.5px) rotate(1deg);
    }
}

.balloon:before {
    content: "▲";
    font-size: 20px;
    color: hsl(215,30%,50%);
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -12px;
    z-index: -100;
}

.balloon:after {
    display: inline-block; 
    top: 153px;
    position: absolute;
    height: 250px;
    width: 1px;
    margin: 0 auto;
    content: "";
    background: rgba(0,0,0,0.2); 
}

@media (max-width: 600px) {
    .balloon {
        width: 8vw;
        height: 11vw;
    }
}

@media only screen and (max-width: 768px) {
    .balloon {
        width: 8vw;
        height: 12vw;
    }
    /* Additional mobile-specific styles */
}

.balloon.pink { background: linear-gradient(to top left, #ff9a9e, #fad0c4, #ffffff); }
.balloon.blue { background: linear-gradient(to top left, #a1c4fd, #c2e9fb, #ffffff); }
.balloon.green { background: linear-gradient(to top left, #d4fc79, #96e6a1, #ffffff); }
.balloon.yellow { background: linear-gradient(to top left, #fff720, #ffcf71, #ffffff); }
.balloon.purple { background: linear-gradient(to top left, #9d50bb, #6e48aa, #ffffff); }
.balloon.orange { background: linear-gradient(to top left, #ff6a00, #ee0979, #ffffff); }


.center-mask {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Fixed width */
    height: 150px; /* Fixed height */
    background-color: pink;
    padding: 20px;
    border-radius: 10px;
    z-index: 20;
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

.center-mask p {
    color: white;
    font-size: 24px;
    text-align: center;
    margin: 0;
}