form {
    background: var(--background-light);
    padding: .5rem 1rem 2rem;
    border-radius: .5rem;
}

label{
    margin: .5rem 0 .2rem;
    display: block;
}

input[type=text], textarea {
    border: 2px solid var(--background-light);
    padding: .5rem .2rem;
    border-radius: .2rem;
    background: var(--white);
    width: 100%;
    margin-bottom: 1rem;
    outline: 0;
}

input[type=text]:focus, textarea:focus {
    border-color: var(--primary-color);
}

input:focus:required:invalid, textarea:focus:required:invalid  {
    border-color: var(--error-color);
}

form button {
    background: var(--primary-color-light);
    color: var(--white);
    padding: .5rem 2rem;
    border: none;
    border-radius: .2rem;
    font-weight: bold;
}
form button:hover{
    background: var(--primary-color);
}

form button:active{
    background: var(--primary-color-dark);
}

form .error {
    color: var(--error-color)
}

form .actions{
    margin-top: 2rem;
}

.input.checkbox {
    margin-top: 1rem;
}