.parent{
    text-align: center;    
    margin-top: 20px;       
}
.child{
    padding: 20px;
    padding-bottom: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 30%;
    margin: auto;
    border-radius: 10px;
}
input{
    margin: 10px;
    width: 90%;
    height: 40px;
    border-radius: 6px;
    border: 1px solid gray;
    color: gray;
}
#submit{
    border: none;
    background-color: rgb(214, 214, 214);
}

@media only screen and (min-width: 200px) and (max-width: 450px){
    .child{
        width: 90%;
    }
}
@media only screen and (min-width: 451px) and (max-width: 550px){
    .child{
        width: 80%;
    }
}
@media only screen and (min-width: 551px) and (max-width: 750px){
    .child{
        width: 60%;
    }
}
@media only screen and (min-width: 750px) and (max-width: 850px){
    .child{
        width: 50%;
    }
}