@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dropdown:hover .dropdown-menu {
    display: block;
    right: 0;
}

#recipe-img {
    height: calc(66.6vh - 20px);
}

@keyframes float {
    0%, 100%

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

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

}

@keyframes float-delay {
    0%, 100% {
        transform: translateY(-10px) rotate(5deg);
    }

    50% {
        transform: translateY(-30px) rotate(-5deg);
    }
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0px);
    }

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

@keyframes bounce-slow-delay {
    0%, 100% {
        transform: translateY(-5px);
    }

    50% {
        transform: translateY(-15px);
    }
}

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

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

.animate-bounce-slow {
    animation: bounce-slow 4s ease-in-out infinite;
}

.animate-bounce-slow-delay {
    animation: bounce-slow-delay 4s ease-in-out infinite 1s;
}