.contact-form {
  /* background: white; */
  width: 90%;
  max-width: 800px;
  margin: 50px auto;
  font-family: Calibri, Arial, sans-serif;
  padding: 20px;
}
h1 {
  color: rgb(44, 46, 49);
  text-align: center;
  margin: 20px 0;
  font-weight: 800;
  font-size: 36px;
  line-height: 48px;
}
p {
  text-align: center;
  margin-bottom: 20px;
}
label {
  display: block;
  margin: 1em 0 0.2em;
}
/* single-line text, checkbox, and button */
input,
select,
textarea {
  display: block;
  width: 100%;
  padding: 0.3em;
  font-size: 20px;
  background-color: #fbfbfb;
  border: solid 1px #ccc;
  border-radius: 26px;
  resize: vertical;
}
textarea {
  min-height: 180px;
}
/* select {
  color: indigo;
}
option {
  color: blue;
  background: lavenderBlush;
} */
input[type="checkbox"] {
  display: inline;
  width: auto;
  color: red;
}

input[type="submit"] {
  background: var(--blue);
  margin: 1em 0 0;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease-out;
}

/* input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
  background: lavenderBlush;
} */

/* hover and focus states */
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: rgb(39, 212, 0);
  outline: none;
}

@media screen and (min-width: 600px) {
  /*  make the form 2 columns */
  form:after {
    content: "";
    display: block;
    clear: both;
  }
  .column {
    width: 50%;
    padding: 1em;
    float: left;
  }
}