header {
  background: #d0d2d0;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 4rem;
  padding: 1rem;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover{
  color: #000;
}

/* Define a generic button class */
.button-link {
  /* Basic box properties */
  display: inline-block; /* Essential to allow padding/margin/width */
  padding: 10px 18px;    /* Vertical and horizontal padding */
  border: 1px solid #007bff; /* Small border */
  border-radius: 4px;    /* Rounded corners */
  
  /* Color and background */
  background-color: #007bff; /* Primary button color */
  color: white;            /* White text */
  
  /* Text styling */
  text-decoration: none; /* Remove the default underline */
  font-weight: 600;      /* Make the text bold */
  text-align: center;
  
  /* Smooth transition for hover effects */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover effect for interaction */
.button-link:hover {
  background-color: #0056b3; /* Darker blue on hover */
  border-color: #004085;
  cursor: pointer;         /* Change cursor to indicate clickability */
}

/* Optional: Active/Click effect */
.button-link:active {
  transform: translateY(1px); /* Slight press down effect */
}