/* define variables for the primary colors */
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  font-family: verdana;
}

form {
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  padding: 2em;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.content > div:first-child {
  background-image: url(img/fire.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}

form > input:last-child, main {
  margin-left: auto;
  margin-right: auto;
}

form > input:last-child,
textarea {
  margin-top: 2em;
}

form > input:last-child {
  width: 80px;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content > div {
  width: 50%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

input {
  margin-bottom: 1.5em;
  border-radius: 5px;
  padding: 0.5em;
  border-width: 4px;
}

h2 {
  text-align: center;
}

.radio {
  display: flex;
  flex-direction: row;
}

.radio > input {
  margin-left: 1em;
}

input:valid {
  border-color: green;
}

/* selector that matches element some of the time,
when the prior selector does NOT match. */
input:invalid, .invalid {
  border-color: red;
}

/* selector that matches element some of the time,
whether the input is valid or invalid */
input:focus {
  /* alternative declaration */
  border-color: yellow;
}

/*# sourceMappingURL=form.css.map */