body { font-family: Arial; padding: 0px; } table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; border: 1px solid #ccc; } .login-form { width: 300px; margin: auto; padding: 20px; border: 1px solid #ddd; }
input, button, select { width: 100%; margin-bottom: 10px; padding: 8px; }
.header { background: #eee; padding: 10px; text-align: center; }

/* keep headings readable on very small screens */
@media (max-width: 575.98px){
  .hero h1{ font-size:1.25rem; line-height:1.25; }
  .hero h2{ font-size:1.05rem; line-height:1.3; }
}