/* Box model fix (beginning on line 3) */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Fonts */
body { font-family: 'Cabin', sans-serif; }
h1, h2, h3 { font-family: 'Aclonica', cursive, sans-serif; }

/* Global reset per assignment */
* { margin: 0; padding: 0; }

/* Wrapper */
#wrapper {
  margin: 0 auto;            /* center */
  max-width: 960px;          /* do not exceed 960px */
}

/* Base containers (mobile-first full width) */
main, article, aside, section, footer {
  margin: 0 auto;
  width: 100%;
  color: #453B30;
  padding: 3%;
  border: 1px solid #ccc;    /* thin solid gray border */
}

/* Headings */
h1 { text-align: center; }

/* Header banner */
header {
  width: 100%;
  min-height: 220px;                                   /* keep house visible */
  background-image: url('images/header.jpg');          /* place header.jpg at /week10/images/header.jpg */
  background-repeat: repeat-x;
  background-attachment: fixed;
  /* Optional: ensure the image anchors at the top for consistency */
  background-position: top left;
}

/* Header title styling */
header h1 {
  padding-top: 50px;
  color: #FFFFFF;
  text-shadow: 1px 1px 10px #000000;
  font-size: 350%;
}

/* Main intro paragraph */
main p {
  text-align: center;
  font-size: 150%;
}

/* Navigation */
nav {
  background-color: #F2FBD0;  /* note last digit zero */
  position: relative;
  top: 220px;                  /* sits just below banner */
  text-align: center;
}

/* Navigation links */
nav a {
  display: inline-block;
  text-decoration: none;
  padding: 1% 0;
  width: 48%;                  /* 2-up on mobile */
  color: #586B3E;
  font-size: 130%;
}

/* Hover state */
nav a:hover {
  color: #FFFFFF;
  background-color: #B0BC85;
}

/* Ensure main and footer clear floated elements at wider layouts */
main, footer { clear: both; }

/* Footer */
footer {
  text-align: center;
  background-color: #B0BC85;
  font-weight: 900;
  font-size: 120%;
}

/* Responsive: 800px and up */
@media screen and (min-width: 800px) {
  .column { width: 24%; float: left; }
  aside   { width: 40%; float: right; }
  article { width: 60%; float: left; }
  nav a   { width: 24%; } /* four links on one line */
}