input.css

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

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {

    [x-cloak] {
        display: none !important;
    }

    html {
        @apply font-sans text-blue
    }

    .nav-link {
        @apply font-medium text-lg text-gray hover:text-sky transition-colors ease-in-out duration-150 focus:outline-none
    }

    .nav-icon {
        @apply text-2xl leading-none text-white hover:text-green transition-colors ease-in-out duration-150
    }

    .nav-icon-mb {
        @apply text-4xl leading-none text-white hover:text-sky transition-colors ease-in-out duration-150
    }

    .footer-icon {
        @apply text-3xl leading-none text-white hover:text-sky transition-colors ease-in-out duration-150
    }

    .h1 {
        @apply lg:text-[52px] sm:text-4xl text-[32px] font-bold lg:leading-snug sm:leading-snug leading-snug
    }

    .h2 {
        @apply sm:text-[44px] text-[28px] font-bold leading-10
    }

    .h3 {
        @apply text-[32px] font-bold leading-10
    }

    .h4 {
        @apply text-2xl font-bold leading-10
    }

    .h4-card {
        @apply xl:text-2xl sm:text-xl text-2xl font-bold leading-10
    }

    .badge-purple {
        @apply px-2.5 py-1 shrink-0 bg-purple-100 border border-purple text-center text-purple rounded-full font-semibold hover:bg-purple-700 hover:text-white hover:shadow-3 active:shadow-none active:bg-purple transition ease-in-out duration-150
    }

    .link-simple {
        @apply hover:underline focus:outline-none
    }

    .link-rose {
        @apply text-rose font-medium focus:outline-none transition-all ease-in-out duration-100 active:font-medium hover:underline
    }

    .link-purple {
        @apply text-purple font-medium focus:outline-none transition-all ease-in-out duration-100 active:font-medium hover:underline
    }

    .link-sky {
        @apply text-sky font-medium focus:outline-none transition-all ease-in-out duration-100 active:font-medium hover:underline
    }

    .link-green {
        @apply text-green font-medium focus:outline-none transition-all ease-in-out duration-150 active:font-medium hover:underline
    }

    .footer-link {
        @apply font-medium text-white text-sm group-hover:text-sky transition-colors ease-in-out duration-150
    }

    .footer-link-icon {
        @apply shrink-0 text-white text-xl group-hover:text-sky transition-colors ease-in-out duration-150
    }
}