*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

section{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(210, 207, 205);
}

section form{
    text-align: center;
    padding: 6vmin 5vmin;
    width: auto;
    height: auto;
    border: 0px solid black;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: -0.5px -0.5px 20px;
}

form .heading{
    display: flex;
    justify-content: center;
    align-items: center;
}

.heading h2{
    font-size: 5vmin;
    color: rgb(28, 28, 29);
    text-shadow: 0.5px 0.5px 3px rgb(53, 52, 52);
}

form .email-box{
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

.email-box input{
    padding-left: 5px;
    width: 40vmin;
    height: 5vmin;
    border-radius: 5px;
    border: 0px solid whitesmoke;
    box-shadow: 0.5px 0.5px 5px black;
    outline: none;
}


form .password-1{
    margin-top: 1.5rem;
    padding: 0 5px;
    width: 40vmin;
    height: 5vmin;
    border-radius: 5px;
    border: 0px solid whitesmoke;
    box-shadow: 0.5px 0.5px 5px black;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

form .password-1 input{
    line-height: 4vmin;
    width: 30vmin;
    border: none;
    outline: none;
}

form button{
    margin-top: 1.5rem;
    padding: 1vmin 0;
    width: auto;
    height: auto;
    background-color: rgb(0, 32, 240);
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 5px ;
    border: none;
}

button a{
    color: whitesmoke;
    text-decoration: none;
    font-size: 3vmin;
    padding: 0 16vmin;
    
}

form h5{
    margin-top: 1rem;
    font-size: 2.5vmin;
}

h5 a{
    text-decoration: none;
    color: blue;
}


form .or{
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.or div{
    width: 16vmin;
    height: 0px;
    color: rgb(72, 68, 68);
    border: 1px solid;
}

.or p{
    margin: 0 2vmin;
    font-size: 2.5vmin;
}

form .facebook{
    margin-top: 1.5rem;
    width: auto;
    height: auto;
    background-color: rgb(61, 40, 129);
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.facebook a{
    padding: 3vmin 0;
    width: 40vmin;
    height: 0vmin;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    
}

.facebook a div{
    width: 5vmin;
    height: 5vmin;
    border-radius: 50%;
    background-color: rgb(252, 252, 252);
    display: flex;
    justify-content: center;
    align-items: center;
}

.facebook a h4{
    margin-left: 2vmin;
    font-size: 2.5vmin;
    color: whitesmoke;
}


/* google */

form .google{
    margin-top: 1.5rem;
    width: auto;
    height: auto;
    background-color: rgb(223, 223, 223);
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.google a{
    padding: 3vmin 0;
    width: 40vmin;
    height: 0vmin;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    
}

.google a div{
    color: black;
    width: 5vmin;
    height: 5vmin;
    border-radius: 50%;
    background-color: rgb(252, 252, 252);
    display: flex;
    justify-content: center;
    align-items: center;
}


.google a h4{
    margin-left: 2vmin;
    font-size: 2.5vmin;
    color: rgb(51, 49, 49);
}







/* ------media-page ------*/

@media only screen and (min-width: 400px) and (max-width: 550px) {
    section form{
        width: auto;
        height: auto;
        padding: 8vmin;
        
    }

    .heading h2{
        font-size: 6vmin;
    }

    .email-box input{
        width: 60vmin;
        height: 8vmin;
    }

    form .password-1{
        width: 60vmin;
        height: 8vmin;
    }

    form .password-1 input{
        line-height: 7vmin;
        width: 60vmin;
    }

    form button{
        padding: 1.5vmin 0;
    }

    form button a{
        padding: 0 25vmin;
        font-size: 4vmin;
    }

    form h5{
        font-size: 3vmin;
    }

    .or div{
        width: 25vmin;
    }

    .or p{
        font-size: 3vmin;
    }

    .facebook a{
        padding: 4vmin 0;
    }

    .facebook a h4{
        font-size: 3vmin;
    }


    .google a{
        padding: 4vmin;
    }

    .google a h4{
        font-size: 3vmin;
    }
}




@media only screen and (min-width: 250px) and (max-width: 400px) {
    section form{
        width: auto;
        height: auto;
        padding: 8vmin;
        
    }

    .heading h2{
        font-size: 6vmin;
    }

    .email-box input{
        width: 60vmin;
        height: 10vmin;
    }

    form .password-1{
        width: 60vmin;
        height: 10vmin;
    }

    form .password-1 input{
        line-height: 9vmin;
        width: 50vmin;
    }

    form button{
        padding: 2vmin 0;
    }

    form button a{
        padding: 0 25vmin;
        font-size: 4vmin;
    }

    form h5{
        font-size: 3vmin;
    }

    .or div{
        width: 25vmin;
    }

    .or p{
        font-size: 3vmin;
    }

    .facebook a{
        padding: 5vmin 0;
    }

    .facebook a div{
        width: 8vmin;
        height: 8vmin;
    }

    .facebook a h4{
        font-size: 3vmin;
    }


    .google a{
        padding: 5vmin;
    }

    .google a div{
        width: 8vmin;
        height: 8vmin;
    }

    .google a h4{
        font-size: 3vmin;
    }
}