/* Reset some basic elements for consistency */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif; /* Use a modern sans-serif font */
    background-color: #f4f4f4; /* Light gray background for contrast */
    color: #333; /* Dark gray text for readability */
    line-height: 1.6; /* Better line spacing */
}

.container {
    max-width: 600px; /* Limit the width for better readability */
    margin: 50px auto; /* Center the container with space at the top */
    padding: 20px; /* Add some padding around the content */
    background-color: #fff; /* White background for the container */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

h1 {
    font-size: 2.5em; /* Larger font size for the title */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    color: #2c3e50; /* Dark blue color for a sophisticated look */
}

input[type="text"] {
    width: 100%; /* Full width input */
    padding: 15px; /* Padding for comfort */
    font-size: 1em; /* Font size for input text */
    border: 2px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners for the input */
    margin-bottom: 20px; /* Space below the input */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

input[type="text"]:focus {
    border-color: #2c3e50; /* Change border color on focus */
    outline: none; /* Remove default outline */
}

.search-buttons {
    display: flex; /* Use flexbox for button layout */
    justify-content: space-between; /* Space out the buttons */
}

button {
    flex: 1; /* Allow buttons to grow equally */
    padding: 15px; /* Padding for buttons */
    margin: 0 5px; /* Space between buttons */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    background-color: #3498db; /* Blue background for buttons */
    color: white; /* White text color */
    font-size: 1em; /* Font size for button text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

.results {
    margin-top: 20px; /* Space above results section */
    padding: 15px; /* Padding for results */
    background-color: #ecf0f1; /* Light gray background for results */
    border-radius: 5px; /* Rounded corners for results */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for results */
}

table {
    width: 100%; /* Full width for the table */
    border-collapse: collapse; /* Remove spacing between cells */
    margin-top: 20px; /* Space above the table */
}

th, td {
    padding: 12px; /* Padding for table cells */
    text-align: left; /* Align text to the left */
    border: 1px solid #ccc; /* Light gray border for cells */
}

th {
    background-color: #3498db; /* Blue background for header cells */
    color: white; /* White text color for header */
    font-size: 1.1em; /* Slightly larger font size for headers */
}

tr:nth-child(even) {
    background-color: #ecf0f1; /* Light gray for even rows */
}

tr:hover {
    background-color: #bdc3c7; /* Darker gray on hover for rows */
}