:root {
  --desaturated-red: hsl(0, 36%, 70%);
  --soft-red: hsl(0, 93%, 68%);
  --dark-grayish-red: hsl(0, 6%, 24%);
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.wrapper {
  width: 100%;
  height: 100vh;
  font-family: 'Josefin Sans', sans-serif;
}

.wrapper .top .logo {
  padding-block: 30px;
  padding-left: 40px;
}

.wrapper .top .hero {
  background-image: url(../images/hero-mobile.jpg);
  height: 66.6vw;
  background-repeat: no-repeat;
  background-size: contain;
}

.wrapper .down {
  padding: 40px;
  padding-bottom: 70px;
}

.wrapper .down h1 {
  font-size: 3rem;
  text-align: center;
  letter-spacing: 1rem;
  text-transform: uppercase;
  font-weight: 600;
}

.wrapper .down h1 span {
  font-weight: 300;
  color: var(--desaturated-red);
}

.wrapper .down p {
  color: var(--desaturated-red);
  text-align: center;
  line-height: 1.5rem;
  padding-block: 2rem;
  font-weight: 600;
}

.wrapper .down form {
  position: relative;
}

.wrapper .down form .email {
  width: 100%;
  height: 50px;
  border-radius: 5rem;
  border: 2px solid var(--desaturated-red);
  padding-left: 1rem;
}

.wrapper .down form .email::-webkit-input-placeholder {
  color: var(--desaturated-red);
}

.wrapper .down form .email:-ms-input-placeholder {
  color: var(--desaturated-red);
}

.wrapper .down form .email::-ms-input-placeholder {
  color: var(--desaturated-red);
}

.wrapper .down form .email::placeholder {
  color: var(--desaturated-red);
}

.wrapper .down form .email:focus {
  outline: none;
  background-color: #fff7f7;
}

.wrapper .down form .button {
  width: 70px;
  height: 50px;
  border-radius: 5rem;
  border: none;
  position: absolute;
  right: 0px;
  background: linear-gradient(135deg, white, #ee8c8c);
  -webkit-box-shadow: 0px 0px 50px 5px rgba(255, 106, 106, 0.3);
          box-shadow: 0px 0px 50px 5px rgba(255, 106, 106, 0.3);
  cursor: pointer;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

.wrapper .down form .button:hover {
  background: #ffcccc;
}

.wrapper .down form .arrow {
  position: absolute;
  right: 20px;
  top: 10px;
  height: 30px;
  pointer-events: none;
}

.wrapper .down form p {
  color: #ff3737;
  font-size: 12px;
  padding: 0;
  text-align: start;
}

.hidden {
  display: none;
}

@media (min-width: 650px) {
  .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .wrapper .top {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 40%;
  }
  .wrapper .top .logo {
    display: none;
  }
  .wrapper .top .hero {
    background-image: url(../images/hero-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
  }
  .wrapper .down {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 60%;
    padding-inline: 10%;
  }
  .wrapper .down h1 {
    text-align: start;
  }
  .wrapper .down p {
    text-align: start;
  }
}
/*# sourceMappingURL=style.css.map */