/* Faz o body ocupar 100% da altura da tela e empurrar o rodapé para o fim */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Área principal cresce conforme necessário */
.main, .results {
  flex: 1; /* ocupa todo o espaço disponível antes do rodapé */
  text-align: center;
  padding: 20px;
}

/* Rodapé fixado no final, sempre visível */
#footer {
  background: #f5f5f5;
  color: #333;
  text-align: center;
  font-size: 14px;
  padding: 15px 10px;
  border-top: 1px solid #ddd;
  width: 100%;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f7fa;
  margin: 0;
  padding: 0;
  color: #333;
  text-align: center;
}
.main { padding: 40px 10px; }
.logo { width: 180px; max-width: 80%; }
input.qs { width: 60%; max-width:500px; padding:12px; border-radius:25px; border:1px solid #ccc; font-size:16px; text-align:center; }
.button { display:inline-block; background:#0066cc; color:#fff; padding:10px 20px; border-radius:25px; text-decoration:none; }
.results { margin: 30px auto; width:90%; max-width:800px; text-align:left; }
.result-item { background:#fff; border-radius:10px; box-shadow:0 1px 5px rgba(0,0,0,0.1); padding:15px; margin-bottom:10px; }
.result-item a { color:#0066cc; font-weight:bold; font-size:18px; text-decoration:none; }
@media (max-width:768px) { input.qs { width:90%; } .button{ padding:8px 14px; } }