* {
  margin: 0; /* Remove todas as margens padrão */
  padding: 0; /* Remove todos os espaçamentos internos padrão */
  box-sizing: border-box; /* Faz com que width/height incluam borda e padding */
}

.header {
  margin: 0;
  text-align: center; /* Centraliza o conteúdo */
}

.header_h1 {
  margin: 0; /* Remove margem padrão do h1 */
  font-size: 24px; /* Define tamanho da fonte */
}
.header_p {
  margin: 5px 0 0; /* Espaçamento acima do parágrafo */
  font-size: 16px; /* Define tamanho da fonte */
}

/* 
  Variáveis globais (cores, imagens, etc.)
  :root = válidas para toda a página
*/
:root {
  --text-color: white;
  --bg-url: url(./Assets/bg-mobile.jpg);
  --stroke-color: rgba(255, 255, 255, 0.5);
  --surface-color: rgba(255, 255, 255, 0.05);
  --surface-color-hover: rgba(255, 255, 255, 0.05);
  --highlight-color: rgba(255, 255, 255, 0.02);
  --switch-bg-url: url(./Assets/moon-stars.svg); /* Ícone do botão (lua/estrelas) */
}

/* 
  Quando o body recebe a classe .light,
  as variáveis mudam para o tema claro
*/
.light {
  --text-color: black;
  --bg-url: url(./Assets/bg-mobile-light.jpg);
  --stroke-color: rgba(0, 0, 0, 0.5);
  --surface-color: rgba(0, 0, 0, 0.05);
  --surface-color-hover: rgba(0, 0, 0, 0.02);
  --highlight-color: rgba(0, 0, 0, 0.1);
  --switch-bg-url: url(./Assets/sun.svg); /* Ícone do botão (sol) */
}

body {
  
  background: var(--bg-url) no-repeat top center/cover; /* Fundo da página */
  min-height: 100vh; /* Defino a altura minima pra tela */
  /*Sem altura maxima assim sempre acompanha o scroll, tem um acompanhar de outra forma*/
  grid-template-rows: 1fr auto;
  
}
body * {
  font-family: "Inter", sans-serif; /* Fonte geral */
  color: var(--text-color); /* Cor do texto conforme o tema */
  
  
}
.sub_ul{
margin-left: 20px;
list-style-type: circle;
}

#Container {
  width: 100%; /* Ocupar largura total */
  max-width: 588px; /* Limite de largura */
  margin: 56px auto 0px; /* Centraliza o container */
  padding: 0 24px; /* Espaçamento interno lateral */
}

#Profile {
  text-align: center; /* Centraliza o conteúdo */
  padding: 24px; /* Espaçamento interno */
}
#Profile img {
  width: 112px; /* Define tamanho fixo da imagem */
  margin: auto; /* Centraliza no meio da pagina */
  display: block; /* Faz a imagem ocupar linha inteira */
}
#Profile p {
  font-weight: 500; /* Peso da fonte médio */
  line-height: 24px; /* Altura da linha */
}

/* Switch (botão para trocar tema) */
#switch {
  position: relative; /* Define posição para o botão interno */
  width: 64px; /* Largura da barra */
  margin: 4px auto; /* Centraliza na tela */
}

#switch button {
  width: 32px; /* Tamanho do botão circular */
  height: 32px;
  border: 0; /* Remove borda */
  border-radius: 50%; /* Deixa redondo */
  background: white var(--switch-bg-url) no-repeat center; /* Fundo + ícone */
  top: 50%; /* Posiciona no meio vertical */
  left: 0; /* Começa à esquerda */
  position: absolute; /* Fica sobreposto dentro do #switch */
  z-index: 1; /* Garante que fique acima */
  transform: translateY(-50%); /* Ajusta o alinhamento no meio */
}

.light #switch button {
  right: 0; /* Vai para a direita no tema claro */
  left: initial; /* Remove valor anterior */
}

#switch span {
  display: block; /* Vira um bloco */
  width: 64px; /* Igual à largura do switch */
  height: 24px; /* Altura da barra */
  border: 1px solid var(--stroke-color); /* Borda conforme o tema */
  border-radius: 9999px; /* Deixa bem arredondado */
  backdrop-filter: blur(4px); /* Aplica desfoque */
  background: var(--surface-color); /* Cor de fundo */
  position: relative; /* Para o botão circular se posicionar dentro */
}


ul.desc{
  list-style-type: disc; /*definindo o padrao para as <ul> que usar a classe desc*/
  padding: 20px; /*Recuo*/

}

/* Barra de links */
._ul {
  list-style: none; /* Remove as bolinhas do ul */
  gap: 16px; /* Espaçamento entre itens */
  display: flex;
  flex-direction: column; /* Coloca em coluna */
  padding: 24px 0; /* Espaçamento vertical */
}

.ul_li_a {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 16px 24px; /* Espaçamento interno */
  background: var(--surface-color); /* Fundo do botão */
  border: 1px solid var(--stroke-color); /* Borda do botão */
  border-radius: 8px; /* Cantos arredondados */
  backdrop-filter: blur(4px); /* Efeito de desfoque */
  -webkit-backdrop-filter: blur(4px); /* Suporte Safari */
  text-decoration: none; /* Remove sublinhado */
  font-weight: 400; /* Peso da fonte */
  transition: background 0.5s; /* Suaviza mudança de fundo */
}

.ul_li_a:hover {
  background: var(--surface-color-hover); /* Muda fundo no hover */
  backdrop-filter: blur(4px);
  border: 1.5px solid #fff; /* Borda mais grossa e clara */
}

#social-links {
  display: flex;
  justify-content: center; /* Centraliza os ícones */
  padding: 24px 0; /* Espaçamento vertical */
  font-size: 24px; /* Tamanho dos ícones */
}

#social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px; /* Espaçamento ao redor do ícone */
  transition: background 0.2s; /* Animação de fundo */
  border-radius: 50%; /* Ícones ficam dentro de círculos */
}

#social-links a:hover {
  background: var(--highlight-color); /* Fundo muda ao passar o mouse */
}

footer {
  text-align: center; /* Centraliza o texto */
  padding: 24px 0; /* Espaçamento vertical */
  font-size: 14px; /* Fonte menor */
}

/* Responsividade: muda o fundo no desktop */
@media (min-width: 700px) {
  :root {
    --bg-url: url(./assets/bg-desktop.jpg);
  }
  .light {
    --bg-url: url(./assets/bg-desktop-light.jpg);
  }
}