style.css

*,
*::after,
*::before{
  box-sizing: border-box;
}

.form{
  margin-bottom: 30px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0 0 7px rgba(0,0,0,0.25)
}

.form-input{
  display: block;
  margin-bottom: 15px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  transition: border-color 0.25s;
}

.form-input.error,
.form-input.error:hover,
.form-input.error:focus{
  border: 1px solid red;
}

.form-input:hover{
  border-color: #507299;
}

.form-input:focus{
  border-color: #507299;
  outline: none;
}

.form-submit{
  width: 100%;
  height: 40px;
  padding: 0;
  background-color: #0074f9;
  border: none;
  border-radius: 3px;
  transition: background-color 0.25s;
  color: #fff;
  font-weight: 700;
}

.form-submit:hover{
  background-color: #0059bf;
}

.form-submit:focus{
  background-color: #0059bf;
  outline: none;
}

#resultContainer{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 320px;
  padding: 20px;
}

#resultContainer.error{
  color: red;
}

#resultContainer.success{
  color: green;
}