@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');



/*--------- CSS Global ---------*/
@import url(/assets/css/sections/header.css);
@import url(/assets/css/sections/inicio.css);
@import url(/assets/css/sections/habilidades.css);
@import url(/assets/css/sections/projetos.css);
@import url(/assets/css/sections/contato.css);


:root{

  /*paleta de cores*/
  --bg-color: #0D0D0D;
  --fundo: #2928407a;
  --fundo2: #3e3c73;
  --borda: #4E458C;
  --letra: #8449BF;
  --branco: #fff;


  /*paleta MODO Light*/
  --bg-light: #ebebeb;
  --preto: #000;



  /*Degráde*/
  --cor1: #7936B7;
  --cor2: #A22895;
  --cor3: #1bb7ff;

  /* Font Titulo */
  --titulo: "Rajdhani", sans-serif;
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Red Hat Display", sans-serif;
}

html{
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
  background-color: var(--bg-color);
  color: var(--branco);
  transition: .4s;
}

a{
  text-decoration: none;
}

ul{
  list-style: none;
}


/* ====== Responsividade ====== */

@media (max-width: 1024px) {


  /* Header */
  header {
    justify-content: space-between;
  }

  .logo {
    font-size: 2rem;
  }

  .nav-list {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-list a{
      display: flex;
  }


  /* Habilidades */
  .hab-conteiner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    height: auto;
    padding: 1rem;
  }

  .hab-titulo h1{
    font-size: 2rem;
  }


  /* Seção Projetos */
  .proje-conteiner {
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem auto;
  }
  
  .proje-card {
    max-width: 70%;
  }
  
  .link-cont {
    width: auto;
    margin-left: 0;
    margin-top: 1rem;
    justify-content: center;
  }

}
  

@media (max-width: 768px) {

  /* Menu mobile */
  .btn-menu-mob{
    display: block;
  }

  .ativo, nav a:hover{
    border: none;
  }

  /* Menu mobile no Modo Light */
  body.light-mode .menu-mobile{
    background: var(--bg-light);
  }

  /* Header */
  header {
    padding: 1rem;
  }
  
  .logo {
    font-size: 2rem;
  }

  .nav-list{
    display: none;
  }

  /* Seção Inicio */

  .inicio-desc{
    text-align: center;
  }

  .inicio-desc h3{
    font-size: 2rem;
    width: 100%;
    margin-bottom: 2rem;
  }
  
  /* Seção Projetos */

  .proje-conteiner{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem auto;    
  }

  .proje-card{
    max-width: 90%;
    margin: 0 auto;
  }

  .proje-content h3 {
    text-align: center;
    font-size: 22px;
  }
  
  .proje-descricao {
    font-size: 18px;
  }
  
  /* Habilidades */
  .hab-titulo h3 {
    font-size: 2rem;
  }
  
  .hab-skill p {
    font-size: 16px;
  }
  
  /* Contato */
  .cont-header {
    padding: 2rem;
  }
  
  .cont-header h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 1rem;
  }
  
  .cont-info {
    text-align: center;
    font-size: 18px;
  }
  
  .link-cont{
    width: 100%;
  }
}
  
@media (max-width: 480px) {

  /* Início */
  .inicio{
    padding: 1rem;
    width: 100%;
  }
  
  /* Seção Projetos */

    .proje-content h3 {
      font-size: 20px;
    }
  
    .proje-descricao {
      font-size: 16px;
    }
  
    .proje-tags {
      gap: 0.4rem;
    }
  
    .proje-tag {
      font-size: 0.7rem;
      padding: 0.2rem 0.6rem;
    }
  
  .proje-links a {
    padding: 12px;
    font-size: 14px;
  }
  

  
  /* Contato */

  #contato > h1{
    text-align: center;
    font-size: 20px;
  }

  #contato > p{
    font-size: 16px;
  }

  .link-cont{
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
  }

  .link-cont a {
    width: 100%;
    height: 40px;
    padding: 10px 0;
    font-size: 15px;
    flex-direction: row;
    gap: 5px;
  }

  .link-cont a.what:hover, .link-cont a.inst:hover, .link-cont a.email:hover{
    transform: translateX(-10px);
  }

  .link-cont i{
    font-size: 1rem;
  }

}