body {
    background: linear-gradient(135deg,#e8f9ff,#c7eeff,#9bddff);
}

.floating {
    position: absolute;
    font-size: clamp(35px,5vw,70px);
    opacity: 0.18;
    animation: float 12s infinite ease-in-out;
    user-select: none;
}

.f1 {
    top: 8%;
    left: 10%;
    animation-delay: 0s;
}

.f2 {
    top: 18%;
    right: 12%;
    animation-delay: 2s;
}

.f3 {
    bottom: 15%;
    left: 15%;
    animation-delay: 4s;
}

.f4 {
    bottom: 10%;
    right: 18%;
    animation-delay: 1s;
}

.f5 {
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

.f6 {
    top: 55%;
    right: 8%;
    animation-delay: 5s;
}

.f7 {
    top: 30%;
    left: 45%;
    animation-delay: 6s;
}

.f8 {
    bottom: 28%;
    right: 40%;
    animation-delay: 7s;
}

@keyframes float {

    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(10deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}
@media (max-width:480px) {
    .floating {
        opacity: 0.12;
    }
}