@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Rajdhani:wght@400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .btn-auto {
        @apply bg-[#F2C12E] hover:bg-[#D9A41A] text-[#1A1A1A] font-bold py-3 px-8 rounded-md transition-all duration-300 shadow-[0_4px_0_0_#A67C00] hover:shadow-[0_2px_0_0_#A67C00] hover:translate-y-0.5 tracking-wider uppercase text-sm;
    }
    .btn-auto-outline {
        @apply border-2 border-[#F2C12E] text-[#F2C12E] hover:bg-[#F2C12E] hover:text-[#1A1A1A] font-bold py-2.5 px-8 rounded-md transition-all duration-300 tracking-wider uppercase text-sm;
    }
    .bg-carbon {
        background-color: #1a1a1a;
        background-image: radial-gradient(#333333 1px, transparent 1px);
        background-size: 10px 10px;
    }
}