* {
  box-sizing: border-box;
  font-family: sans-serif;
}

h2 {
  margin-top: 40px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.section {
  margin-bottom: 40px;
}

/* Level 1 – Use Flexbox to space items evenly in a row - done */
.level1 .container {
  /* space the items evenly */
  display: flex;
  justify-content: space-evenly;
}

.level1 .box {
  width: 60px;
  height: 60px;
  background: #4682B4;
  color: #fff;
}

/* Level 2 – Center one item in the middle of the container - done */
.level2 .center-container {
  height: 200px;
  background: #eee;
  display: flex;
  /* set flex direction to veritcal and center halfway between top and bottom */
  flex-direction: column;
  justify-content: center;
}

.level2 .center-box {
  padding: 20px;
  background: #DC143C;
  color: #fff;
}

/* Level 3 – Make boxes wrap responsively - done */
.level3 .wrap-container {
  display: flex;
  /* add wrap value */
  flex-wrap: wrap;
  gap: 10px;
  background: #f4f4f4;
  padding: 20px;
}

.level3 .item {
  width: 80px;
  height: 80px;
  background: #008080;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Level 4 – Flex-grow navigation bar - Goal: Make one .nav-item 
(with the .big class) grow to take up extra space in the navigation bar. - done */
.level4 .nav-bar {
  background: #333;
  padding: 10px;
  display: flex;
}

.level4 .nav-item {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.level4 .big {
  /* allows items to grow and take up extra space in the container */
  flex-grow: 1;
  /* allows the item to shrink when there's not enough space */
  flex-shrink: 1;
  /* distribute all available space */
  flex-basis: 0%;
}

/* Level 5 – Full page layout using flexbox 
  Goal: Use Flexbox to build a full-page layout. - done
  
Desktop Layout : 
  -----------------------------------------
  |               HEADER                  |
  -----------------------------------------
  | SIDEBAR |     CONTENT     |   ADS     |
  -----------------------------------------
  |               FOOTER                  |
  -----------------------------------------

Mobile Layout : 
  -----------------------------------------
|               HEADER                  |
-----------------------------------------
|            SIDEBAR (stacked)          |
|            CONTENT  (stacked)         |
|            ADS      (stacked)         |
-----------------------------------------
|               FOOTER                  |
-----------------------------------------
*/ 
  
.level5 .page {
  height: 100vh;
}

.level5 header,
.level5 footer {
  background: #444;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.level5 .main {
  display: flex;
  justify-content: space-around;
}

.level5 .sidebar,
.level5 .ads {
  background: #ddd;
  padding: 10px;
  width: 150px;
  
  /* flex grow, shrink, and basis to ensure .sidebar and .ads take up available extra space */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 1;
  /* move text to center for better layout visiblity */
  text-align: center;
}

.level5 .content {
  padding: 10px;
  background: #eee;
  
  /* flex grow, shrink, and basis to ensure .content takes up available extra space */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 1;
  /* move text to center for better layout visiblity */
  text-align: center;
}

@media (max-width: 768px) {
  .level5 .main {
    /* set flex to column so .sidebar, .ads, and .content stack */
    display: flex;
    flex-direction: column;
  }

  .level5 .sidebar,
  .level5 .ads {
    width: 100%;
  }
}