.cosmic-objects-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
        z-index: 1;
    }

    .cosmic-object {
        position: absolute;
        opacity: 0.9;
        will-change: transform;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }

    .planet-blue {
        width: 190px;
        height: 190px;
        top: 50px;
        left: 10%;
        background: url('../img/fondo/planet-blue.png') no-repeat center center / cover;
        animation: floatRocket 7s ease-in-out infinite alternate;
    }

    .moon-yellow {
        width: 110px;
        height: 110px;
        top: 60%;
        right: 10%;
        background: url('../img/fondo/moon-yellow.png') no-repeat center center / cover;
        animation: floatRocket 8s ease-in-out infinite alternate;
    }

    .planet-ring {
        width: 225px;
        height: 225px;
        bottom: 10%;
        left: 5%;
        border-radius: 50%;
        background: url('../img/fondo/planet-ring.png') no-repeat center center / contain;
        animation: floatRocket 9s ease-in-out infinite alternate;
    }

    .rocket {
        width: 120px;
        height: 120px;
        top: 20%;
        left: 85%;
        background: url('../img/fondo/rocket.png') no-repeat center center / contain;
        animation: floatRocket 10s ease-in-out infinite alternate;
    }

    .astronaut {
        width: 100px;
        height: 100px;
        top: 80%;
        left: 30%;
        background: url('../img/fondo/astronaut.png') no-repeat center center / contain;
        animation: floatAstronaut 11s ease-in-out infinite alternate;
    }

    .galaxy {
        position: absolute;
        width: 500px;
        height: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        opacity: 0.5;
        background: url('../img/fondo/galaxy.png') no-repeat center center / contain;
        animation: floatRocket 12s ease-in-out infinite alternate;
    }

    @keyframes floatRocket {
        0% {
            transform: translate3d(0, 0, 0) rotate(5deg);
            opacity: 0.9;
        }

        50% {
            transform: translate3d(10px, -20px, 0) rotate(-5deg);
            opacity: 1;
        }

        100% {
            transform: translate3d(0, 0, 0) rotate(5deg);
            opacity: 0.9;
        }
    }

    @keyframes floatAstronaut {
        0% {
            transform: translate3d(0, 0, 0) scale(1);
            opacity: 0.8;
        }

        30% {
            transform: translate3d(15px, 10px, 0) scale(1.02);
            opacity: 0.9;
        }

        70% {
            transform: translate3d(-10px, -15px, 0) scale(0.98);
            opacity: 0.85;
        }

        100% {
            transform: translate3d(0, 0, 0) scale(1);
            opacity: 0.8;
        }
    }

    @media (max-width: 768px) {

        .planet-blue,
        .moon-yellow,
        .rocket,
        .astronaut,
        .planet-ring {
            width: 60px;
            height: 60px;
        }

        .planet-blue {
            top: 10%;
            left: 5%;
            animation: floatMobile 6s ease-in-out infinite alternate;
        }

        .moon-yellow {
            bottom: 8%;
            right: 8%;
            top: auto;
            animation: floatMobile 6s ease-in-out infinite alternate;
        }

        .planet-ring {
            bottom: 6%;
            left: 5%;
            animation: floatMobile 9s ease-in-out infinite alternate;
        }

        .rocket {
            top: 12%;
            right: 5%;
            left: auto;
            animation: floatMobile 10s ease-in-out infinite alternate;
        }

        .astronaut {
            bottom: 15%;
            top: auto;
            left: 50%;
            transform: translateX(-50%);
            animation: floatMobileAstronaut 11s ease-in-out infinite alternate;
        }

        .galaxy {
            width: 250px;
            height: 250px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) !important;
            opacity: 0.4;
        }

        @keyframes floatMobile {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 0.85;
            }

            50% {
                transform: translate3d(5px, -10px, 0);
                opacity: 1;
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 0.85;
            }
        }

        @keyframes floatMobileAstronaut {
            0% {
                transform: translateX(-50%) translate3d(0, 0, 0);
                opacity: 0.8;
            }

            50% {
                transform: translateX(-50%) translate3d(10px, -15px, 0);
                opacity: 0.9;
            }

            100% {
                transform: translateX(-50%) translate3d(0, 0, 0);
                opacity: 0.8;
            }
        }
    }