body {
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  font: 16px/26px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.container {
  max-width: 640px;
  width: 96%;
  margin: 0 auto;
  padding: 4rem 0;
  text-align: center;
}

.container > img {
  margin-bottom: 3rem;
}

.container p {
  font-size: 17px;
  opacity: .5;
  font-weight: 300;
}

.container h1 {
  margin: 0 0 2rem 0;
  line-height: 1em;
  font-weight: 100;
}

.container form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.container input:first-of-type {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 10px 20px;
  font: inherit;
  font-weight: 300;
  border-radius: 4px;
  border: 0;
  outline: none;
  box-shadow: 0 4px 13px rgba(0, 0, 0, .1);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.container input:first-of-type:focus {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.container input:last-child {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  border-radius: 4px;
  border: 0;
  outline: none;
  color: white;
  font: inherit;
  font-weight: 300;
  background: #e94e77;
  padding: 10px 20px;
  margin-left: 10px;
  box-shadow: 0 4px 13px rgba(0, 0, 0, .15);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  cursor: pointer;
  -webkit-appearance: none;
}
.container input:last-child:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.btn {
  background: #1f9bcf;
  padding: 7px 20px;
  margin-top: 2rem;
  display: inline-block;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 4px 13px rgba(0, 0, 0, .15);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.btn:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.btn span {
  opacity: .5;
}