/* project02-04.css */


/* page structure elements */
body {
  margin: 0; /* no margin on body */
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
}

/*everything centered horizontally on the page */
.page {
  max-width:900px;
  margin:0 auto;
  padding:0 10px 30px;
}

/* blue bar at the top with page title */
.titleBar {
  background-color: #2e2a86;
  color: #ffffff;
  padding:18px 20px;
  margin-top:20px;
  text-align: center;
}

/* title bar title elements */
.titleBar h1 {
  margin:0;
  font-size:28px; 
  font-weight:700;
}

/* yellow section for menu & totals */
.menuPanel {
  background-color: #f0c64a;
  padding:22px;

  /* make grid with two columns */
  display:grid;
  grid-gap:30px;
  grid-template-columns:1fr 1fr;

  align-items: start;
}

/* heading for lunch menu */
.menuBox h2 {
  margin:0 0 14px;
  font-size: 20px;
}

/* each item in the menu */
.item {
  display: block;
  margin:10px 0;
  font-size:16px;
}

/* create a little space for checkbox next to text */
.item input {
  margin-right:10px;
  transform: translateY(1px);
}

/* right side of menu panel with totals */
.totalsBox {
  padding-top:10px;
}

/* each row of totals section */
.row {
  display:grid;
  grid-gap:10px;
  grid-template-columns:1fr 120px;
  align-items: center;
}

/* labels for totals row values */
.row .label {
  font-weight:600;
}

/* actual values for totals row */
.row .value {
  text-align:right;
}

/* styles for final total row */
.row.total {
  margin-top:18px;
  font-size:20px;
}

/* make "TOTAL" label  */
.row.total .label {
  font-weight:800;
}

.row.total .value {
  font-weight: 800;
}