form.css

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;900&display=swap');
body {
  background-color: #222;
  color: #fff;
  font-family: 'Libre Franklin', sans-serif;
}
main {
  margin: 1em auto;
  max-width: 800px;
  min-width: 250px;
  padding: 1em;
}
.container {display:flex; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; justify-content: space-between; column-gap: 3em}
.item {flex-grow: 2; flex-basis: 40%}
h1 {
  border-bottom: 0.25em solid #93029c;
  padding: 0 1em;
  font-size: 3em;
  text-align: center;
  outline: 2px solid #93029c;
  color: #93029c;
  background-color: #fff;
  margin-top: 0
}
label, legend {
  font-size: 1.3em;
  font-weight: bold;
  display: block;
  margin-top: 1em;
}
legend {background-color: #fff; color: #93029c; padding: 5px; border: 1px solid #fff; margin-top: 1em; text-align: left}
fieldset {background-color: #222; margin: 2em 0; border: 1px solid #fff; min-width: 220px}
fieldset label {font-weight: normal; display: inline}
input[type="text"],
input[type="email"],
select {
  font-size: 1.3em;
  width: 100%;
  min-width: 220px;
  padding: 0.25em;
  width: 100%
}
input[type="checkbox"], input[type="radio"] {height: 25px; width: 25px; margin-right: 1em; margin-top: 1em}
button {
  font-weight: bold;
  background-color: #93029c;
  border: 4px solid #fff;
  color: #fff;
  font-size: 2em;
  padding: 0.5em;
  width: 100%;
  margin-top: 1em;
}
button:hover,
button:focus {
  background-color: #fff;
  color: #93029c;
}
.help {color: #ccc!important;}
.error, .help {margin-bottom: 2em; color: #00ff00; font-size: 1.1em; font-weight: bold}
}
.visuallyhidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important
}