body {
  font-family: Arial, sans-serif;
  margin: 10px;
  padding: 20px; /* Adds space between the body content and the screen edge */
  box-sizing: border-box; /* Ensures padding doesn't affect the overall width/height */
}

header {
 /* background-color: #333;*/
  background-color: DarkSlateGray; /*color of the main header area*/
  color: white;
  padding: 10px 0;
  text-align: center;
  width: 100%; /* Ensures the header spans the full width */
  box-sizing: border-box; /* Accounts for padding within the width */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  background-color: DarkSlatedGray;  /*color of the bar with the buttons*/
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
}

nav ul li {
  position: relative; /* Necessary for dropdown positioning */
  margin: 0 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

/*color when you mouse over a button*/
/*
nav ul li a:hover {
  background-color: #555; 
}
*/

.dropdown-content {
  display: none; /* Initially hidden */
  position: absolute;
  top: 100%; /* Position below the parent link */
  left: 0;
  background-color: DarkSlateGray;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
  z-index: 1;
}

.dropdown-content li a {
  padding: 10px 15px;
}

.dropdown-content li a:hover {
  background-color: #555;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
  display: block; /* Show when the parent is hovered */
  background-color:  DarkSlateGray;
}

@media (max-width: 600px) {
  body {
    padding: 10px; /* Reduce padding on smaller screens */
  }

  nav ul {
    flex-direction: column; /* Stack navigation links vertically */
    align-items: center;
  }

  nav ul li {
    margin: 5px 0;
  }
}

/* fit images for mobile view*/

  img {
    max-width: 100%;
    min-width: 200px;
    height: auto;
}



/*make some images float tpo the right*/
.myImage {
  float: left;
  font-family: Veranda;
   margin-right: 30px; 
}

p.thick {
  font-weight: bold;
}

/*Buttons for highlighted projects*/
highlight_button {
  background-color: #f0f5f5;
  border: DarkSlateGray;
 /* color: DarkSlateGray;*/
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;  /* Accounts for padding within the width */
}

highlight_button a {
  color: DarkSlateGray;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

highlight_button:hover {
  background-color: #b3cccc; /*color when you mouse over a button*/
}