/*
 * Author: Melissa Hovik
 * CSE 154 Summer 2019
 * Lecture 6: Intro to JS
 *
 * CSS for basic styling of Mystery Box page.
 */
body {
  /* one way to get full height of flex column to get footer at bottom */
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
}

main {
  flex-grow: 1; /* make main grow to fill up the whitespace in body parent */
}

img {
  width: 200px;
}

/* buttons are inline, but we want it below the box image -
   could make it block and center using margin auto auto,
   or make main a column-based flex parent */
button {
  display: block;
  margin: auto auto;
}

footer {
  background-color: #efefef;
  height: 50px;
}