@import "tailwindcss";

@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@layer {
    /*=============== Generals ============*/
    .barra {
        @apply h-1.5 bg-orange-600 w-15 m-auto sm:m-auto;
    }
    
    .titulo-secao {
        @apply text-3xl font-semibold mb-2.5 text-center capitalize;
    }

    /*================ HEADER ===========================*/
    .header-container {
        @apply sm:flex bg-slate-900 sm:bg-transparent text-white grid items-start grid-cols-2 grid-rows-1 sm:flex-wrap sm:justify-between gap-2.5 sm:gap-5  p-6 sm:items-center;
    }

    .logo-container {
        @apply col-span-[200px];
    }

    .logo-container a.logo-link {
        @apply text-orange-600 font-bold text-xl sm:text-3xl font-title text-shadow-2xs text-shadow-black md:block;
    }

    /* ============ Menu de navegação =============*/
    .menu-nav {
        @apply order-last sm:order-0 sm:inline-flex col-span-full;
    }  
    
    /* Lista de links */
    .lista {
        @apply flex gap-4 flex-col sm:flex-row sm:justify-center; 
    }

    /* =============== Mobile Menu =========================== */
    #menu-h-container {
        @apply col-span-1 sm:hidden flex justify-end items-center;
    }
    /* =============== MODBILE DETALHE FIM ==================*/
    /* DISCLAIMER MINI AUTO INTRODUÇÃO */
    .disclaimer-container {
        @apply h-3/5 flex items-center justify-center flex-col sm:pt-0 pt-20;
    }

    .disclaimer-container .self-image {
        @apply w-60 rounded-full;
    }

    .disclaimer-mini {
        @apply p-4 text-center;
    }

    .disclaimer-mini h2 {
        @apply text-orange-600 font-bold sm:text-3xl text-3xl text-shadow-black text-shadow-2xs;
    }

    .disclaimer-mini p {
        @apply text-xl text-shadow-black text-shadow-2xs;
    }

    .whatsappp-cta-container {
        @apply hidden sm:inline-flex;
    }

    .whatsappp-cta-container a.whatsapp-cta {
        @apply animate-pulse font-bold transition bg-green-700 rounded-xl w-40 py-2 text-center inline-block transform active:scale-75 duration-500 md:block;
    }

    /* ============= FIM DO HERO ====================*/


    /* =========== SOBRE MIM SECTION ==========================*/

    .sobre-mim-container {
        @apply mb-15 p-5 bg-slate-800;
    }

    .sobre-mim-sub {
        @apply flex md:w-250 w-full m-auto sm:flex-row flex-col sm:justify-center  gap-2.5 items-center sm:gap-2.5;
    }

    .sobre-image-card {
        @apply basis-md hidden sm:inline-flex;
    }
    
    .sobre-image-card img {
        @apply w-60 sm:hover:cursor-pointer rounded-lg sm:hover:brightness-80 transition duration-700;
    }

    /* === Sobre MIM DETALHES == */
    .sobre-details {
        @apply basis-full sm:grow;
    }

    .sobre-details > h2 {
        @apply text-4xl font-bold mb-2.5;
    }

    .sobre-details > .sobre-barra {
        @apply h-1.5 bg-orange-600 w-15;
    }

    .sobre-details > p {
        @apply my-2.5 text-zinc-400 leading-7.5;
    }

    /* === MINHAS CODERNADAS ====*/ 
    .coodernadas-container {
        @apply border border-orange-600 sm:h-44 sm:p-0 p-2.5 sm:text-[16px] flex sm:justify-around flex-col sm:flex-row  sm:items-center text-[14px];
    }
    .info-container {
        @apply leading-7.5;
    }

    /** == CV DOWNLOAD === */
    .cv-downlod {
        @apply w-40 py-2 md:hover:scale-105 bg-orange-600  text-center inline-block mt-2 transform active:scale-75 md:active:scale-none transition duration-500;
    }

    /* =========== SKILLS SECTION =======================*/
    .conteiner {
        @apply sm:w-250 m-auto;
    }

    .skills-container {
        @apply sm:mt-7.5 flex flex-col-reverse sm:flex-row sm:w-7/8 lg:items-start  sm:flex-wrap   gap-7.5 sm:m-auto sm:gap-x-10 sm:items-stretch items-center py-7.5;
    }

    /* ====== CARD SKILLS ===== */
    .card-skill {
        @apply bg-slate-800 flex flex-col justify-between sm:basis-3/10 w-4/5 sm:h-62.5  p-5 h-62.5 text-center transition sm:duration-600 sm:hover:scale-110 sm:ease-in-out active:scale-75 md:active:scale-none;

        .title-skill {
            @apply  font-semibold my-1.5 text-2xl;
        }

        .icone {
            @apply text-5xl text-orange-600;

                 i {
                    @apply sm:transition sm:hover:text-white sm:duration-600 sm:ease-in-out;
                }
        }
    }

    .porcentagem {
        @apply h-1 bg-orange-600 mt-1.5;
    }

    .rate-skill {
        @apply block w-full text-right;
    }

    /**======= FIM CARD SKILL ========== **/

 /* =========== QUALIFICAÇÕES =============================*/ 
    .qualificacoes-container {
        @apply mb-20  pb-10;
    }

    .qualificacoes-container > p {
        @apply text-center sm:hidden;
    }

    .qualificacoes-container .barra {
        @apply md:mb-6;
    }

    #qualificacoes {
        @apply  md:block mt-5;
    }

    /**================ Experiencia Profissional && Formação Académica ================== */
    #experiencia-cards h2, #formacao-cards h2 {
        @apply text-3xl font-bold md:text-center text-center md:pb-10 pt-7.5 pb-7.5;
    }

    #formacao-cards h2 {
        @apply text-yellow-500 ;
    }

    #experiencia-cards h2 {
        @apply text-blue-500 ;
    }

    div.experiencias {
        @apply md:mb-20;
    }
    div.experiencias, div.formacoes {
        @apply  flex flex-col md:items-start md:flex-row items-center/* flex-col md:flex-row flex justify-center md:justify-start md:items-start */;
    }

    div.experiencia, div.formacao {
        @apply rounded-[14px] border-2 flex flex-col gap-2 justify-center sm:justify-between items-center  md:basis-[321px] border-blue-900 h-60 md:w-[360px] w-8/10 sm:p-2 sm:pb-4 transition duration-600 md:cursor-pointer;
    }

    .formacao {
        @apply md:hover:bg-yellow-900 md:hover:border-yellow-900;
    }

    .experiencia {
        @apply md:hover:bg-blue-900;
    }

    .experiencia h3, .experiencia i, 
    .formacao h3, .formacao i {
        @apply font-semibold text-2xl;
    }

    .experiencia i, .formacao i {
        @apply font-bold text-3xl md:text-white;
    }

    .formacao i {
        @apply text-yellow-600;
    }

    .experiencia i {
        @apply text-blue-500;
    }

    .experiencia p, .formacao p {
        @apply sm:p-2 text-center;
    }

    /** =========== Meus projectos ==============*/
    .card-projecto {
        @apply sm:basis-[320px] w-7/8 border border-orange-600;
    }

    .title-project {
        @apply text-2xl text-orange-600 font-semibold mb-2.5;
    }

    .link-project {
        @apply  hover:underline;
    }

    .link {
        @apply text-orange-600 lg:hover:underline font-bold;
    }
    
    .sumario {
        @apply: sm:hover:cursor-pointer;
    }
}

@theme {
    --font-title: 'Boldonse', sans-serif;
}