@import url(./reset.css);

:root {
  --Red: hsl(4, 100%, 67%);
  --Blue800: hsl(234, 29%, 20%);
  --Blue700: hsl(235, 18%, 26%);
  --Grey: hsl(0, 0%, 58%);
}

html,
body {
  font-family: Roboto;
  font-weight: 400;
  font-size: 1rem;
  line-height: 24px;
  width: 100%;
  height: 100%;
  color: var(--Blue700);
  background-color: var(--Blue800);
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 15px;
}

.card {
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  border-radius: 35px;
  background-color: #fff;
}

.form-card {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  max-width: 928px;
  max-height: 640px;
}

.card-image-container {
  margin-left: 15px;
}

.card-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

.card-about-subscribe {
  margin-top: 72px;
  margin-left: 40px;
  max-width: 375px;
}

.card-headline {
  font-size: 3.5rem;
  line-height: 3.5rem;
  color: var(--Blue800);
}

.card-paragraph {
  margin: 1.25rem 0;
}

.card-benefits-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.benefits-list {
  margin: 5px 0;
}

.icon-list {
  width: 21px;
  height: 21px;
  margin-right: 15px;
}

.form-email-container {
  margin-top: 37px;
}

.email-label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 12px 0;
}

.error {
  color: var(--Red);
}

.input-email {
  display: block;
  width: 100%;
  padding: 18px 23px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid var(--Grey);
}

.input-email.error {
  border-color: var(--Red);
  background-color: hsla(4, 100%, 67%, 0.1);
}

.input-email:hover {
  cursor: pointer;
}

.submit-button {
  width: 100%;
  padding: 20px;
  font-weight: 700;
  border-radius: 8px;
  color: #fff;
  background-color: var(--Blue800);
}

.submit-button:hover {
  background: linear-gradient(90deg, #ff4972, #ff693e);
}

.message-card {
  max-width: 504px;
  max-height: 520px;
}

.wrapper-message {
  margin: 40px;
}

.icon-success {
  width: 64px;
  margin-top: 5px;
  margin-bottom: 35px;
}

.message-card .card-paragraph {
  margin-top: 24px;
  margin-bottom: 0;
}

.send-email {
  font-weight: 700;
}

.message-card .submit-button {
  margin-top: 40px;
}

.hidden {
  display: none;
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

@media only screen and (min-width: 769px) and (max-width: 885px) {
  .card-about-subscribe {
    margin-top: 42px;
    margin-left: 20px;
  }
}

@media only screen and (max-width: 768px) {
  body,
  footer {
    background-color: #fff;
  }

  .main {
    padding: 0;
  }

  .card {
    margin: 0;
    padding: 10px;
    padding-top: 0;
    border-radius: 0;
  }

  .form-card {
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
  }

  .card-image-container {
    margin: auto;
  }

  .card-about-subscribe {
    margin: 40px auto 0;
    max-width: 375px;
  }

  .card-headline {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

  .card-paragraph {
    margin: 1.5rem 0;
  }

  .message-card {
    max-width: 100%;
    max-height: 100%;
  }

  .wrapper-message {
    margin: 0;
  }
}