* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --text-color: white;
  --fundo-url: url(./assets/background\ black.png);
  --stroke-color: rgba(255, 255, 255, 0.2);
  --surface-color: rgba(255, 255, 255, 0.5);
  --surface-color-hover: rgba(255, 255, 255, 0.4);
  --switch-theme: url(./assets/moon.svg);
  --background-imagem: black;
}
.light {
  --text-color: black;
  --fundo-url: url(./assets/cura\ colorido.jpg);
  --stroke-color: rgba(0, 0, 0, 0.2);
  --surface-color: rgba(0, 0, 0, 0.5);
  --surface-color-hover: rgba(0, 0, 0, 0.2);
  --switch-theme: url(./assets/sunnew.svg);
  --background-imagem: white;
}
body {
  /*background-image: url(assets/bg-mobile.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  
  background, apenas é um atalho para simplificar o código e gerar apenas uma variavel(como um procedimendo) ele é escrito em ordem

  background: color, image, repeat, position, size, etc.(para position e size usasse "/" pois ambos são linkados*/

  background: var(--fundo-url) var(--background-imagem) center center/auto 100%
    repeat fixed; /* Ajuste aqui */
  height: 100vh;
  margin: 0; /* Remove margens padrão */
  min-height: 100vh; /* Garante que o body ocupe a tela toda */
}

body * {
  /*fonte no fontesgoogle.com*/
  /*tipo de fonte, cor e tamanho*/
  font-family: "Inter", sans-serif;
  font-size: 17px;
  color: var(--text-color);
}

#box {
  /*margin pode ser usado separadamente para cima, baixo esquerda e direta no mesmo comando! se aplicado 2 medidas (uma ou mais sempre podendo ser auto) 1-serão considerados cima e baixo 2- direita e esquerda. Caso 3 1-cima, 2- esquerda e direita, 3 baixo. Caso 4 o padrão será cima, direita, baixo, esquerda*/
  width: 100%;
  max-width: 450px;
  margin: 0px auto 0px;
  padding: 10px 24px;
}
/*profile raiz*/
#profile {
  /*profile principal*/
  text-align: center;
  margin: 10px;
}
#profile img {
  /*profile da foto*/
  padding: 20px;
  width: 140px;
}
#profile p {
  /*Caracteristicas da fonte(tamanho e peso)*/
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 16px;
}

/*lista de links e config*/
/*Switch Principal*/
#switch {
  position: relative;
  width: 60px;
  margin: 4px auto;
  padding: 4px;
}

/*Switchs de id's*/
#switch span {
  /*onde o botão sun, moon vai correr*/
  /*padrão span tem display inline, enquanto a maioria é block*/
  display: block;
  width: 56px;
  height: 16px;
  background: var(--surface-color);
  border: 1px solid var(--stroke-color);
  border-radius: 99999px;
  backdrop-filter: blur 10px;
  -webkit-backdrop-filter: blur 10px;
}

#switch button {
  /*Botão sun e moon*/
  width: 26px;
  height: 26px;
  background: white var(--switch-theme) no-repeat center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);

  animation: moon 0.3s;
}
.light #switch button {
  animation: sun 0.3s forwards;
  /*forwards é para a animação não voltar ao reset, como a de cima ja retorna a 0 não é necessario*/
}
#switch button:hover {
  outline:8px solid var(--surface-color-hover);

}
ul {
  list-style: none; /*tirar as  bolinhas de topicos*/
  display: flex;
  flex-direction: column; /*Definir a direção das caixas*/
  gap: 15px; /*Distancia entre as caixa(aqui especificamente dos links)*/
  padding: 15px; /*espaço entre os box de links*/
}
ul li a {
  display: flex;
  justify-content: center; /*centrelização dos links esquerda direita*/
  align-items: center; /*centralização dos links (cima baixo)*/
  /*Cor da box referente os links escritos*/
  background: var(--stroke-color);
  /*Cor borda box links (estético)*/
  border: 1px solid var(--text-color);
  /*arredondamento de bordas*/
  border-radius: 8px;
  padding: 8px 24px;
  margin: 0px auto;
  /*Largura caixa*/
  width: 240px;
  /*Retirar a linha de baixo dos links*/
  text-decoration: none;
  /*blur para todos os tipos de browser (webkit para permitir o blur em safaris mais atualizados)*/
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 500;

  transition: background 0.3s;
  ion-icon {
    display: flex;
    padding-right: 6px;
    font-size: 23px;
  }
}

ul li a:hover {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--text-color);
}
#social_links {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 15px 0;
}
#social_links a {
  display: flex;
  align-content: center;
  justify-items: center;
  border-radius: 50%;
  padding: 18px;
  transform-origin: background 0.5;
}
#social_links a:hover {
  background: var(--surface-color-hover);
}
footer {
  text-align: center;
  padding: 20px;
  font-size: 12px;
}
footer a {
  font-size: 12px;
}

/*animation: como chamar o @keyframes no botão, usar a variavel aplicada*/
@keyframes sun {
  to {
    left: 58%;
  }
  from {
    left: 0;
  }
}
@keyframes moon {
  to {
    left: 0;
  }
  from {
    left: 58%;
  }
}