@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
/*font-family: "Josefin Sans", sans-serif;*/
:root{
    --Pink_400: hsl(0, 36%, 70%);
    --Red_500: hsl(0, 93%, 68%);
    --Gray_900: hsl(0, 6%, 24%);
    --Gradient_1: hsl(0, 0%, 100%); 
    --Gradient_2: hsl(0, 100%, 98%);
    --Gradient_3: hsl(0, 80%, 86%); 
    --Gradient_4: hsl(0, 74%, 74%);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: "Josefin Sans", sans-serif; 
    color: var(--Pink_400);
}
.container{
    width: 375px;
    height: 800px;
    margin: 0 auto 80px;
    background-color: var(--Gradient_2
    );
}
.container_logo{
    width: 100px;
    margin: 30px;
}
.container_picture{
    margin-bottom: 60px;
}
.container_content_title{
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5em;
    color: var(--Gray_900);
    font-weight: 700;
    letter-spacing: 11px;
    margin-bottom: 30px;
}
.container_content_title-red{
    color: var(--Pink_400);
    font-weight: 300;
}
.container_content_description{
    margin: 0 40px 40px;
    text-align: center;
    font-size: 0.85em;
    line-height: 1.4em;
}
.container_content_form{
    width: 310px;
    height: 50px;
    margin: auto;
    position: relative;
}
.container_content_form_email{
    width: 100%;
    height: 100%;
    border-radius: 50px;
    padding-left: 16px;
    border: 1px solid var(--Red_500);
    outline: none;
    background-repeat: no-repeat;
    background-position: 210px;
}
.container_content_form_email::placeholder{
    color: var(--Pink_400)
}
.container_content_form_button{
    background: linear-gradient(135deg, var(--Gradient_3), var(--Gradient_4));
    right: 0;
    width: 68px;
    height: 50px;
    border-radius: 50px;
    position: absolute;
    padding: 14px 25px;
}
.container_content_form_button:hover{
    background: linear-gradient(135deg, var(--Gradient_2), var(--Gradient_4));
    box-shadow: 0 10px 15px var(--Gradient_4);
}
.container_content_form_email-error{
    font-size: 0.85em;
    margin: 8px 0 0 14px;
    color: var(--Red_500);
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
@media only screen and (min-width:1440px){
     .container{
        width: 1440px;
        height: 800px;
        background-image: url(./images/bg-pattern-desktop.svg);
        position: relative;
    }
     .container_logo{
        width: 160px;
     }
     .container_picture{
        content: url(./images/hero-desktop.jpg);
        position: absolute;
        right: 0;
     }
     .container_content{
      
        width: 444px;
        margin: 125px 0 0 36px;
     }
     .container_content_title{
        text-align: left;
        font-size: 4.1em;
        letter-spacing: 15px;
     }
     .container_content_description{
        text-align: left;
        font-size: 1em;
        margin: 0 0 40px;
     }
     .container_content_form{
        width: 100%;
        height: 60px;
     }
     .container_content_form_email{
        background-position: 300px;
     }
     .container_content_form_button{
        width: 100px;
        height: 62px;
        padding: 20px 40px;
     }

}