/* Redefine margem e padding padrão para todos os elementos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define variáveis principais para temas escuro e claro */
:root {
  --text-color: white; /* Cor padrão do texto para o tema escuro */
  --bg-url: url(./assets/black-2.jpg); /* Imagem de fundo para o tema escuro */
  --stroke-color: rgba(
    255,
    255,
    255,
    0.5
  ); /* Cor da borda para o tema escuro */
  --surface-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* Cor da superfície para o tema escuro */
  --surface-color-hover: rgba(0, 0, 0, 0.02); /* Efeito hover para superfície */
  --highlight-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Cor de destaque para o tema escuro */
  --switch-bg-url: url(./assets/moon-stars.svg); /* Fundo do switch para o tema escuro */
}

/* Variáveis do tema claro */
.light {
  --text-color: black; /* Cor do texto para o tema claro */
  --bg-url: url(./assets/bg-mobile-light.jpg); /* Imagem de fundo para o tema claro */
  --stroke-color: rgba(0, 0, 0, 0.5); /* Cor da borda para o tema claro */
  --surface-color: rgba(
    0,
    0,
    0,
    0.05
  ); /* Cor da superfície para o tema claro */
  --surface-color-hover: rgba(0, 0, 0, 0.02); /* Efeito hover para superfície */
  --highlight-color: rgba(0, 0, 0, 0.1); /* Cor de destaque para o tema claro */
  --switch-bg-url: url(./assets/sun.svg); /* Fundo do switch para o tema claro */
}

/* Estilos do corpo: define fundo e cor do texto */
body {
  background: var(--bg-url) no-repeat top center/cover; /* Configuração do fundo */
  height: 100vh;
}

/* Fonte global e cor do texto */
body * {
  font-family: "Oswald", "Inter", sans-serif; /* Estilo da fonte para todo o corpo */
  color: var(--text-color); /* Cor do texto */
}

/* Contêiner para o conteúdo principal */
#container {
  width: 100%; /* Largura fixa para o contêiner */
  max-width: 588px;
  margin: 56px auto 0px; /* Centralizado com margem superior */
  padding: 0 24px; /* Padding horizontal */
}

/* Estilos da seção de perfil */
#profile {
  text-align: center; /* Centraliza o texto dentro do perfil */
  padding: 24px; /* Padding para o perfil */
}

#profile img {
  width: 112px; /* Define a largura da imagem de perfil */
}

#profile p {
  font-weight: 500; /* Texto semi-negrito para a descrição do perfil */
  line-height: 24px; /* Altura da linha para melhor legibilidade */
  margin-top: 8px; /* Espaço acima do parágrafo */
}

/* Estilos para o switch de tema */
#switch {
  position: relative; /* Posição relativa para o posicionamento absoluto do botão */
  width: 64px; /* Largura do switch */
  margin: 4px auto; /* Centraliza o switch */
}

#switch button {
  width: 32px; /* Largura do botão */
  height: 32px; /* Altura do botão */
  background: white var(--switch-bg-url) no-repeat center; /* Fundo do botão com ícone */
  border: 0; /* Sem borda */
  border-radius: 50%; /* Botão circular */
  position: absolute; /* Posição absoluta dentro do switch */
  top: 50%; /* Centraliza verticalmente */
  left: 0; /* Começa pela esquerda */
  z-index: 1; /* Acima do fundo */
  transform: translateY(-50%); /* Ajusta para centralização */
  animation: slide-back 0.2s;
}

/* Ajusta a posição do botão para o tema claro */
.light #switch button {
  animation: slide-in 0.2s forwards;
}

#switch button:hover {
  outline: 8px solid var(--highlight-color);
}

#switch span {
  display: block; /* Elemento de bloco para o fundo do switch */
  width: 64px; /* Largura do switch */
  height: 24px; /* Altura do switch */
  background: var(--surface-color); /* Cor de fundo */
  border: 1px solid var(--stroke-color); /* Bordo para o switch */
  backdrop-filter: blur(4px); /* Efeito de desfoque */
  border-radius: 9999px; /* Bordas totalmente arredondadas */
}

/* Estilos para a lista de links */
ul {
  list-style: none; /* Remove o estilo padrão da lista */
  display: flex; /* Layout em flexbox para os links */
  flex-direction: column; /* Layout em coluna */
  gap: 16px; /* Espaçamento entre os itens */
  padding: 24px 0; /* Padding vertical */
}

ul li a {
  display: flex; /* Flexbox para itens de link */
  align-items: center; /* Centraliza o conteúdo verticalmente */
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  padding: 16px 24px; /* Padding para o link */
  background: var(--surface-color); /* Cor de fundo para o link */
  border: 1px solid var(--stroke-color); /* Borda para o link */
  border-radius: 8px; /* Bordas arredondadas para os links */
  backdrop-filter: blur(4px); /* Efeito de desfoque */
  text-decoration: none; /* Remove o sublinhado dos links */
  font-weight: 500; /* Fonte semi-negrito */
  transition: background 0.2s; /* Transição suave de fundo */
}

/* Efeito hover para os links */
ul li a:hover {
  background: var(--surface-color-hover); /* Muda o fundo ao passar o mouse */
  border: 1.5px solid var(--text-color); /* Muda a cor da borda ao passar o mouse */
}

/* Estilos para os links sociais */
#social-links {
  display: flex; /* Layout em flexbox para os links sociais */
  justify-content: center; /* Centraliza os links sociais */
  padding: 24px 0; /* Padding vertical */
  font-size: 24px; /* Tamanho da fonte para os links sociais */
}

#social-links a {
  display: flex; /* Flexbox para links sociais individuais */
  align-items: center; /* Centraliza o conteúdo */
  justify-content: center; /* Centraliza o conteúdo */
  padding: 16px; /* Padding para o link social */
  transition: background 0.2s; /* Transição suave de fundo */
  border-radius: 50%; /* Links circulares */
}

/* Efeito hover para os links sociais */
#social-links a:hover {
  background: var(--highlight-color); /* Muda o fundo ao passar o mouse */
}

/* Estilos para o rodapé */
footer {
  padding: 24px 0; /* Padding vertical */
  text-align: center; /* Centraliza o texto do rodapé */
  font-size: 14px; /* Tamanho da fonte para o rodapé */
}
/* media queries */
@media (min-width: 700px) {
  :root {
    --bg-url: url(./assets/black.jpg);
  }
  .light {
    --bg-url: url(./assets/bg-desktop-light.jpg);
  }
}

/* animation */
@keyframes slide-in {
  from {
    left: 0;
  }
  to {
    left: 50%;
  }
}
@keyframes slide-back {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}