/* Reset some default styles to ensure consistent styling */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Apply a background color, font, and text color */
body {
    background-color: #ffffff; /* Replace with lovali's background color */
    font-family: 'Arial', sans-serif; /* Replace with lovali's font */
    color: #333; /* Replace with lovali's text color */
}

/* Style the header */
header {
    background-color: #333; /* Replace with lovali's header background color */
    color: #fff; /* Replace with lovali's header text color */
    padding: 20px;
}

/* Style the navigation menu */
nav {
    background-color: #444; /* Replace with lovali's navigation background color */
    color: #fff; /* Replace with lovali's navigation text color */
    padding: 10px;
}

/* Style links in the navigation menu */
nav a {
    color: #fff; /* Replace with lovali's link text color */
    text-decoration: none;
    margin-right: 20px;
}

/* Style the main content container */
.main-content {
    padding: 20px;
}

/* Style the footer */
footer {
    background-color: #333; /* Replace with lovali's footer background color */
    color: #fff; /* Replace with lovali's footer text color */
    padding: 10px;
    text-align: center;
    width: 100%;
}

footer a {
    color: white;
}

/* Center the entire page content */
body {
    background-color: #F7F7F7;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Style the table */
table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for a modern look */
    background-color: #fff;
}

table th,
table td {
    padding: 12px;
    text-align: center; /* Center-align table cells */
    border: 1px solid #ccc; /* Add borders to table cells */
}

table th {
    background-color: var(--primary-color); /* Use the primary color for table header */
    color: #fff;
}

/* Style alternating rows for better readability */
table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Hover effect for table rows */
table tr:hover {
    background-color: #e0e0e0;
}

/* Add space between the table and other content */
.main-content {
    margin-top: 20px;
}

/* Table Header Styles */
table th {
    background-color: var(--primary-color);
    color: #fff; /* White text color for the header */
    padding: 12px;
    text-align: center;
}

/* Style the first row (table header) differently for better readability */
table tr:first-child th {
    background-color: #333; /* Dark background color for the first row */
    color: #fff; /* White text color for the first row */
}