/* ==========================================
   FLOATING ANIMATIONS
========================================== */

.floating-logo{

    animation:floatingLogo 6s ease-in-out infinite;

    transform-origin:center;

    will-change:transform;

}

@keyframes floatingLogo{

    0%{

        transform:translateY(0px) rotate(0deg);

    }

    20%{

        transform:translateY(-8px) rotate(-2deg);

    }

    40%{

        transform:translateY(-16px) rotate(0deg);

    }

    60%{

        transform:translateY(-8px) rotate(2deg);

    }

    80%{

        transform:translateY(-4px) rotate(-1deg);

    }

    100%{

        transform:translateY(0px) rotate(0deg);

    }

}

.floating-logo:hover{

    animation-play-state:paused;

    transform:translateY(-10px) scale(1.05);

}