form {
    text-align: left;
}
label {
    display: block;
    margin-bottom: 10px;
    font: 16px Verdana;
}
input {
    display: block;
    margin-bottom: 0px;
    font: bold 18px Verdana;
}
/* Adjusting the form container */
.form {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items at the start of the cross axis */
    /* height: 100vh; */
    margin: 0;
    flex-wrap: wrap; /* Allowing items to wrap to the next line */
}
.description {
    font: 16px Verdana;
    text-align: left;
    margin-left:200px;
    margin-right:200px;
}    

/* Adding colored bounding boxes with rounded corners */
.yellow-bg,
.blue-bg,
.green-bg,
.purple-bg {
    flex: 0 0 calc(50% - 20px); /* Adjusted width for each box */
    background-color: yellow; /* Initial color */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-bottom: 10px; /* Adjusted margin */
    border-radius: 10px; /* Rounded corners */
}

.blue-bg {
    background-color: lightblue; /* Adjusted color */
}

.green-bg {
    background-color: lightgreen; /* Adjusted color */
}

.purple-bg {
    background-color: lavender; /* Adjusted color */
}

/* Adjusting input field size */
input[type="text"] {
    width: calc(100% - 40px); /* Adjusted width */
    height: 25px; /* Adjusted height */
    padding: 5px; /* Adjusted padding */
}

.error-message {
    color: red;
    font-family: Verdana;
}
