/* A helper CSS file for prototyping/planning layout. You can use it to plan margins, paddings, etc.
   as well as implementing flex layout without the noise of a detailed webpage/nested containers.
 */

/* There are two ways to use this file:
 - Use the body * { ... } styles to quickly outline the page
 - Use the other two rules to hide irrelevant elements when workign on layout for each flex parent
  (here, I work on the body parent layout, hiding the children of the 3 flex children)

   Most of these styles will apply to most webpage layouts (e.g. borders for outlines, hiding nested children, etc.).
   You can modify/add this file and add with a link tag before a link tag for your layout CSS.
   Work on your layout CSS until you get the layout you want, then remove this and it will show all of the hidden children again.

   Disclaimer: Many of these styles override other styles (e.g. you should not use !important in practice).
   However, this is _exactly_ what we want to testing our CSS, so that's ok here.  Just makes sure you
   don't follow those practices in your actual CSS.
*/
body * {
  border: 2px solid black;
  margin: 5px;
}


/* ------------------------------------------
 * Styles to hide children of flex children
 * -----------------------------------------
 * (remember to only focus on each "node"
 * flex parent of the DOM tree and its _direct children_ - displaying
 * descendents further (e.g. menu item cards wihtin main) can add visual complexity
 * that makes page layout more difficult.)
 */


/* The combinator selector "A > *"" will select _all_ direct children under A elements.
 * You can use this approach to hide all of the children you don't want to see on the page when planning out flex layout.
 * In this case, all children of three flex items (main, header, footer) of a flex parent (body)
 * are hidden so we can focus just on the dimensions and layout of those 3 children within the body.
 *
 * Note: When I finished the body flex column layout, I deleted the two selectors for main below
 * to focus on the #item-container (with 5 articles) next. Try it and see what changes!
 */
/* Uncomment to hide the nested elements */
/*
main > *, header > *, footer > * {
  display: none;
}
*/

/* When you hide those three children, their height will collapse to the height of their contents
 * (there are no longer any contents shown!). In a prototyping file like this, padding can be used
 * (which includes the element's background color) to make sure you can see the element's position
 * when implementing out the layout. */
/* Uncomment to give padding for "empty" flex children above (including background color) */
/*
main, body > header, footer {
  padding: 60px;
}
*/