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

#container, .column {
  display: flex;
}

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

.column {
  flex-direction: column;
}

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

/* -------------------------------------------------------------------------------- 
 * 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
 * -----------------------------------------------
 */
/*
#container > div:nth-child(odd) {
  background-color: darkgreen;
}

#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;
}