h1 {color:blue;}

/* This styles only the bottom section */
#bottom {
  font-family: Arial, sans-serif; /* changes the text style */
  background-color: #f0f0f0; /* adds light gray background */
  padding: 10px; /* gives slight padding for spacing */
}


/* This class is used to highlight a paragraph */
.highlight {
  color: red;          /* Makes the text red */
  font-size: 18px;     /* Makes the text a little bigger */
}

/* This ID targets only the first image in the bottom section */
/*Smoothly scales the image little when you hover*/
#main-image {
  width: 450px;        /* Changes the image width to 450 pixels */
  transition: transform 300ms ease;
}

#main-image:hover {
transform: scale(1.05);
}

/* Element selector for all divs (very light) */
div {
  margin-top: 6px; /* small spacing */
}

/* Class on our specific div box */
.info-box {
  border: 1px solid #cccccc;
  padding: 8px;
  background: #ffffff; /* stays readable on the gray #bottom */
}