body{
    background-color: white;
}

#container{
    width:35%;
    height:450px;
    border: 1px solid;
    margin: auto;
    background-color: whitesmoke;
    border-radius: 10px;
}
#first{
    width:80%;
    margin: auto;
    text-align: center;
    font-size: 30px;
    font-weight: 10px;
    color: deepskyblue;
    margin-top: 10px;
}

#phone{
    width: 85%;
    height: 35px;
    margin-left: 7%;
    border-radius: 5px;
}
#user{
    width: 85%;
    height: 35px;
    margin-left: 7%;
    border-radius: 5px;
}
#email{
    width: 85%;
    height: 35px;
    margin-left: 7%;
    border-radius: 5px;
}
#pass{
    width: 85%;
    height: 35px;
    margin-left: 7%;
    border-radius: 5px;   
}
#signup{
    width: 87%;
    height: 35px;
    background-color: deepskyblue;
    margin-left: 7%;
    font-size: 20px;
    border-radius: 5px;
    color: white;
}

#signupgoogle{
    width: 87%;
    height: 35px;
    background-color:red;
    margin-left: 7%;
    font-size: 20px;
    border-radius: 5px;
    color: white;
}

@media only screen and (min-width:271px) and (max-width:730px){

    #container{
        width:100%;
        height:600px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        margin: auto;
        background-color: whitesmoke;
        border-radius: 10px;
    }
}

@media only screen and (min-width:0px) and (max-width:271px){

    #container{
        width:100%;
        height:600px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        margin: auto;
        background-color: whitesmoke;
        border-radius: 10px;
    }

    #first{
    
        text-align: center;
        font-size: 20px;
        font-weight: 10px;
        color: deepskyblue;
        margin-top: 30px;
    }
}