form {
  background-color: var(--ltfore);
  max-width: 80%;
  padding: 20px;
  margin: auto;
  border-radius: 5px;
}

formheading {
  display: block;
  color: var(--textcol);
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 15px;
}

formtext {
  display: block;
  color: var(--textcol);
  text-align: center;
  margin-bottom: 15px;
}

formpara {
  display: block;
  color: var(--textcol);
  margin-bottom: 15px;
}

input, select, textarea {
  display: block;
  background-color: #FFF;
  border-radius: 5px;
  height: 30px;
  margin: auto;
  padding: 0px 5px 0px 5px;
  margin-bottom: 10px;
  font-size: 1.2em;
}

textarea {
  height: auto;
}

.optional {
  background-color: #FFF;
}

.invalid {
  background-color: #FAA;
}

.valid {
  background-color: #AFA;
}

.formerror {
  display: none;
  font-size: 1em;
  line-height: 2em;
  margin-bottom: 10px;
  color: red;
  text-align: center;
}

button {
  display: block;
  margin: auto;
  margin-bottom: 20px;
  color: var(--bgcolor);
  font-size: 1.2em;
  padding: 5px 20px 5px 20px;
  background-image: linear-gradient(var(--forecolor), var(--ltfore));
  border-radius: 10px;
  text-align: center;
}