body {
    background-color: #f8f9fa;
    font-family: 'Roboto', sans-serif;
    margin: 0; /* Remove default margin */
}

.header {
    background-color: #8B0000; /* Dark Red */
    color: white;
    padding: 40px 20px; /* Increased padding for better spacing */
    text-align: center;
    border-bottom: 5px solid #5c0000; /* Darker Red Border */
    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.header h1 {
    font-size: 3em; /* Larger font size for the title */
    margin: 0;
}

.header p {
    font-size: 1.2em;
    margin: 10px 0 0; /* Adjusted margin for better spacing */
}

.input-area {
    margin: 20px 0;
}

.table {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Space below the table */
}

.table th {
    background-color: #8B0000; /* Dark Red */
    color: white;
    font-weight: 700;
    padding: 15px; /* Added padding for table header */
}

.table td {
    padding: 12px; /* Added padding for table cells */
}

.table tbody tr:hover {
    background-color: #f2f2f2; /* Light gray on hover */
}

.footer {
    text-align: center;
    padding: 20px; /* Increased padding for footer */
    margin-top: 20px;
    font-size: 0.9em;
    color: #555;
    background-color: #f1f1f1; /* Light background for footer */
    border-top: 1px solid #ddd; /* Subtle top border */
}

/* Responsive Design */
@media (max-width: 768px) {
    .header h1 {
        font-size: 2.5em; /* Smaller font size on mobile */
    }

    .header p {
        font-size: 1em; /* Smaller font size on mobile */
    }

    .table th, .table td {
        font-size: 0.9em; /* Smaller font size for table on mobile */
    }
}