/* CSS for general layout and styling */
html, body {
    font-family: Arial, sans-serif; /* Set the font to Arial, fallback to sans-serif */
    height: 100%; /* Make sure the body takes up the full height of the viewport */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Ensure that the body uses flexbox layout */
body {
    display: flex;
    flex-direction: column; /* Arrange children elements in a column */
    align-items: center; /* Center items horizontally */
}

/* Add padding to the bottom of the body to avoid content overlap */
main {
    flex: 1; /* Allow the main content to take up the available space */
    width: 100%; /* Ensure full width */
}

/* Specific styling for the footer elements */
footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%; /* Ensure full width */
}

/* Style for the header */
.header {
    background-color: #4CAF50; /* Green background */
    color: white;
    padding: 20px;
    text-align: center; /* Center the title */
    width: 100%; /* Ensure full width */
    position: relative; /* Allow for absolute positioning of the nav */
}

/* Style for the navbar container */
nav {
    position: absolute; /* Use absolute positioning within header */
    top: 20px; /* Position it below the header padding */
    right: 20px; /* Align to the right with some padding */
}

/* Ensure the navbar has its own spacing */
.navbar {
    list-style-type: none; /* Remove bullets */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Display links in one line */
}

/* Style for navbar list items */
.navbar li {
    margin-left: 20px; /* Space between items */
}

/* Style for navbar links */
.navbar li a {
    color: white; /* Link color */
    text-align: center; /* Center text */
    padding: 14px; /* Space inside links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the links bold */
}

/* Navbar link hover effect */
.navbar li a:hover {
    background-color: #45a049; /* Change background on hover */
    border-radius: 5px; /* Slightly round the edges */
}

/* Remove margin for h1 elements */
h1 {
    margin: 0; /* Remove default margin */
}

/* Styling for h2 elements */
h2 {
    margin: 1em 0; /* Add vertical margin */
}

/* Container for search form and filters */
.search-container {
    padding: 1em; /* Add padding inside the container */
    background-color: #f1f1f1; /* Light grey background color */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center elements */
}

/* Styling for the search form */
#search-form {
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow wrapping of form elements */
    gap: 1em; /* Add spacing between elements */
    justify-content: center; /* Center the form elements */
    width: 100%; /* Ensure full width */
}

/* General styling for input fields, select dropdowns, and buttons */
input[type="text"],
input[type="number"],
select {
    padding: 0.5em; /* Add padding inside the elements */
    margin: 0.5em 0; /* Add vertical margin */
    width: 100%; /* Ensure full width for inputs */
    max-width: 300px; /* Limit width for inputs */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Make sure the feedback input also has full width */
#feedback-form input,
#feedback-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    max-width: 300px; /* Match the width to input fields */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Specific styling for number input fields */
input[type="number"] {
    width: 150px; /* Set a fixed width */
}

/* Styling for the search button */
button {
    background-color: #4CAF50; /* Green background color */
    color: white; /* White text color */
    border: none; /* Remove border */
    cursor: pointer; /* Show pointer cursor on hover */
    padding: 8px 12px; /* Shorter padding for smaller button */
    width: auto; /* Automatic width */
    align-self: center; /* Center the button */
}

/* Styling for button hover state */
button:hover {
    background-color: #45a049; /* Darker green background on hover */
}

/* Styling for the results section */
#results {
    padding: 1em; /* Add padding inside the results container */
}

/* Styling for tables */
table {
    width: 100%; /* Full width of the parent container */
    border-collapse: collapse; /* Remove space between table borders */
}

/* Styling for table borders */
table, th, td {
    border: 1px solid #ddd; /* Light grey border */
}

/* Padding and text alignment for table cells */
th, td {
    padding: 0.5em; /* Add padding inside cells */
    text-align: left; /* Align text to the left */
}

/* Styling for table headers */
th {
    background-color: #4CAF50; /* Green background color */
    color: white; /* White text color */
}

/* Styling for links inside table cells */
td a {
    color: #4CAF50; /* Green text color */
    text-decoration: none; /* Remove underline */
}

/* Styling for link hover state inside table cells */
td a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Ensure that superscript and subscript display correctly */
sup, sub {
    font-size: smaller; /* Smaller font size */
    vertical-align: baseline; /* Align vertically with the surrounding text */
}

/* Specific styling for superscript elements */
sup {
    position: relative; /* Position relative to adjust vertical alignment */
    top: -0.5em; /* Move up slightly */
}

/* Specific styling for subscript elements */
sub {
    position: relative; /* Position relative to adjust vertical alignment */
    bottom: -0.5em; /* Move down slightly */
}

/* Feedback section styles */
.feedback-section {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
    flex-direction: column; /* Stack elements vertically */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    margin: 20px 0; /* Add margin above and below */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

#feedback-form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between elements */
    width: 100%;
    max-width: 400px; /* Limit the width of the form */
    text-align: center; /* Center text and elements inside the form */
    align-items: center; /* Center elements within the form */
}

#feedback-form label {
    font-weight: bold;
    width: 100%; /* Make labels full width for consistent alignment */
    text-align: left; /* Align labels to the left */
}

#feedback-form input,
#feedback-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%; /* Full width for inputs */
    max-width: 400px; /* Match the width to input fields */
    box-sizing: border-box; /* Include padding in width calculation */
}