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

@layer base {
    /* fuentes */
    @font-face{
        font-family: "TrebuchetMS";
        src: url('fonts/TrebuchetMS.ttf');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face{
        font-family: "BebasNeue";
        src: url('fonts/BebasNeue.otf');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face{
        font-family: "WebSymbolsRegular";
        src: url('fonts/websymbols-regular-webfont.eot');
        src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/websymbols-regular-webfont.woff') format('woff'),
             url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
             url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .symbol{
        font-family: "WebSymbolsRegular";
    }

    .bebas{
        font-family: "BebasNeue";
    }

    .trebuchet{
        font-family: "TrebuchetMS";
    }
}

@layer components {
    
    .menu-item {
        @apply  
            mr-5 
            ml-5  
            tracking-wider 
            flex-none
            xs:flex-1
        ;
    }

    .menu-item-a {
        @apply  
            block 
            transition 
            duration-200 
            hover:text-azul-claro  
            transform hover:scale-125
        ;
    }

    .text-banner {
        font-family: "BebasNeue";
        text-shadow: 2px 2px 1px black;
    }

    .card {
        @apply
            group  
            flex-1
            h-80
            border-2
            border-gray-200
            shadow-md
            bg-white
            overflow-hidden
            m-5
            pl-5
            pr-5
            mt-10
            cursor-pointer
            transition
            duration-300
            hover:bg-black

            xs:h-40
            xs:m-2
            md:h-40
            md-m-2
            lg:h-80 
            lg:m-5
        ;
    }

    .card-icon {
        font-family: "WebSymbolsRegular";
        @apply  
            block
            w-full
            h-32
            text-5xl
            text-center
            mt-12
            pt-5
            mx-auto
            transition
            duration-300

            xs:mt-3
            xs:h-20
            md:mt-3
            md:h-20
            lg:mt-12
            lg:h-32
        ;
    }
   
    .card-category {
        font-family: "TrebuchetMS";
        @apply  
           w-full
           h-12
           text-xl
           font-bold
           text-center
           text-azul-oscuro
           transition
           duration-300

           xs:text-base
           xs:h-6
           md:text-base
           md:h-6
           lg:text-lg
           lg:h-12
        ;
    }

    .card-description {
        font-family: "TrebuchetMS";
        @apply 
           text-center
           text-azul-oscuro
           text-base
            transition
            duration-300

            xs:hidden
            md:hidden
            lg:block
            lg:text-sm
            lg:mt-1.5
            xl:text-base
            xl:mt-1
        ;
    } 


}