/* Importa a fonte Poppins do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* Aplica estilos globais a todos os elementos */
*{
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove preenchimento padrão */
  box-sizing: border-box; /* Inclui borda e padding no cálculo do tamanho */
  font-family: 'Poppins', sans-serif; /* Define a fonte padrão */
}

/* Estiliza o corpo da página */
body{
  min-height: 100vh; /* Garante altura mínima de 100% da viewport */
  display: flex; /* Usa flexbox para centralizar conteúdo */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  background-color: #000; /* Define fundo preto */
}

/* Estiliza o container da animação */
.animation{
  height: 95px; /* Altura fixa para a animação */
  display: flex; /* Organiza os spans em linha */
  transform: rotate(180deg); /* Inverte a animação verticalmente */
}

/* Estiliza cada barra da animação */
.animation span{
  width: 38px; /* Largura de cada barra */
  margin: 0 2px; /* Espaço lateral entre as barras */
  border-radius: 6px; /* Bordas arredondadas */
  /* background-color: #fff; */ /* Comentado: cor de fundo padrão */
  animation: loader 2s infinite; /* Aplica animação definida abaixo */
}

/* Define os estágios da animação das barras */
@keyframes loader{
  0%, 100%{
    height: 15px; /* Altura inicial/final da barra */
    background: #0081C9; /* Cor inicial/final */
  }
  25%{
    height: 95px; /* Barra cresce ao máximo */
    background: #FFB100; /* Muda cor */
  }
  50%{
    height: 50px; /* Altura intermediária */
    background: #54B435; /* Muda cor */
  }
  75%{
    height: 95px; /* Cresce novamente */
    background: #FF6464; /* Muda cor */
  }
}

/* Define atrasos diferentes para cada barra, criando efeito de onda */
.animation span:nth-child(1){
  animation-delay: .2s; /* 1ª barra: atraso de 0.2s */
}
.animation span:nth-child(2){
  animation-delay: .4s; /* 2ª barra: atraso de 0.4s */
}
.animation span:nth-child(3){
  animation-delay: .6s; /* 3ª barra: atraso de 0.6s */
}
.animation span:nth-child(4){
  animation-delay: .8s; /* 4ª barra: atraso de 0.8s */
}
.animation span:nth-child(5){
  animation-delay: 1s; /* 5ª barra: atraso de 1s */
}