body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333; /* Dark grey background */
    color: #fff; /* Light font for better contrast on dark background */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.title-container {
    text-align: center;
    padding: 2vw;
    margin-bottom: 2vh; /* Adds some space between the title and the form, relative to viewport */
}

.form-container {
    width: 80vw; /* Adjusts width relative to the viewport width */
    max-width: 500px; /* Ensures the form doesn't get too wide on larger screens */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

form {
    padding: 4vw; /* Padding scales with the viewport width */
    display: flex;
    flex-direction: column;
}

.input-container {
    margin-bottom: 2vh;
}

label {
    color: black;
    display: block;
    margin-bottom: 1vh;
}

input[type="date"],
input[type="text"] {
    padding: 1.5vw; /* Makes padding responsive */
    margin-bottom: 2vh;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 3vw); /* Adjusts width to ensure it accounts for padding */
}

.button-container {
    text-align: center;
    margin-top: 2vh;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 1.5vw 3vw; /* Responsive padding */
    font-size: 1.2rem; /* Remains consistent but could also use vw for scalability */
    border-radius: 4px;
    cursor: pointer;
    width: 60%; /* Adjust based on preference */
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 2vh;
    font-size: 1.2rem; /* Fixed size but could also use vw */
    font-weight: bold;
    text-align: center;
    color: #767975;
}

@media (max-width: 600px) {
    .form-container, .title-container {
        width: 95vw; /* More width on smaller screens */
    }

    button {
        width: 80%; /* Larger button on smaller screens */
    }

    form {
        padding: 5vw; /* Slightly more padding on smaller screens */
    }
}