@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Josefin Sans", sans-serif;
}
:root {
  --Desaturated-Red: hsl(0, 36%, 70%);
  --Soft-Red: hsl(0, 93%, 68%);
  --Dark-Grayish-Red: hsl(0, 6%, 24%);
}

.logo {
  margin: 3rem;
}
.img {
  margin-top: 3rem;
  display: block;
  width: 28rem;
}
.image {
  display: none;
}

body {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%));
}

main {
  display: block;
}

.sect2 {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sect2 h1 {
  font-size: 2.5rem;
  font-weight: 400;
  text-transform: uppercase;
  margin: 4rem;
}
.space {
  letter-spacing: 4px;
}
.red {
  color: var(--Desaturated-Red);
  font-weight: 300;
}
.text {
  font-weight: 400;
  font-size: 0.9rem;
  margin: 2rem;
}
input {
  padding: 1rem 3rem;
  border-radius: 2rem;
  margin: 3rem;
  border: 1px solid var(--Desaturated-Red);
  background-color: transparent;
  position: relative;
  top: 2rem;
  left: 2rem;
}
input:focus {
  outline: none;
  border-color: var(--Desaturated-Red);
}
::placeholder {
  color: var(--Desaturated-Red);
}
button {
  height: 3rem;
  width: 4rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  border: none;
  outline: none;
  position: relative;
  bottom: 4rem;
  left: 17.8rem;
  box-shadow: 5px 10px 18px var(--Desaturated-Red);
  cursor: pointer;
}
i {
  font-weight: 300;
  font-size: 1.5rem;
  color: white;
}

@media screen and (min-width: 1440px) {
  .logo {
    margin: 150px;
    margin-top: 5rem;
  }

  main {
    width: 1440px;
    height: 800px;
    position: relative;
  }
  body {
    background-image: url(./images/bg-pattern-desktop.svg);
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .img {
    content: url(./images/hero-desktop.jpg);
    position: absolute;
    right: 0;
    height: 1000px;
    width: 650px;
    top: -5rem;
  }

  .sect2 {
    width: 40rem;
  }
  .space {
    letter-spacing: 15px;
  }
  .sect2 h1 {
    font-size: 4rem;
    letter-spacing: 15px;
    text-transform: uppercase;
    text-align: left;
    margin: 150px;
    margin-top: 60px;
  }
  .text {
    font-size: 1rem;
    text-align: left;
    margin: 150px;
    margin-top: -120px;
  }
  input {
    margin: 110px;
    position: relative;
    top: -13rem;
  }
  button {
    position: relative;
    top: -205px;
    left: -9rem;
    width: 6rem;
  }
}

@media screen and (min-width: 1024px) {
  body {
    background-image: url(./images/bg-pattern-desktop.svg);
    overflow: hidden;
  }
  .logo {
    margin: 100px;
    margin-top: 4rem;
  }

  .wrapper {
    max-width: 1300px;
    margin-inline: auto;
  }
  .img {
    content: url(./images/hero-desktop.jpg);
    right: 0;
    position: absolute;
    top: -5rem;
    width: 500px;
  }
  .sect2 {
    width: 40rem;
  }
  .sect2 h1 {
    font-size: 4rem;
    letter-spacing: 15px;
    text-transform: uppercase;
    text-align: left;
    margin: 100px;
    margin-top: -10px;
  }
  .text {
    font-size: 1rem;
    text-align: left;
    margin: 100px;
    margin-top: -80px;
    line-height: 1.5rem;
  }
  input {
    margin: 70px;
    position: relative;
    top: -8rem;
    width: 20rem;
  }
  button {
    position: relative;
    top: -122px;
    left: -7rem;
    width: 5rem;
    height: 3rem;
  }
}