@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center; /* Mantém alinhado no centro horizontalmente */
  align-items: flex-start; /* Alinha os elementos no topo */
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
  background-image: url('../images/manutencao.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
  padding-top: 20px; /* Garante um pequeno espaço do topo */
}

#titulo {
  text-align: center;
  width: 100%; /* Garante que o título ocupe a largura total */
}

h1 {
  font-size: 8rem;
  color: #3ec64e;
  font-weight: 700;
}

h1 span {
  animation: luzes 3s linear infinite;
}

h1 span:nth-child(1) {
  animation-delay: 0s;
}

h1 span:nth-child(2) {
  animation-delay: 0.2s;
}

h1 span:nth-child(3) {
  animation-delay: 0.3s;
}

h1 span:nth-child(4) {
  animation-delay: 0.4s;
}

h1 span:nth-child(5) {
  animation-delay: 0.5s;
}

h1 span:nth-child(6) {
  animation-delay: 0.6s;
}

h1 span:nth-child(7) {
  animation-delay: 0.7s;
}

h1 span:nth-child(8) {
  animation-delay: 0.8s;
}

h1 span:nth-child(9) {
  animation-delay: 0.9s;
}


@keyframes luzes {
  0%,
  80% {
    color: #222;
    text-shadow: none;
  }

  100% {
    color: #2c952f;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
      0 0 120px #fff, 0 0 140px #fff;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 4rem; /* Reduz o tamanho do título */
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.5rem; /* Reduz ainda mais para celulares pequenos */
  }
}
 
@media (max-width: 480px) {
  body {
    padding-top: 250px; /* Reduz espaço no topo */
  }

  #titulo {
    padding: 0 10px; /* Adiciona um pequeno espaço nas laterais */
  }
}