/* 1. Style the navigation bar container */
nav {
	background-color: #333; /* Dark grey background */
	padding: 10px 20px;
	border-radius: 5px;
}

/* 2. Turn the vertical bullet list into a horizontal row */
nav ul {
	list-style-type: none; /* Removes the bullet points */
	margin: 0;
	padding: 0;
	display: flex; /* Align items side-by side */
	align-items: center; /* Centers items vertically */
	justify-content: space-between; /* Pushes home link to the left, search to the right */
}

/* 3. Style the Home the link */
nav a {
	color: white; /* Makes text link white */
	text-decoration: none; /* Remove the underline */
	font-family: Arial, sans-serif;
	font-weight: bold;
}

nav a:hover {
	color: #ffcc00; /* Changes color to gold when you hover your mouse over it */
}

/* 4. Make the search input look modern */
nav input[type="text"] {
	padding: 6px 12px;
	border: none;
	border-radius: 4px 0 0 4px; /* Rounds only the left corners */
	outline: none;
}

/* 5. Style the search button */
nav button {
	background-color: #ffcc00; /* Match the gold accent */
	border: none;
	color: #333;
	padding: 6px 15px;
	font-weight: bold;
	border-radius: 0 4px 4px 0; /* Round only the right corners */
	cursor: pointer;
}
nav button:hover {
	background-color: #e6b800; /* Darkens slightly on hover */
}