/* Reset básico */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Arial', sans-serif;
}

/* Seção principal (background da página) */
.background {
  background-image: url('/img/CINCO-PARA-MEIA-NOITE.jpg'); /* Substitua pelo nome exato da sua imagem principal */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh; /* Ocupa toda a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo do conteúdo no centro da página */
.content h1 {
  color: white;
  font-size: 4vw; /* Responsivo */
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
  text-align: center;
}

/* Rodapé (footer) */
footer {
  background-color: #000; /* Cor de fundo preta */
  padding: 10px;
  text-align: center;
}

footer img {
  max-width: 100%; /* Responsivo: ocupa até 100% da largura disponível */
  height: auto; /* Mantém as proporções da imagem */
  display: inline-block; /* Garante que a imagem apareça */
  margin: 0 auto; /* Centraliza a imagem horizontalmente */
}

/* Media Queries para responsividade */
@media (max-width: 768px) {
  .content h1 {
    font-size: 6vw; /* Reduz o texto em telas menores */
  }
}

@media (max-width: 480px) {
  .content h1 {
    font-size: 8vw; /* Ajusta para smartphones */
  }
}