body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

header {
    color: white;
    background-color: #333; /* Dark background for the header */
    padding: 10px; /* Padding around the header */
}

nav ul {
    list-style-type: none; /* Remove bullet points */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Use flexbox to align items in a row */
    justify-content: space-around; /* Space items evenly */
}

nav ul li {
    margin: 0 15px; /* Add some space between the items */
}

nav ul li a {
    color: white; /* White text color */
    text-decoration: none; /* Remove underline from links */
    font-size: 18px; /* Increase font size */
    padding: 10px 15px; /* Add padding around the links */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

nav ul li a:hover {
    background-color: #555; /* Change background on hover */
    border-radius: 5px; /* Rounded corners for hover effect */
}

h1 {
    color: white;
    margin: auto;
    max-width: 500px;
    text-align: center;
    background-color: #333;
    border-radius: 5px;
    margin-top: 20px; /* Add some space above the heading */
}

/* Search Bar Styles */
form {
    margin: 20px 0; /* Add some space above and below the form */
    text-align: center; /* Center the form */
}

form input[type="text"] {
    padding: 15px; /* Add padding to the input field */
    font-size: 18px; /* Increase font size */
    width: 300px; /* Set a width for the input field */
    border: 1px solid #ddd; /* Add a border */
    border-radius: 5px; /* Rounded corners */
    margin-right: 10px; /* Space between input and button */
}

form button {
    padding: 10px 15px; /* Add padding to the button */
    font-size: 16px; /* Increase font size */
    background-color: #555; /* Dark background for the button */
    color: white; /* White text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

form button:hover {
    background-color: #777; /* Change background on hover */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: auto;
}

th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #333;
}

tr {
    background-color: white;
}

th {
    background-color: #333;
    color: white;
}

.button-link {
    color: white; /* Change this to your desired color */
    text-decoration: none; /* Remove underline */
}

.button-link:hover {
    color:rgb(255, 255, 255) !important ; /* Change this to your desired hover color */
    text-decoration: underline; /* Underline on hover */
}

/* Add this CSS to your existing styles */
a {
    color: black; /* Default link color */
    text-decoration: none; /* Remove underline */
}

a:hover {
    color: #555; /* Color when hovered */
    text-decoration: underline; /* Underline on hover */
}

a:visited {
    color: black; /* Color for visited links */
}

/* Button link styles */
.button-link {
    color: white !important; /* Ensure the color is white */
    text-decoration: none; /* Remove underline */
}

.button-link:hover {
    color: rgb(255, 255, 255) !important; /* Keep hover color white */
    text-decoration:none; /* Underline on hover */
}

/* Ensure button styles do not conflict */
.button {
    color: white; /* Ensure button text is white */
}