* {
    margin: 0;
    padding: 0;
}

:root {
--desaturatedRed: hsl(0, 36%, 70%);
--softRed: hsl(0, 93%, 68%);
--DarkGrayishRed: hsl(0, 6%, 24%);
}

.attribution {
    font-size: 11px;
    text-align: center;
  }

  .attribution a {
    color: hsl(228, 45%, 44%);
  }

  body {
    font-family: 'Josefin Sans', sans-serif;
  }

  p {
    color: var(--desaturatedRed);
    line-height: 25px;

  }

  h1 {
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 700 ;
    letter-spacing: 10px;
  }

  span {
    font-weight: 300;
    color: var(--desaturatedRed);
  }

main {

    margin: 100px 0 20px 0;
    display: flex;
    justify-items: center;
    align-items: center;
    justify-content: center;
}

.content {
    box-sizing: border-box;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 500px;
    height: 600px;
    justify-content: flex-start;
    background-image: url(../images/bg-pattern-desktop.svg);
    background-position: center;    
  }

.avatar {
    background-image: url(../images/hero-desktop.jpg);
    background-position: center;
    background-size: cover;
    width: 500px;
    height: 600px;
}

img {
    width: 150px;
    margin-bottom: 70px;
}

/* style do Input*/

input[type=email] {
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border: 1px solid var(--desaturatedRed);
    width: 300px;
    padding: 10px;
    opacity: 0.5;
}

input[type=email]::-webkit-input-placeholder  { color: var(--desaturatedRed); }
input:-moz-placeholder { color: var(--desaturatedRed) }
textarea:-moz-placeholder { color: var(--desaturatedRed) }

button {
    padding: 9px;
    width: 70px;
    border: none;
    border-radius: 50px;
    position: absolute;
    margin-left: -70px;
    background: linear-gradient( 135deg, hsl(0, 80%, 86%)20%, hsl(0, 74%, 74%) 50%);
}


button img {
    width: 10px;
    margin: auto;
}

.alert {
  font-size: 10px;
  color: var(--softRed);
 margin-left: 15px;
}

button:hover  {
  cursor: pointer;
}

@media only screen and (max-width: 600px) {

  main {
    flex-direction: column-reverse;
  
    margin: 100px auto 2px auto;
   
  }
  .content {
    width: 400px;
    margin: auto;
    height: 450px;
  }
  .avatar {
    width: 400px;
    height: 290px;
    background-image: url(../images/hero-mobile.jpg);  
  }

  input[type=email] {
    width: 250px;
    margin-bottom: 50px;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: space-around

}

.content .logo {
  position: absolute;
  margin-top: -400px;
}

}