/*
 * Section 3 Exercise Summer 2019
 * Defines the appearance of a fire flower CSS art
 */

@import url('https://fonts.googleapis.com/css?family=Barriecito&display=swap');

/* Makes it so that borders and padding do not add to the overall width and height. */
#flower-box, #flower-box > div, #stem, #leaves, #question-box {
  box-sizing: border-box;
}

#container {
  position: relative; /* Enables z-index */
  z-index: -2; /* So that the container appears behind everything else. Important for later */

  width: 200px;
}

#flower-box {
  /* TODO: Make 200x120 red round head with 4px black borders.
}

#flower-box > div {
  /* TODO: Make centered 160x80 round white face with 8px yellow border. Center vertically too */

  /* TODO at the end: Use flex to evenly space the eyes and center them vertically */
}

.eye {
  /* TODO: Make 16px wide black round eyes that are 60% as tall as the parent element */
}

#stem {
  margin-top: -4px; /* Moves stem into head a little bit */

  /* TODO: Make centered 50x80 green stem with 4px black borders on all sides but the bottom */
}
#leaves {
  margin-top: -40px; /* Moves the leaves into the stem */
  z-index: -1; /* Moves the leaves behind the stem */
  position: relative; /* Makes z-index functional */

  /* TODO: Make centered 120x40 lightgreen leaves with 4px black borders */
}

#question-box {
  /* TODO: make a 200x200 yellow box with 4px black borders */
}

#question-box p {
  margin-top: 0px; /* Overrides default margin */

  color: white;
  font-size: 150px;
  font-family: Barriecito, sans-serif;

  /* TODO: Center the question mark. */
}