body {
 background:cover; /* sets the background image  to cover the entire element */
  margin: 0; /* removes any default margin around the body */
  padding: 0;  /* removes any default padding around the body */
}

h2, p {
  margin: 15px; /* adds a margin of 15 pixels around these elements */
}
/* styles for navigation list (no buttlets needed here)*/
/* targets the unordered list within a nav element */
 nav ul{
  list-style-type:none; /*Removes default bullets*/
  margin: 0;  /*removes any default margin from the list */
  padding: 0; /* removes any default padding from the list */
  overflow: hidden;/* allow content to overflow if it exceeds the elements boundries*/
  background-color: transparent; /*set the background color of the navigation bar to transparent */
}
/* target list items within the navigation list*/
nav ul li {
  float: left; /* makes list items float to the left, allowing them to sit side by side */
}
/* target anchor (link) elements within the navigation list items*/
nav ul li a {
  display: block; /* make the links display as block-level elements, so they take up full width and height available */
  color: #FFFFFF; /* set the text color of the links to white */
  text-align: center; /* center the text within the link */
  padding: 14px 16px; /* add padding of 14 pixels top/bottom and 16 pixels left/right*/
  text-decoration: none;  /* remove the default underline from links */
}
/* apply styles when the user hovers over the navigation link*/
 nav ul li a:hover { 
  background-color: blue; /* change the background color to blue on hover */
} 
 .hero-text { /* style for the hero text section */
       flex-grow: 1; /* allow the element to grow and fill available space */
       display: flex; /*use flexbox for layout*/
       justify-content: center; /* center content horizontally*/
       align-items: center; /* center content vertically */
       flex-direction: column; /* stack flex items vertically*/
       text-align: center; /* center the text within the element */
       padding: 20px; /*add padding around the text content*/
       box-sizing: border-box;  /* ensure padding and border are included in the elements total width and height */
     }
     .hero-text h1 { /* style for the h1 (main heading) within the hero text section */
       font-size: 3.5em; /*set the font size to 3.5 times the base font size */
       margin: 0 0 10px 0; /*remove top margin, add 10px bottom margin, 0 left/right margin */
       text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /*add a text shadow for depth */
     }
      .nav-container { /* style for the navigation container*/
       padding: 20px; /*add padding around the navigation container */
       text-align: center; /* center teh content within the container */
       width:100%; /*set the width of the container to 100% of its parent */
       box-sizing: border-box; /*ensure padding and border are included in the elements total width and height */
       flex-shrink:0; /*prevent the element from shrinking if flex items are too large */
     }
     .nav-container ul { /*target the unordered list within the navigation container */
       list-style: none; /* remove default list bullets */
       padding:0;  /* sets the space inside the element (rop, right, bottom and left) to zero*/
       margin:0; /* sets teh space outside the element (top, right, bottom and left) to zero*/
      
     }
     .nav-container li { /* selects list items (li) that are direct children of an element with the class "nav-container" */
       display: inline-block;  /* allows list items to be displayed inline but still accept width and height properties, and adds space around them */
       margin: 0 15px;  /* sets teh horizontal space on the left and right of each list item to 15 pixels */
     }
     
     .nav-container a { /* selects anchor tags (a) that are direct children of an element with the the class "nav-container" */
       text-decoration: none; /* removes the underline from text links */
       color: white; /*sets the text color of the links to white */
       font-size: 1.2em; /*sets teh font size to 1.2 times the default font size */
       font-weight:bold;  /* makes teh font weight bold */
       text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /*adds a subtle shadow to the text for a 3D effect (horizontal offset, vertical offset, blur radius, color with transparency)*/
       transition: color 0.3 ease; /*creates a smooth transition for the color propery over 0.3 seconds when it changes */
     }
     .nav-container a:hover { /* selects anchor tags (a) when the user hovers their mouse over them, within an element with the class "nav-container"*/
       color: #FFFFFF; /* sets the text color of the link sto white when hovered over */
     }    
     #contact-list { /* selects an element with the specific ID "contact-list" */
       color:black; /*sets the text color of the element with the ID "contact-list" to black */
     }