/* Week 1 Web Programming personal website */
* { box-sizing: border-box; }
body { margin: 0; background: #F4F1EE; color: #343236; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; }
header { background: #682D3A; color: white; text-align: center; padding: 28px 15px 20px; }
header h1 { margin: 0; font-size: 2rem; }
header p { margin: 5px 0 0; color: #F4E3E5; }
nav { background: #844451; text-align: center; padding: 12px; }
nav a { color: white; text-decoration: none; font-weight: bold; margin: 0 18px; }
nav a:hover, nav a:focus { text-decoration: underline; }
main { width: 90%; max-width: 900px; margin: 28px auto; background: white; padding: 28px; border-radius: 8px; }
h2 { color: #682D3A; margin-top: 0; }
h3 { color: #844451; }
.hero { width: 100%; height: auto; display: block; border-radius: 6px; margin: 18px 0 24px; }
.note { background: #F8F0F0; border-left: 4px solid #844451; padding: 14px 18px; margin: 22px 0; }
a { color: #682D3A; }
footer { background: #682D3A; color: white; text-align: center; padding: 18px; margin-top: 30px; }
footer p { margin: 0; }
@media (max-width: 600px) { main { width: 94%; padding: 18px; } nav a { display: inline-block; margin: 4px 10px; } header h1 { font-size: 1.6rem; } }