/* Viewport rules to mirror Bootstrap's responsive behavior Note: Bootstrap recommends adding the following meta tag in the HTML : This CSS provides fallbacks for older browsers (IE/legacy engines) that understand the @viewport / @-ms-viewport rules. */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } div.intro { color: #0000ff; font-family: Arial, sans-serif; text-align: center; } /*Style for nav elements*/ nav { background-color: #ffffff; padding: 10px; text-align: center; } nav.nav-bar { display:flex; gap:12px; flex-wrap:wrap; background:#f4f4f4; padding:22px; border-radius:6px; text-align: center; } .social-icons img { transition: filter 200ms ease, opacity 200ms ease; } /*img { transition: filter 200ms ease, opacity 200ms ease; }*/ /* Smooth color transitions */ body, nav, a, h3 { transition: background-color 200ms ease, color 200ms ease; } /* Responsive images: ensure any images (including those with inline width attributes) scale down on small viewports. This is a safe global rule. */ img { max-width: 100%; height: auto; display: block; /* reduces inline spacing; override where needed */ }