@font-face {
  font-family: "RobotoBold-1";
  src: url("./assets/fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "RobotoBold-2";
  src: url("./assets/fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "RobotoRegular-2";
  src: url("./assets/fonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: "RobotoBold-3";
  src: url("./assets/fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "RobotoBold-mobile";
  src: url("./assets/fonts/Roboto-Bold.ttf");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  min-height: 100vh;
  place-content: center;
  background-color: hsl(234, 29%, 20%);
}

main {
  margin-inline: auto;
  max-inline-size: 375px;
}

section {
  background-color: hsl(0, 0%, 100%);
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

picture {
  order: 1;
}

.newsletter-img {
  max-inline-size: 100%;
  block-size: auto;
}

.newsletter-body {
  padding-block: 40px;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.newsletter-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.newsletter-title {
  font-family: "RobotoBold-mobile";
  font-weight: 700;
  line-height: 100%;
  font-size: 40px;
  letter-spacing: 0px;
}

.newsletter-description {
  font-family: "RobotoRegular-2";
  font-weight: 400;
  line-height: 150%;
  font-size: 16px;
  letter-spacing: 0px;
}

.benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: "RobotoRegular-2";
  font-weight: 400;
  line-height: 150%;
  font-size: 16px;
  letter-spacing: 0px;
}

.form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.input-label {
  color: hsl(234, 29%, 20%);
  font-family: "RobotoBold-3";
  font-size: 12px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0px;
}

.input-email {
  display: block;
  margin-block-start: 8px;
  width: 100%;
  padding-inline: 24px;
  padding-block: 16px;
  border-radius: 8px;
  border: 1px solid hsl(0, 0%, 58%);
}

.input-email.error {
  background-color: rgba(255, 0, 0, 0.2);
  color: hsl(4, 100%, 67%);
}

.input-email::placeholder {
  color: hsl(0, 0%, 58%);
  font-family: "RobotoRegular-2";
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
}

.input-email:focus {
  border: 1px solid hsl(234, 29%, 20%);
  color: hsl(234, 29%, 20%);
}

.btn-submit {
  background: hsl(234, 29%, 20%);
  padding-inline: 40px;
  padding-block: 16px;
  border-radius: 8px;
  border: none;
  color: hsl(0, 0%, 100%);
  font-family: "RobotoBold-2";
  font-weight: 700;
  line-height: 150%;
  font-size: 16px;
  letter-spacing: 0px;
  display: block;
  width: 100%;
  cursor: pointer;
}

.error-message {
  display: none;
}

.error-message.open {
  display: block;
  color: hsl(4, 100%, 67%);
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0px;
  font-family: "RobotoBold-3";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.modal {
  display: grid;
  min-height: 100vh;
  place-content: center;
  display: none;
}

.modal.open {
  background-color: hsl(234, 29%, 20%);
  display: grid;
  position: fixed;
  z-index: 5;
  inset: 0;
}

.modal-body {
  display: grid;
  padding-block: 72px;
  max-inline-size: 375px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  padding-inline: 24px;
}

.modal-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.modal-title {
  color: hsl(234, 29%, 20%);
  font-family: "RobotoBold-mobile";
  font-weight: 700;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0px;
}

.modal-bottom {
  align-self: self-end;
}

.modal-description {
  color: hsl(234, 29%, 20%);
  font-family: "RobotoRegular-2";
  line-height: 150%;
  font-size: 16px;
  letter-spacing: 0px;
}

.modal-btn {
  background: hsl(234, 29%, 20%);
  padding-inline: 40px;
  padding-block: 16px;
  border-radius: 8px;
  border: none;
  color: hsl(0, 0%, 100%);
  font-family: "RobotoBold-2";
  font-weight: 700;
  line-height: 150%;
  font-size: 16px;
  letter-spacing: 0px;
  display: block;
  width: 100%;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  main {
    max-inline-size: 608px;
  }
  section {
    border-radius: 36px;
    padding-inline: 40px;
    padding-block: 40px;
  }
  .newsletter-img {
    width: 100%;
    border-radius: 16px;
  }
  .newsletter-body {
    padding-block-start: 40px;
    padding-inline: 0px;
    padding-block-end: 0px;
    gap: 24px;
  }
  .newsletter-title {
    font-size: 56px;
  }
  .form {
    gap: 16px;
  }
  .modal-body {
    max-inline-size: 504px;
    padding-inline: 64px;
    padding-block: 64px;
    grid-template-rows: unset;
    gap: 32px;
  }
  .modal-title {
    font-size: 56px;
  }
}
@media screen and (min-width: 1440px) {
  main {
    max-inline-size: 904px;
  }
  section {
    border-radius: 36px;
    padding-inline: 32px;
    padding-block: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .newsletter-body {
    gap: 24px;
    padding-block-start: 0px;
  }
  .newsletter-top {
    gap: 32px;
  }
  .btn-submit:active {
    background: linear-gradient(hsl(15, 100%, 61%), hsl(346, 100%, 66%));
    padding-inline: 40px;
    padding-block: 16px;
    border-radius: 8px;
    border: none;
    color: hsl(0, 0%, 100%);
    font-family: "RobotoBold-2";
    font-weight: 700;
    line-height: 150%;
    font-size: 16px;
    letter-spacing: 0px;
    display: block;
    width: 100%;
    cursor: pointer;
  }
  .form {
    gap: 24px;
  }
  .modal-btn:active {
    background: linear-gradient(hsl(15, 100%, 61%), hsl(346, 100%, 66%));
    padding-inline: 40px;
    padding-block: 16px;
    border-radius: 8px;
    border: none;
    color: hsl(0, 0%, 100%);
    font-family: "RobotoBold-2";
    font-weight: 700;
    line-height: 150%;
    font-size: 16px;
    letter-spacing: 0px;
    display: block;
    width: 100%;
    cursor: pointer;
    box-shadow: 5px 6px 57px -13px rgb(171, 11, 0);
  }
}

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