/* Reset and base (mobile-first) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #fff; padding: 1rem; max-width: 100%; overflow-x: hidden; }

/* Header/Nav (stacked on mobile) */
header { background: #f8f8f8; padding: 1rem; text-align: center; }
nav ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
nav a { text-decoration: none; color: #007bff; }

/* Main content */
main { padding: 1rem; }
h1, h2 { margin-bottom: 1rem; }
img { max-width: 100%; height: auto; } /* Responsive images */
form { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; margin: 0 auto; }
label { font-weight: bold; }
input, textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 0.75rem; background: #007bff; color: white; border: none; cursor: pointer; }

/* Footer */
footer { text-align: center; padding: 1rem; background: #f8f8f8; margin-top: 2rem; }

/* Media queries for larger screens */
@media (min-width: 768px) {
  body { padding: 2rem; max-width: 1200px; margin: 0 auto; }
  nav ul { flex-direction: row; justify-content: center; }
  main { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } /* Example: two-column layout on desktop */
}