/*
 * CSE 154 Lecture 5 (Layout)
 * --------------------------
 * CSS for Exercise 8 (builds off of Exerises 1-3, 5-7).
 */
#boxes-container, .column div {
  border: 2pt solid black;
}

#boxes-container, .column {
  display: flex;
}

.column div {
  width: 80px;
  height: 80px;
}

.column {
  flex-direction: column-reverse; /* to put the children in the columns in reverse */
  justify-content: space-evenly; /* To put space the children in the columns evenly */
}

#boxes-container {
  background-color: gray;
  border-radius: 5px;
  font-size: 20pt;
  height: 500px;
  margin: auto auto;
  text-align: center;
  width: 75%;
  flex-wrap: wrap;
  justify-content: space-between; /* To put all space in container between the two column children */
}

/* --------------------------------------------------------------------------------
 * A Note on the colored boxes and psuedo-selector
 * --------------------------------------------------------------------------------
 * To get the same boxes colored as we want with this solution, our psuedo-selector
 * doesn't quite work as we had it (try it to see why!) */

/*
 * -----------------------------------------------
 * Old example
 * -----------------------------------------------
 */
/*
#boxes-container > div:nth-child(odd) {
  background-color: darkgreen;
}

#boxes-container > div:nth-child(even) {
  background-color: white;
}
*/

/* -----------------------------------------------
 * Alternative example
 * -----------------------------------------------
 * To keep the alternating colors with changing the HTML, we can combine the evens of the
 * first column and the odds of the second, and vice versa. Alternatively, we could assign
 * classes in HTML for "odd" and "even" boxes and assign selectors that way, but you can
 * imagine that tedious to maintain if you add 50+ more boxes.
 *
 * Also Note: why you shouldn't often run into long selectors spanning > 80 lines,
 * here's an example of how to format that cleanly vvv
 */
.column:first-child div:nth-child(odd),
.column:nth-child(2) div:nth-child(even) {
  background-color: darkgreen;
}

.column:nth-child(2) div:nth-child(odd),
.column:first-child div:nth-child(even) {
  background-color: white;
}