static/styles.css

/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f4f8; /* Light background color */
}

/* App Window */
.app-window {
    max-width: 800px; /* Set maximum width */
    margin: auto; /* Center align */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    background-color: #ffffff; /* White background for content */
    padding: 2rem; /* Padding for content */
}

/* Header Section */
.bg-primary {
    background-color: #007bff !important; /* Primary blue color */
}

/* Logo Styles */
.logo {
    width: 120px; /* Adjust logo size */
    height: auto; /* Maintain aspect ratio */
}

/* Form Styles */
h2 {
    color: #333; /* Darker text for headings */
    margin-bottom: 1.5rem; /* Spacing below heading */
}

.form-group {
    margin-bottom: 1.5rem; /* Spacing between form groups */
}

.col-form-label {
    font-weight: bold; /* Bold labels */
    color: #0056b3; /* Dark blue for labels */
}

/* Input and Select Styles */
input.form-control, 
select.form-control {
    border: 2px solid #ced4da; /* Thicker border for input and select */
    border-radius: 0.25rem; /* Rounded input corners */
    transition: border-color 0.3s, box-shadow 0.3s; /* Transition for border color and shadow */
    padding: 0.5rem; /* Add padding to inputs */
}

input.form-control:focus, 
select.form-control:focus {
    border-color: #28a745; /* Green border on focus */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green shadow effect on focus */
}

/* Button Styles */
.btn-primary {
    background-color: #28a745; /* Green button color */
    border: none; /* Remove border */
    color: #ffffff; /* White text color */
    transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
}

.btn-primary:hover {
    background-color: #218838; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

/* Result Display Styles */
.prediction-result {
    background-color: #e9f7ef; /* Light green background */
    border-left: 5px solid #28a745; /* Green left border */
    padding: 1rem; /* Padding for the result box */
    border-radius: 5px; /* Rounded corners */
}

.result-title {
    color: #155724; /* Dark green for title */
    font-weight: bold; /* Bold title */
}

.result-value {
    font-size: 1.5rem; /* Larger font for result value */
    color: #155724; /* Dark green for result value */
}

/* Footer Styles */
footer {
    margin-top: 20px; /* Space above the footer */
    background-color: #007bff; /* Footer background */
    padding: 1rem 0; /* Padding for footer */
    color: white; /* White text color for footer */
}

footer p {
    margin: 0; /* Remove margin */
}

/* Responsive Styles */
@media (max-width: 576px) {
    .app-window {
        padding: 1rem; /* Less padding on smaller screens */
    }
    
    .logo {
        width: 100px; /* Smaller logo for mobile */
    }
    
    h2 {
        font-size: 1.5rem; /* Smaller heading size for mobile */
    }
}