/*type="text/tailwindcss"*/
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .bg-gradient-chem {
        /*background: linear-gradient(135deg, #0A5EAC 0%, #0080FF 100%);*/
        background: linear-gradient(135deg, #0A5EAC 0%, #0080FF 100%);
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-15px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    .nav-item {
        @apply relative px-3 py-2 text-white hover:text-yellow-200 transition-colors duration-300;
    }

    .nav-item::after {
        @apply content-[''] absolute w-0 h-0.5 bg-yellow-300 left-0 bottom-0 transition-all duration-300;
    }

    .nav-item:hover::after {
        @apply w-full;
    }

    .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    }
}