/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin-bottom: 0px;
  margin-right: 150px;
  margin-left: 80px;
  border-style: solid;
  border-width: 2px;
}

/* Combined header rules to prevent overriding */
header { 
  border-bottom: 2px solid #000000;
  border-top: 10px solid #000000;   /* Fixed: Added 'solid #000000' */
  border-left: 10px solid #000000;  /* Fixed: Added 'solid #000000' */
  border-right: 10px solid #000000; /* Fixed: Added 'solid #000000' */
  font-style: italic;
  margin: 10px;
}

/* Combined h1 rules */
h1 {
  font-style: italic;
  color: blue;
}

p {
  color: red;
}

/* Style the main header bar */
.site-header {
  display: flex;
  justify-content: space-between; /* Pushes logo left, nav right */
  align-items: center;            /* Centers items vertically */
  background-color: #333;
  color: white;
  padding: 20px 20px;
  margin-bottom: 25px;
}
  
/* Style the logo text */
.logo {
  font-size: 24px;
  font-weight: bold;
}

/* Remove default bullet points and flex the menu items horizontally */
.nav-links {
  display: flex;
  list-style: none;
  gap: 20px; /* Space between links */
  margin: 0;
  padding: 0;
}

/* Style the navigation links */
.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

/* Add a hover effect */
.nav-links a:hover {
  color: #ffcc00;
}