/* ====== Importação de fontes do Google ====== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* ====== Variáveis CSS ====== */
:root {

    --background-color: #9b9b9b;  /* FUNDO PAGiNA */
    --corF: #ffffff; /* FUNDO LISTRA PAGiNA */



    --primary-color: #ffffff;  /* LETRAS DO SOBRE e outras letras P */
    --primary-colorP:#000000;  /*  letras Principais do titulos 2 */
 
    
    
    --letras-nav:#000000;  /* LETRA DA SKIL E DA NAVEGAÇÃO */
    --letra-houver:#ffffff;  /* letra houver */

    --linhas-color:#ffffff;    /* COR DA LINHA DO HR */

    --card-color:#ffffff;    /* cor do card que e a cor de fora */
    --card-Dentro:#000000de;  /* cor do card que e de dentro*/
    --letra-card:#000000;    /* letras de fora do card */
   
    

    /* letra Tec */  
    
    --letraTecP:#000000;                            
    --letraTecB:#fff;
    
    
    --html-color: #fd7a00;
    --css-color: #0097fc;          /*                Colocar mais cores de ligagens, conforme os projetos que ira usar, que esta no github                               */
    --js-color: #d1b91c;




    --node-js:#06a700;

    --Figma-color: #6223c2;

    --bs-color: #6223c2;  
}


/* ====== Reset básico e box-sizing ====== */
* {

    margin: 0;                /* Remove margens padrão */
    padding: 0;               /* Remove padding padrão */
    box-sizing: border-box;   /* Inclui padding e border no tamanho total do elemento */
}


/* ====== Fontes e scroll behavior ====== */
html, body, * {

    scroll-behavior: smooth;         /* Rolagem suave */
    font-family: "Inter", sans-serif; /* Fonte padrão */
    font-size: 16px;                 /* Tamanho base da fonte */
}


/* ====== HTML e Body ====== */
html, body {

    margin: 0;
    padding: 0;
    height: 100%;                     /* Ocupa 100% da altura da tela */
    width: 100%;                      /* Ocupa 100% da largura da tela */
    background: var(--background-color); /* Cor de fundo */
}


/* ====== Seções ====== */
section {

    height: 100vh;     /* Cada section ocupa toda a altura da tela */
    display: flex;     /* Flexbox para layout interno */
}

/* ====== Containers, cards e popovers ====== */
.container, .card-wrapper, .card-list, .card-item, dialog.popover {

    max-width: 100%;   /* Garante que nada ultrapasse a largura da tela */
    box-sizing: border-box;
}

img {

    max-width: 100%;   /* Imagens não ultrapassam o container */
    height: auto;
    display: block;
}

/* ====== Tipografia e títulos ====== */
.display {

    font-family: "Poppins", sans-serif; /* Fonte para títulos */
    font-weight: 700;                    /* Negrito */
    font-style: normal;                  /* Normal (não itálico) */
    font-size: 4rem;                   /* Tamanho grande para títulos */
}

/* ====== Linhas divisórias ====== */
.divider {

    border: 1px solid var(--linhas-color);
}

/* ====== Classe bold ====== */
.bold {

    margin: 2rem 0;
    border: 1rem solid var(--primary-color);
}

/* ====== Badges de tecnologia ====== */
.html-badge {

    background: var(--html-color) !important;
    color: var(--letraTecB) !important;
}

.css-badge {

    background: var(--css-color) !important;
    color: var(--letraTecB) !important;
}

.js-badge {

    background: var(--js-color) !important;
    color: var(--letraTecB) !important;
}

.node-badge{

    background: var(--node-js) !important;
    color: var(--letraTecB) !important;


}

.Figma-badge{

    background: var(--Figma-color) !important;
    color: var(--letraTecB) !important;


}






.bs-badge {

    background: var(--bs-color) !important;
    color: var(--letraTecB) !important;
}

/* ====== Classe para impedir seleção de texto ====== */
.no-select {

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}