@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Nunito:wght@300;400;600;700;800&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .btn-toy {
        @apply bg-[#FF6B6B] hover:bg-[#EE5253] text-white font-bold py-3 px-8 rounded-full shadow-[0_4px_0_0_#C82333] hover:shadow-[0_2px_0_0_#C82333] hover:translate-y-0.5 transition-all duration-200 tracking-wide;
    }
    .btn-toy-outline {
        @apply border-4 border-[#FF6B6B] text-[#FF6B6B] hover:bg-[#FF6B6B] hover:text-white font-bold py-2.5 px-8 rounded-full transition-all duration-300 tracking-wide;
    }
}

.cloud-animation {
    animation: moveClouds 20s linear infinite;
}

@keyframes moveClouds {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100vw); }
}