@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400&display=swap');

body {
  background-color: black;
  font-family: 'Inter', sans-serif;
}

.wrap {
  margin: 4% auto 20% auto;
  max-width: 90rem;
}

img {
  width: 100%;
  height: auto;
}

.form {
  margin: 0 auto 8rem auto;
  max-width: 24rem;
}

.message {
  color: white;
  margin: 1.25rem 0;
  font: 300 1rem/1.1% Inter;
}

.email {
  display: flex;
}

.email input[type="email"] {
  border-radius: 2px;
  padding: 0.5rem;
  border: solid 1px #E0E0E0;
  background: #ddd;
  flex: 4;
  font: 300 1rem/1.1% Inter;
}

.email input[type="email"]::placeholder {
  color: #949494;
  font: 300 1rem Inter;
}

.email input[type="email"]:focus,
.email input[type="submit"]:focus {
  outline: solid .1rem #0000FF;
}

.email input[type="submit"] {
  flex: 1;
  border-radius: 2px;
  padding: 0.5rem;
  background: #0000FF;
  color: white;
  border: none;
  margin-left: 0.5rem;
  cursor: pointer;
  font: 300 1rem/1.1% Inter;
  -webkit-appearance: none;
}

.response {
  margin: 1.5rem 0;
  font: 300 1rem/1.1% Inter;
}

#error-response {
  color: #FF0000;
}

#success-response {
  color: #00c900;
}

@media only screen and (max-width: 414px) {
  .form {
    max-width: 75%;    
  }

  .message {
    margin: 1rem 0;
    font: 300 .75rem/0 Inter;
  }

  .email input[type="email"] {
    font: 300 .75rem/0 Inter;
  }
  
  .email input[type="email"]::placeholder {
    font: 300 .75rem/0 Inter;
  }
  
  .email input[type="submit"] {
    font: 300 .75rem/0 Inter;
  }
  
  .response {
    font: 300 .75rem/0 Inter;
  }
}