/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #f6f7fb;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height:1.5;
  margin:0;
}
img {
  max-width: 100%;
  height: auto;
}
li img {
  display: block;      /* ensures it starts on a new line */
  margin-bottom: .5em;     /* space above the image */
}

/* Site-wide container used by project pages */
.container { width:90%; max-width:1100px; margin:24px auto; }

/* Simple header styles */
header, .project-header { text-align:center; padding:18px 0; }

/* Re-usable gallery grid */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.image-card { background:#fff; padding:8px; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.image-card img{ display:block; border-radius:4px; }
.caption{ font-size:0.92rem; color:#444; margin-top:6px; text-align:center; }

/* Basic link/button styling */
a{ color:#0b66ff; }

/* Responsive video embeds */
.video-embed{ width:100%; height:480px; border:0; border-radius:6px; }
@media (max-width:520px){ .video-embed{ height:260px; } }

/* Form styles (if you add a submission form later) */
.form-row{ display:flex; gap:12px; }
@media (max-width:720px){ .form-row{ flex-direction:column; } }
label{ display:block; font-weight:600; margin-bottom:6px; }
input[type="text"], textarea, select{ width:100%; padding:8px 10px; border:1px solid #d5dbe8; border-radius:6px; }

/* Small utility */
.muted{ color:#666; font-size:0.95rem; }

/* Additional rules consolidated from project pages (P2, P3, P4) */
h1, h2 { color: #333; }
.section { width: 80%; margin: 20px 0; }

/* image-container used by older project pages (P2) */
.image-container { text-align: center; width: 300px; }
.image-container img { width: 100%; height: auto; border: 2px solid #ddd; border-radius: 8px; }
.description { margin-top: 10px; font-size: 14px; color: #555; }

/* Generic iframe styles for pages that don't use .video-embed */
iframe { width: 100%; height: 500px; border: none; border-radius: 8px; }

/* Backwards-compatible flex gallery layout for P2 */
.gallery--flex { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }