.input-form
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 4fr;
    margin: 0 auto;
    width: 75%;
    align-items: center;
    padding-bottom: 5em;
}

#contact-columns
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
    column-gap: 20px;
    border: 2px solid #AEA77D;
    padding: 2em;
    margin-top: 5em;
    margin-bottom: 2em;
}

.input-area
{
    display: flex;
    flex-direction: column;
    padding: 0.25em;
}

.input-area.error
{
    border: 1px solid rgba(236, 104, 104, 1);
    border-left: 1em solid rgba(236, 104, 104, 1);
}

.input-area:has(#user-role), .error:has(#user-role)
{
    grid-template-rows: 1fr 0.5fr;
}

span[id$='error']
{
    font-size: 0.75em;
    padding-top: 0.75em;
}

.column
{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

.details
{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    background-color: #999999;
    color: white;
    padding: 2em;
}

label
{
    font-size: 1em;
    font-weight: bold;
}

.label
{
    font-size: 1.25em;
    font-weight: bold;
}

.form
{
    font-size: 1.15em;
}

.form input, .form textarea
{
    font-size: 1.05em;
}

.form textarea
{
    height: 5em;
}

#contact-submit
{
    margin: 0 auto;
}