h1 {
    text-align: center;
}




/* CSS code to style the navigation links */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333; /* Background color for the navigation bar */
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the background color of the link when hovered */
nav ul li a:hover {
    background-color: #111;
}


/* table*/
table {
    width: 80%; 
    margin: 0 auto; /* Center the table */
    border-collapse: collapse; /* Collapse table borders */
}

table, th, td {
    border: 1px solid black; /* Add borders to table, th, and td */
}

th, td {
    padding: 10px; /* Add padding to cells */
    text-align: left; /* Align text to the left within cells */
}

th {
    background-color: darkgray; /* Add background color to header cells */
    height:70px;
    text-align: center;
}

tr:nth-child(even) {background-color: #f2f2f2;}



/* Style for error messages */
.error-container {
    background-color: #ffe6e6; /* Light red background */
    border: 1px solid #f44336; /* Red border */
    color: #f44336; /* Red text */
    padding: 10px;
    margin-bottom: 10px;
}

.error-message {
    margin: 0; /* Remove default margin for <p> */
}


.success-message {
    color: #4CAF50; /* Green color for success message */
    background-color: #e7f3e7; /* Light green background */
    padding: 10px;
    margin-bottom: 10px;
}







/* form */
form {
    width: 300px;
    margin: 0 auto;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

input[type="submit"] {
    padding: 10px 20px;
    background-color:blue;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

input[type="submit"]:hover {
    background-color:lightblue;
}





/* Styling for sorting links */
a.sort-link {
    color: lavender; /* Change color as needed */
    text-decoration: none;
    margin-right: 7px; /* Adjust spacing */
}

.sort-link:hover {
    text-decoration: underline;
    color:pink;
}


/* Styling for pagination buttons */
.pagination {
    margin-top: 20px; /* Adjust margin as needed */
}

.pagination a {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #f2f2f2; /* Background color for pagination buttons */
    color: #333; /* Text color for pagination buttons */
    text-decoration: none;
    border: 1px solid #ccc; /* Border for pagination buttons */
    border-radius: 4px; /* Rounded edges for pagination buttons */
}

.pagination a:hover {
    background-color: #ddd; /* Background color on hover */
}