body {
    background-color: #f8f9fa; /* Light gray background */
    background-image: linear-gradient(to bottom, #808000, #556B2F); /* Olive green gradient */
    font-family: 'Arial', sans-serif;
    color: #333; /* Adding a default text color for better readability on gradient */
}

.container {
    max-width: 600px; /* Max width for the calculator */
}

.card {
    border: none; /* Remove default card border */
    border-radius: 10px; /* Rounded corners for the card */
    background-color: #ffffff; /* White background for the card */
}

#results {
    background-color: #eef2f7; /* Slightly different background for results area */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px; /* Ensure space above results */
}

#results p {
    margin-bottom: 0.5rem; /* Space between result lines */
    font-size: 1.1rem; /* Slightly larger font for results */
}

#results .fs-5 { /* Bootstrap class for font size 5 */
    font-size: 1.25rem !important; /* Ensure this is applied */
}

.form-label {
    font-weight: 500; /* Medium weight for labels */
}

/* Custom styling for invalid input fields */
.form-control.is-invalid {
    border-color: #dc3545; /* Bootstrap danger color */
    /* padding-right: calc(1.5em + .75rem); You might need this if using background images for validation icons */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5zM6 8.2h.01L6 8.21z'/%3e%3c/svg%3e"); */
    /* background-repeat: no-repeat; */
    /* background-position: right calc(.375em + .1875rem) center; */
    /* background-size: calc(.75em + .375rem) calc(.75em + .375rem); */
}
#errorMessages ul {
    margin-bottom: 0; /* Remove default bottom margin from ul in alert */
    padding-left: 20px; /* Indent list items */
}