body {
    margin-top: 4em;
}
#button-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 3px;
    padding-left: 3px;
    background-color: #aaaaaa;
    border-bottom: 1px solid #888888;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-header {
    display: none;
}

#form-data {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 4em;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
    overflow: hidden;
    height: auto;
    background-color: #eeeeee;
}

form :invalid {
  box-shadow: 0 0 5px 1px red;
}

form :focus:invalid {
  outline: none;
}

form fieldset:invalid {
    box-shadow: none;
}

#button-header.valid {
    background-color: #a8e8a8;
}

body {
    margin-top: 4em;
}
#button-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 3px;
    padding-left: 3px;
    background-color: #aaaaaa;
    border-bottom: 1px solid #888888;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-header {
    display: none;
}

#form-data {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 4em;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
    overflow: hidden;
    height: auto;
    background-color: #eeeeee;
}

form :invalid {
    box-shadow: 0 0 5px 1px #e86060;
}

form :focus:invalid {
  outline: none;
}

form fieldset:invalid {
    box-shadow: none;
}

#button-header.valid {
    background-color: #a8e8a8;
}

Reduce saturation of invalid field highlighting
Reduce saturation of invalid field highlighting

Reducing the saturation retains the desired effect of drawing the
user's eye to the remaining fields required to make the form valid
without being quite as distracting when first viewing a form with a
lot of invalid fields.
