/* PAGE BACKGROUND AND FONT */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  padding: 20px;
  margin: 0;
}

/* MAIN TITLE */
#main-title {
  color: #333333;
  border-bottom: 3px solid #333333; /* border under the title */
  padding-bottom: 10px; /* space between text and border */
  margin-bottom: 20px; /* space below the title */
}

/* THE INTRO SECTION THAT HOLDS THE IMAGE AND TEXT */
#intro-section {
  background-color: white;
  border: 2px solid #cccccc; /* border around the whole section */
  padding: 15px; /* space inside the box */
  margin-bottom: 20px; /* space below this section */
}

/* FLOATING IMAGE */
#float-image {
  float: left; /* pushes image to the left */
  margin-right: 15px; /* space between image and text */
  margin-bottom: 10px;
  border: 3px solid #999999; /* border around the image */
}

/* CLEARS THE FLOAT so next elements don't get affected */
#clear-fix {
  clear: both;
}

/* FLEXBOX TITLE */
#boxes-title {
  color: #333333;
  margin-bottom: 10px;
}

/* FLEXBOX CONTAINER - lines up children in a row */
#flex-container {
  display: flex; /* turns on flexbox */
  gap: 15px; /* space between the boxes */
}

/* EACH BOX INSIDE THE FLEX CONTAINER */
.box {
  background-color: #4a90d9; /* blue background */
  color: white;
  padding: 30px; /* space inside each box */
  margin: 5px; /* space outside each box */
  border: 3px solid #2c5f8a; /* border around each box */
  flex: 1; /* makes all boxes equal width */
  text-align: center;
}