/* General styles with added padding */
body {
    font-family: Arial, sans-serif; /* Sets a nice, readable font */
    background-color: #f4f4f4; /* Light grey background */
    margin: 0;
    padding: 20px; /* Adds padding around the content of the entire page */
    color: #333; /* Dark grey text */
}

.container {
    width: 80%;
    max-width: 600px; /* Sets a maximum width for the container */
    margin: 0 auto; /* Centers the container */
    padding: 20px; /* Adds padding inside the container */
    background-color: #fff; /* White background for the content area */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow around the container */
}

h1 {
    color: #026e00; /* A shade of green for headings */
}

p {
    line-height: 1.6; /* Makes text more readable */
}

/* Navigation styling */
.nav {
    background-color: #333; /* Dark background for the nav bar */
    color: #fff; /* White text */
    padding: 10px 20px; /* Top and bottom padding, larger side padding */
    text-align: center;
}

.nav a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
}

/* Form styling */
input[type="text"], input[type="password"], input[type="email"], textarea {
    width: 100%; /* Full width */
    max-width: 400px; /* Limiting max width */
    padding: 8px;
    margin: 10px 0;
    box-sizing: border-box; /* Includes padding in width */
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px; /* Consistent height for all input fields */
}

.input-password {
    max-width: 200px; /* Restricting maximum width */
}

button {
    background-color: #026e00; /* Green background */
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    height: 40px; /* Matching input height for visual consistency */
}

button:hover {
    background-color: #024e00; /* Darker green on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container, .nav {
        width: 100%;
        padding: 0 10px; /* Adds padding to the sides on small devices */
    }

    body {
        font-size: 16px; /* Larger font size for readability on small devices */
        padding: 10px; /* Less padding on small devices */
    }

    h1 {
        font-size: 24px; /* Larger heading for small devices */
    }
}