input.css

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

@layer base {
    @font-face {
        font-family: "Swanky and Moo Moo";
        src: url(/dist/assets/fonts/swanky/SwankyandMooMoo-Regular.ttf) format("truetype");
    }
    @font-face {
        font-family: "Walter Turncoat";
        src: url(/dist/assets/fonts/turncoat/WalterTurncoat-Regular.ttf) format("truetype");
    }
    @font-face {
        font-family: "Praise";
        src: url(/dist/assets/fonts/praise/Praise-Regular.ttf) format("truetype");
    }
    html {
        font-family: 'Barlow';
        color: #333;
        src: url(/dist/assets/fonts/barlow/barlow.regular.ttf) format("truetype");
    }
    .togglerbutton {
        @apply 
        inline-flex 
        items-center 
        justify-center 
        ml-auto 
        text-white 
        rounded-md 
        outline-none 
        lg:hidden 
        focus:outline-none;
    }
    .thenav {
        @apply 
        bg-gray-100 
        dark:bg-gray-800 
        dark:lg:bg-gray-800 
        dark:lg:border-gray-700
        lg:bg-white
        lg:shadow-md
        lg:border-t 
        lg:rounded-none 
        lg:m-0 m-4
        rounded-md
        transform duration-700 
        ease-in-out;
    }
    .btn {
        @apply 
        rounded-lg 
        shadow-sm 
        transition 
        hover:shadow-none 
        px-4 py-3
        flex items-center 
        lg:text-lg
     }
     .btn-icon {
        @apply flex items-center;
     }
     .btn-maincolor {
        @apply 
        hover:bg-maincolor 
        border-maincolor 
        border-2 border-opacity-50 
        text-maincolor
        hover:text-gray-200
        dark:text-gray-500
        dark:hover:text-gray-200;
     }
}

@layer components {
    .background {
        @apply 
        p-2 md:p-4
        bg-backgroundcolor 
        dark:bg-backgrounddark;
    }  
    .dropdownmenu {
        @apply 
        left-0 lg:pb-3 pb-1 
        lg:absolute 
        lg:shadow-md 
        lg:bg-white 
        dark:bg-gray-800 
        transform duration-700 
        ease-in-out 
        rounded-b-md;
    }
    .dropdownmenu ul {
        @apply 
        space-y-0 
        lg:space-y-2 
        lg:w-48;
    }
    .themebutton {
        @apply flex items-center ml-auto focus:outline-none;
    }
    .themeicon {
        @apply flex items-center w-6 h-6 lg:w-5 lg:h-5 hover:opacity-100 duration-700;
    }
    .navlink { 
        @apply 
        uppercase
        flex px-4 py-2 lg:py-4 
        rounded-md 
        lg:rounded-none 
        text-gray-500 
        lg:text-gray-500
        hover:text-maincolorhover
        hover:lg:text-maincolor
        dark:lg:text-gray-400 
        dark:hover:text-gray-300;
    }
    .navlink-dropdown {
        @apply 
        after:content-['\22EE'] 
        after:text-xs 
        after:mt-1 
        after:ml-2
        after:text-gray-500 
        dark:lg:after:text-maincolor;
    }
    .navlink-active {
        @apply 
        lg:text-maincolor 
        text-maincolor
        hover:text-maincolor
        dark:text-white 
        underline 
        underline-offset-4 
        lg:underline-offset-4 
        lg:decoration-1
        lg:decoration-maincolor;
    }
    ul li ul li .navlink {
        @apply 
        lg:px-2 lg:py-1 mx-3 py-1 
        bg-transparent 
        text-gray-500 
        lg:text-gray-600 
        dark:hover:text-gray-300
        dark:hover:lg:bg-gray-900 
        dark:hover:lg:text-maincolor
        hover:lg:bg-white
        hover:lg:text-maincolor
        hover:text-maincolor 
        rounded-md 
        normal-case 
        before:content-['\21E2'] 
        before:mr-2 
        before:text-lg 
        before:flex items-center
        lg:before:content-none;
    }
    
    .linklistfooter a {
        @apply mr-4
    }

    ion-icon {
        pointer-events: none;
    }
}