form {
    font: 1em sans-serif;
    /*max-width: 320px;*/
}

p > label {
    display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
    width: 100%;
    border: 1px solid #333;
    box-sizing: border-box;
    -webkit-appearance: none;

    margin: 0;
    font-family: inherit;
    font-size: 90%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

input:invalid {

    box-shadow: 0 0 5px 1px red;
    border-color: #900;

    background-color: #fdd;
}

input:focus:invalid {
    box-shadow: none;
}


/* This is our style for the invalid fields */

/* This is the style of our error messages */

.error {
    width: 100%;
    padding: 0;

    font-size: 80%;
    color: white;
    background-color: #900;
    border-radius: 0 0 5px 5px;

    box-sizing: border-box;
}

.error.active {
    padding: 0.3em;
}

/*
body {
    font: 1em sans-serif;
    padding: 0;
    margin: 0 auto;
}

p * {
    display: block;
}

input[type="email"] {
    appearance: none;

    width: 100%;
    border: 1px solid #333;
    margin: 0;

    font-family: inherit;
    font-size: 90%;

    box-sizing: border-box;
}
*/
/* This is our style for the invalid fields */
/*
input:invalid {
    border-color: #900;
    background-color: #fdd;
}

input:focus:invalid {
    outline: none;
}
*/
/* This is the style of our error messages */
/*
.error {
    width: 100%;
    padding: 0;

    font-size: 80%;
    color: white;
    background-color: #900;
    border-radius: 0 0 5px 5px;

    box-sizing: border-box;
}

.error.active {
    padding: 0.3em;
}
*/