:root{
    --color-green:hsl(154, 59%, 51%);
    --color-primary-red:hsl(0, 100%, 74%);
    --color-accent-blue:hsl(248, 32%, 49%);
    --color-dark-blue:hsl(249, 10%, 26%);
    --color-grayish-blue:hsl(246, 25%, 77%);

}
*{
    font-family: 'Poppins', sans-serif;

}
html{
    box-sizing: border-box;
}
body{
    background:url(https://raw.githubusercontent.com/Tariqul-huda/sign-up-form/5862937ccd28a02cb9c53e0eb9e96021ca7baf0f/images/bg-intro-desktop.png);
    background-color: var(--color-primary-red);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color:white
}
.main-margin{
    margin:111px 500px;
}
input{
    caret-color:var(--color-accent-blue);
    height:48px;
    width: 419px;
    border:none;
    margin-left: 35px;
}
input::placeholder{
    padding-left: px;
    font-family: 'Poppins',sans-serif;
    font-weight: 600;
}
input:focus{
    outline: none;
}
b{
    font-weight: 600;
}
button{
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.2);
    transition: all .2s;

}
button:hover{
    cursor:pointer;
}
button:active{
    opacity: 0.5;
    /* mix-blend-mode:screen ; */
    box-shadow: 0px 1.5px 1px rgba(0, 0, 0, 0.2);
    transform: translateY(3px)

}
.container{
    max-width: 513px;
    min-width: 513px;
    margin-right: 50px;
    position: relative;
    top: 151px;;
}
.container__header{
    font-size: 2.5rem;
    line-height: 50px;
    color:white;
    font-weight: 700;
    margin-bottom: 13px;

}
.flex{
    display: flex;
}
.flex-column{
    flex-direction: column;
}
.form-container{
    width:538px;
    height:560px;
    border-radius: 10px;
    box-shadow: 0 9px 1px rgba(0, 0, 0, 0.2);
    background-color:white;
}
.form{
    width:460px;
    margin: 40px auto;
}
.box{
    height:53px;
    width:460px;
    margin-top: 20px;
    border-radius: 6px;
}
.box:hover{
    cursor: text;
}
.box-border{
    border:1px solid rgba(0, 0, 0, 0.1);
    transition: .3s;


}
.box-border-focus{
    border:1px solid var(--color-accent-blue);
}
.btn-free{
    height:55px;
    border-radius: 10px;
    box-shadow:  0 7px 1px rgba(0, 0, 0, 0.15);
    background-color: var(--color-accent-blue);
    margin-bottom: 25px;
}
.btn-free-paragraph{
    text-align: center;
    position: relative;
    top:15px;
}
.btn-free:hover{
    cursor:pointer
}
#first{
    margin-top:40px;

}
.box-bg-green{
    background-color: var(--color-green);
}
.box-text{
    color:white;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
}
.box-text:hover{
    cursor:pointer
}
.footer{
    color: var(--color-grayish-blue);
    text-align: center;
    font-size: x-small;
}
.footer-orange{
    color:var(--color-primary-red);
    font-weight: 700;
}
.box-border-error{
    border:1px solid var(--color-primary-red);
    
}
.input-error{
    color: var(--color-primary-red);
    margin: 0px 0px 0.5px 0px;
    text-align: right;
    font-size: 14px;
    font-style: italic;
    
}
.input-error-icon{
    float: right;
    position: relative;
    bottom:35px;
    right:24px
}
@media  screen and (max-width:500px) {
    html {
        height: 100%;
    }
    body {
        min-height: 100vh;
        background:url(https://raw.githubusercontent.com/Tariqul-huda/sign-up-form/5862937ccd28a02cb9c53e0eb9e96021ca7baf0f/images/bg-intro-mobile.png);
        background-color: var(--color-primary-red);

    }
    .flex-row{
        flex-direction: column;
    }
    .main-container{
        width: 324px;
        height:auto;
        margin:180px auto;
    }
    .container{
        position: unset;
        max-width: 315px;
        min-width: 315px;

    }
    .btn-free{
        height: 85px;
    }
    .box{
        width:280px;
    }
    input{
        width:240px;
    }
    .form-container{
        width:324px;
    }
    .form{
        width:278px
    }
    .container__paragraph{
        text-align: center;
    }
    .container__header{
        font-size: 2.3rem;
        text-align: center;
    }
}