/* Basic reset */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 20;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-family: 'Arial', sans-serif; /* Sets a clean, modern typeface */
    background: #1c1c1c; /* Light grey background for a subtle look */
    justify-content: center;
    align-items: center;        /* Center-align items horizontally */

}

/* Center content and restrict its width for readability */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

h1 {
    color: #e8e8e8; /* Dark grey for text */
    margin: 20px 0;
    text-align: center;
}

h2 {
    color: #e8e8e8; /* Dark grey for text */
    margin: 20px 0;
    text-align: center;
    font-size: 12px; /* Increased font size for better visibility */

}

p {
    color: #808080; /* Grey text for less emphasis */
    text-align: center;
}

/* Button Styles */
.button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: background-color 0.3s;
}

.button-green {
    background-color: #228B22; /* Forest green background */
    color: white;
    font-size: 16px; /* Increased font size for better visibility */

}

.button-gray {
    background-color: #808080; /* Gray background */
    color: white; /* White text for contrast */
}

.button:hover {
    background-color: #1e7a1e; /* Slightly darker green on hover */
}

.button:disabled {
    background-color: #cccccc; /* Light grey to indicate disabled */
    color: #666666; /* Darker grey text to maintain contrast but show it's disabled */
    cursor: not-allowed; /* Cursor shows the element is not interactable */
    opacity: 0.5; /* Partial transparency to visually show the button is disabled */
}

/* Link Styles */
a {
    color: #228B22; /* Forest green links for consistency */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* Form Styles */
form {
    margin-top: 20px;
}

/* Input and Textarea Styles */
input[type="text"], input[type="date"], input[type="email"], input[type="password"], textarea {
    width: 80%; /* Responsive width */
    max-width: 500px; /* Maximum width for larger screens */
    padding: 10px;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px;
    background-color: #fff; /* White background to maintain cleanliness */
    color: #333; /* Dark grey text color for readability */
    font-size: 16px;
    margin-bottom: 20px;
}

input[type="submit"] {
    background-color: #228B22; /* Forest green background */
    color: white; /* White text for contrast */
    font-size: 16px;
    width: auto; /* Auto width based on content */
}

input[type="text"]:focus, input[type="date"]:focus, textarea:focus {
    border-color: #228B22; /* Highlight focus with theme green color */
    outline: none; /* Remove default focus outline to use custom border color */
}

/* Table Styles */
table {
    width: 90%; /* Responsive width, centered in view */
    margin: 0px; /* Center table horizontally and add spacing */
    border-collapse: collapse; /* Collapse borders */
}

th, td {
    border: 1px solid #ccc; /* Light grey border for clarity */
    padding: 8px; /* Padding for table cells */
    text-align: left; /* Align text to the left */
    color: #e8e8e8; /* Light text color for readability */
}

th {
    background-color: #333; /* Dark background for headers */
}

tr:nth-child(even) {
    background-color: #2c2c2c; /* Zebra striping for rows */
}

tr:hover {
    background-color: #3e3e3e; /* Darker grey background on row hover */
}

label {
    display: block;
    margin-bottom: 5px;
    margin-top: 20px;
    color: #e8e8e8; /* Dark grey for text */

}

/* Centered Box Styles */
.centered-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: auto;
    padding: 10px;
    width: 95%;
    min-width: 100px;
    max-width: 1000px;
    min-height: 50px;
    background-color: #1c1c1c;
    box-sizing: border-box;
}