/* Global styling for the body element */
body {
  /* Add styles here to affect the entire page */
  background-image: url("../images/aurora-borealis.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: ivory;
}

/* Styling for the div and header elements, affecting the width, margin, border, and background color */
div,
header {
  width: 80%;
  /* Sets the width to 80% of the parent container */
  margin: 20px auto;
  /* Centers the element horizontally and adds 20px margin to the top and bottom */
  border: 3px solid gold;
  /* Sets a 3px solid gold border */
  background: rgba(0, 0, 0, 0.7);
  /* Sets a semi-transparent black background */
  overflow: auto;
  /* makes sure that child elements are contained within the div */
}

/* Specific styling for all div elements, setting a minimum height */
div {
  min-height: 250px;
  /* Ensures the div is at least 250px tall */
}

/* Styling for h1 and h2 headings, controlling the text alignment and color */
h1,
h2 {
  text-align: center;
  /* Centers the text horizontally */
  color: gold;
  /* Sets the text color to gold */
}

/* Placeholder for the background styling, add your specific styles here */
#background {
  /* Add background-specific styles here */
  min-height: 500px;
  background-image: url("../images/tree.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Placeholder for the image map styling, add your specific styles here */
#img-map {
  /* Add image map-specific styles here */
}

/* Placeholder for floating left, add your specific styles here */
#float-left img {
  /* Add floating left-specific styles here */
  float: left;
  width: 40%;
}

/* Placeholder for floating right, add your specific styles here */
#float-right img {
  /* Add floating right-specific styles here */
  float: right;
  width: 40%;
}

/* Placeholder for picture tag, add your specific styles here */
#picture-tag {
  /* Add picture tag-specific styles here */
}

/* Placeholder for linked image, add your specific styles here */
#linked-image img {
  /* Add linked image-specific styles here */
  width: 75%;
  display: block;
  margin: 10px auto;
  max-width: 100%;
  height: auto;
}

/* Placeholder for image as a link, add your specific styles here */
#img-as-link img {
  /* Add image as link-specific styles here */
  max-width: 100%;
  height: auto;
}