body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Use min-height to allow content to expand */
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(to right, #f4f4f9, #eaeaf3);
    color: #222 !important;
    text-align: center;
}

h1,
p {
    text-align: center;
}

.main-title {
    font-size: 3.0em;
    /* Adjust this value as needed */
}

form {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Reduced gap to bring elements closer */
    align-items: center;
    width: 90%;
    /* Adjust width for better responsiveness */
    max-width: 600px;
    /* Increase max width for larger screens */
    padding: 20px;
    background-color: transparent;
    /* Add a background to the form for better visual separation */
    border-radius: 8px;
    box-shadow: none;
    /* Add a subtle shadow */
}

.input-type-selector {
    display: flex;
    /* Arrange the child divs in a row */
    gap: 20px;
    /* Space between the divs */
    align-items: center;
    /* Vertically align the divs */
    margin-bottom: 0;
    /* Reduced margin below radio buttons */
}

.input-type-selector div {
    display: inline-block;
    /* Treat each div as an inline-level block */
    margin-right: 15px;
    /* Add some space between each radio/label group */
}

.input-type-selector div label {
    font-weight: bold;
    margin-left: 5px;
    /* Add space between the radio button and label */
}

.input-type-selector div input[type="radio"] {
    /* You can add specific styling for the radio button if needed */
}

.input-type-selector label {
    font-weight: bold;
    /* Labels are inline by default, so no need to change display */
}

.input-group {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    /* Adjust max width for input elements */
    flex-wrap: wrap;
    margin-top: 0px;
    /* Reduced margin above buttons */
}

textarea,
input[type="text"] {
    /* Apply styles to both textarea and text input */
    width: 100%;
    padding: 15px;
    /* Increase padding for a bigger input area */
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 16px;
    transition: border-color 0.3s ease-in-out;
    box-sizing: border-box;
    /* Ensure padding doesn't increase the overall width */
    margin-bottom: 0px;
    /* Reduced margin below text input/textarea */
}

textarea:focus,
input[type="text"]:focus {
    border-color: #4A90E2;
    outline: none;
    /* Remove default focus outline */
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
    /* Add a subtle focus shadow */
}

#job_url {
    /* Inherits styles from input[type="text"] */
}

button:hover,
input[type="submit"],
input[type="button"],
button {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    padding: 12px 24px;
    /* Increase padding for bigger buttons */
    min-width: 120px;
    border-radius: 8px;
    /* Make buttons more rounded */
    border: none;
    /* Remove default button border */
    font-size: 16px;
    margin-bottom: 0px;
    /* Added margin-bottom to buttons for spacing */
}

input[type="submit"],
input[type="button"],
button {
    background-color: #4A90E2;
    color: white;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background-color: #357ABD;
    transform: scale(1.03);
    /* Slightly scale up on hover for a smoother effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow on hover */
}

#result {
    background: transparent;
    padding: 15px;
    /* Increase padding for better spacing */
    border-radius: 8px;
    min-height: 100px;
    max-height: 400px;
    /* Allow more space for results */
    overflow-y: auto;
    margin-top: 10px;
    /* Reduced margin above result */
    width: 90%;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for the result area */
}

#result p {
    background: #eaeaf3;
    padding: 10px;
    /* Increase padding for result paragraphs */
    border-radius: 6px;
    margin: 5px 0;
    /* Reduced vertical margin for result paragraphs */
}

/* style.css */

/* ... other styles ... */

.analysis-result {
    margin-top: 10px;
    /* Reduced margin for analysis result */
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1em;
}

.fraud-result {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    /* Reduced margin for fraud result */
}

.legit-result {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    /* Reduced margin for legit result */
}

.error-message {
    background-color: #ffeeba;
    color: #85640c;
    border: 1px solid #ffed4a;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    /* Reduced margin for error message */
}

.disclaimer {
    font-size: 0.8em;
    color: #777;
    text-align: center;
    margin-top: 15px;
    /* Reduced margin for disclaimer */
}