html {
  font-size: 100%;
}

body {
  background-color: rgba(119, 201, 212, 0.8);
}

/* common styling for elements */
section, header, footer, button, p, #totals {
  font-family: "Open Sans", Roboto, Arial, sans-serif; 
  font-size:   2rem;
  font-weight: bold;
  text-align:  center;
  overflow:    hidden;
}

/* hide the things we want */
.hide {
  display: none;
}

/* reduce the font size of the header/footer h2 */
footer > h2, header > h2 {
  font-size: 1.2rem;
}

/* common styling for buttons */
button {
  background-color: rgba(119, 201, 212, 1.0);
  border: 1px solid black;
}

/* specific styling for the main action buttons */
#actions button {
  margin: auto 1rem 1rem 1rem;
  padding: 1.5rem;
}

/* for the buttons that have focus, increase the border */
button:focus {
  border: 2px solid black;
}

/* common styling for lists, plenty of padding for easy focus */
li {
  padding-bottom: 2rem;
  list-style: none;
  text-align: left;
}

/* common styling for labels, inputs */
label, input {
  line-height: 2.5rem;
  font-size: 2rem;
}

/* layout using a grid with named areas */
.wrapper {
  display: grid;
  
  grid-template-columns: [col1-start] 90vw;
     
  /* 
     create some space for the shared work area row,
     this must account for everything that is going
     to be displayed here, this includes buttons
     and their font size which is in 'rem' vs. 'vh'
  */
  grid-template-rows:    [row1-start] auto 
                         [row2-start] auto 
                         [row3-start] auto 
                         [row4-start] 30vmax 
                         [row5-start] auto
                         [row5-end];

  margin: auto 4vw auto 4vw;
}

/* assign the sections to their grid area */
header {
  grid-column: col1-start;
  grid-row:    row1-start;
}

#daily_calories {
  grid-column: col1-start;
  grid-row:    row2-start;
}

#actions {
  grid-column: col1-start;
  grid-row:    row3-start;
}

/* 
 * the default work area shows an image, this area is shared
 * with entering food/exercise and displaying history 
 */
#work_area_share {
  grid-column: col1-start;
  grid-row:    row4-start;
  background-image: url("../img/count_cal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: linear;
}

#work_area_share:active {
  transform: rotate(-360deg);
}

#entering_food,  
#entering_exercise, 
#history_display {
  grid-column: col1-start;
  grid-row:    row3-start/row5-start;
  display: none;
  text-align: left;
}

footer {
  grid-column: col1-start;
  grid-row:    row5-start;
}

/* define the food/exercise enter sub-grid */
#entering_food_grid,
#entering_exercise_grid {
  display: grid;
  grid-row-gap: 1vh;
  grid-column-gap: 1vw;
  grid-template-areas: "name_input     name_input"
                       "results        amount"
                       "results        add"
                       "results        done";
                       
  grid-template-columns: 65vw 25vw;
}

#food_name,
#exercise_name {
  grid-area: name_input;
  width: 60vw;
  margin-left: 5vw;
}

#servings,
#minutes {
  grid-area: amount;
  width: 10vw;
}

#add_food_button,
#add_exercise_button {
  grid-area: add;
  width: 20vw;
  margin-right: 5vw;
}

#food_done,
#exercise_done {
  grid-area: done;
  width: 20vw;
  margin-right: 5vw;
}

#food_results,
#exercise_results,
#history_results {
  /* results are dynamically created, give them default height
     use the width/height max for this  */
  height: 30vmax;
  width: 60vw;
  margin-left: 5vw;
  border: 1px solid black;
  overflow: scroll;
}

#food_results,
#exercise_results {
  grid-area: results;
}

/* define the history sub-grid */
#history_grid {
  display: grid;
  grid-row-gap: 1vh;
  grid-column-gap: 1vw;
  grid-template-areas: "history_results   history_delete"
                       "history_results   history_done";
                       
  grid-template-columns: 65vw 25vw;
}

#history_results {
  grid-area: history_results;
  width: 60vw;
  margin-left: 5vw;
}

#history_delete_button {
  grid-area: history_delete;
  width: 20vw;
  margin-right: 5vw;
}

#history_done {
  grid-area: history_done;
  width: 20vw;
  margin-right: 5vw;
}