@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap");
* {
  box-sizing: border-box; }

body {
  background-color: #fff5f5;
  opacity: 0.9;
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif; }

.header-container {
  display: flex;
  justify-content: flex-start;
  padding: 2em; }
  .header-container .logo {
    width: 115px; }

.image-container {
  position: relative; }
  .image-container .hero-mobile {
    width: 100%;
    display: block; }
  .image-container .hero-desktop {
    width: 100%;
    display: none; }

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1em 2em; }
  .info-container h1 {
    font-size: 2.7rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin-bottom: 0.4em;
    color: #413a3a; }
    .info-container h1 span {
      font-weight: 300;
      color: #ce9797; }
  .info-container p {
    font-size: 1rem;
    letter-spacing: 0.8px;
    margin: 0;
    color: #ce9797;
    font-weight: 600;
    opacity: 0.85; }

.email-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em auto 3em auto;
  position: relative; }
  .email-container .email {
    width: 80%;
    height: 45px;
    border-radius: 20px;
    padding: 0.5em 1em;
    font-size: 0.9rem;
    color: #ce9797;
    font-weight: 600;
    background-color: transparent;
    border: 1px solid rgba(206, 151, 151, 0.651); }
  .email-container .error {
    position: absolute;
    right: 31%;
    visibility: hidden; }
  .email-container .button-container {
    position: absolute;
    background-color: #ee8c8c;
    width: 60px;
    height: 45px;
    text-align: center;
    border-radius: 43%;
    padding: 0.7em;
    right: 10%;
    opacity: 0.9;
    cursor: pointer; }
    .email-container .button-container:hover {
      background-color: #f6c1c1; }
    .email-container .button-container .button {
      width: 14px; }
  .email-container small {
    position: absolute;
    bottom: -45%;
    left: 12%;
    font-size: 0.8rem;
    visibility: hidden; }
    .email-container small.success {
      color: green;
      visibility: visible; }
    .email-container small.error {
      color: red;
      visibility: visible; }

footer {
  text-align: center;
  color: lightgray;
  margin-top: 4em; }
  footer a {
    color: lightblue; }

@media screen and (min-width: 600px) and (max-width: 800px) {
  .header-container {
    padding: 2.2em; }
    .header-container .logo {
      width: 140px; }
  .info-container {
    padding: 1em 3em; }
    .info-container h1 {
      font-size: 3.5rem;
      letter-spacing: 9px; }
    .info-container p {
      font-size: 1.1rem; }
  .email-container .email {
    width: 70%;
    height: 55px;
    font-size: 0.95rem; }
  .email-container .error {
    position: absolute;
    right: 25%;
    width: 30px; }
  .email-container .button-container {
    height: 54px;
    padding: 0.9em;
    right: 13.8%; }
    .email-container .button-container .button {
      width: 16px; }
  .email-container small {
    bottom: -47%;
    left: 16%;
    font-size: 0.95rem; } }

@media screen and (min-width: 801px) and (max-width: 1120px) {
  body {
    height: 100vh;
    width: 100%; }
    body .main-container {
      background-image: url("../images/bg-pattern-desktop.svg");
      background-color: #fff5f5;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      grid-template-columns: 50% 10% auto;
      grid-template-rows: 20% 30% 30% 20%;
      grid-template-areas: 'logo space img'
 'info space img'
 'email space img'
 'copyr space img';
      border-radius: 10px; }
  .header-container {
    grid-area: logo;
    padding-top: 4em;
    margin-left: 5em;
    align-items: flex-start; }
    .header-container .logo {
      width: 150px; }
  .info-container {
    grid-area: info;
    align-items: flex-start;
    margin-left: 5em; }
    .info-container h1 {
      text-align: left;
      font-size: 4rem;
      line-height: 65px; }
    .info-container p {
      font-size: 0.9rem;
      text-align: left;
      line-height: 25px; }
  .email-container {
    grid-area: email;
    margin-left: 7em; }
    .email-container .email {
      width: 35vw;
      height: 50px;
      padding: 0.5em 2em; }
    .email-container .error {
      right: 18%; }
    .email-container .button-container {
      width: 60px;
      height: 49px;
      padding: 0.7em;
      right: -4%;
      opacity: 0.9;
      cursor: pointer; }
    .email-container small {
      left: 4%;
      font-size: 0.85rem; }
  .image-container {
    grid-area: img; }
    .image-container .hero-mobile {
      display: none; }
    .image-container .hero-desktop {
      display: block;
      height: 100vh; }
  .footer {
    grid-area: copyr;
    margin-bottom: 1em; } }

@media screen and (min-width: 1121px) {
  body {
    height: 100vh;
    width: 100%; }
    body .main-container {
      background-image: url("../images/bg-pattern-desktop.svg");
      background-color: #fff5f5;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      grid-template-columns: 55% 5% auto;
      grid-template-rows: 20% 30% 30% 20%;
      grid-template-areas: 'logo space img'
 'info space img'
 'email space img'
 'copyr space img';
      border-radius: 10px; }
  .header-container {
    grid-area: logo;
    padding-top: 4em;
    margin-left: 8em;
    align-items: flex-start; }
    .header-container .logo {
      width: 160px; }
  .info-container {
    grid-area: info;
    align-items: flex-start;
    margin-left: 8em; }
    .info-container h1 {
      text-align: left;
      font-size: 4rem;
      line-height: 65px; }
    .info-container p {
      font-size: 0.9rem;
      text-align: left;
      line-height: 25px;
      padding-right: 14em;
      margin-bottom: 0; }
  .email-container {
    grid-area: email;
    margin-left: 10em;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0; }
    .email-container .email {
      width: 395px;
      height: 50px;
      padding: 0.5em 1.5em; }
    .email-container .error {
      right: 18%; }
    .email-container .button-container {
      width: 60px;
      height: 50px;
      padding: 0.7em;
      right: -4%;
      opacity: 0.9;
      cursor: pointer; }
    .email-container small {
      left: 4%;
      font-size: 0.85rem; }
  .image-container {
    grid-area: img; }
    .image-container .hero-mobile {
      display: none; }
    .image-container .hero-desktop {
      display: block;
      height: 100vh; }
  .footer {
    grid-area: copyr;
    margin-bottom: 1em; } }