/* Basic Tailwind CSS setup and font import handled in HTML */ /* Custom styles for general elements */ body { font-family: 'Inter', sans-serif; line-height: 1.6; } /* Ensure images are responsive */ img { max-width: 100%; height: auto; } /* Custom styles for buttons to make them more eye-catching */ .btn-primary { @apply bg-indigo-600 text-white font-semibold py-2 px-6 rounded-full hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transition duration-300 shadow-md; } .btn-secondary { @apply bg-gray-200 text-gray-800 font-semibold py-2 px-6 rounded-full hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 transition duration-300; } /* Styles for tool cards on the main page */ .tool-card { @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-center text-center; } .tool-card img { @apply w-20 h-20 mb-4 rounded-full p-2; } /* Input/Textarea styles */ textarea, input[type="text"] { @apply w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition duration-200; } /* AdSense Placeholder Styling */ .adsense-placeholder { @apply bg-gray-100 border border-gray-300 rounded-lg p-4 text-center text-gray-600 italic text-sm; min-height: 100px; /* Ensure it's visible */ display: flex; align-items: center; justify-content: center; } /* Responsive adjustments for headings */ h1 { font-size: 2.5rem; /* Default for mobile */ } @media (min-width: 640px) { /* sm breakpoint */ h1 { font-size: 3rem; } } @media (min-width: 768px) { /* md breakpoint */ h1 { font-size: 3.5rem; } } h2 { font-size: 2rem; /* Default for mobile */ } @media (min-width: 640px) { /* sm breakpoint */ h2 { font-size: 2.25rem; } } /* General spacing and alignment */ .container { max-width: 1200px; /* Max width for content */ }