body{
    font-family: sans-serif;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/loginBackgroundLandscape.jpg);
    background-size:cover;
}

form{
    margin-top: 8%;
    display: flex;
    flex-direction: column;
    width: 40vh;
    height: 60vh;
    background-color: rgba(255,255,255,0.4); 
    box-shadow: 0 0 3vh rgb(255, 190, 0);
    padding: 5vh;
    border-radius: 2.5vh;
}
.loginLogo{
    border-radius: 2vh;
    margin-bottom: 14%;
    margin-top: 8%;
    opacity: 0.9;
}
input{
    box-sizing: border-box;
    border: none;
    border-radius: 2vh;
    padding: 4%;
    margin-top: 2%;
    margin-bottom: 6%;
    background-color: rgba(255,255,255,0.6); 
}

label{
    margin-left: 2%;    
    font-size: 120%;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 4px 3px rgba(25, 37, 55,1);
}
button {
    background-color: rgba(25, 37, 55,0.8);
    color: white;
    padding: 1.6vh;
    border: none;
    border-radius: 2vh;
    font-weight: bold;
    cursor: pointer;
    margin-top: 6%;
}
.forgotPassword{
    position: absolute;
    margin-top: 21.3%;
    margin-left: 12%;
    font-size: 15px;
    text-decoration: none;
}
button {
    margin-top: 9%;
}
.socialButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 12%;
}
.socialButtons a {
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border-radius: 2.5vh;
    padding: 3% 5%;
} 
.socialButtons a i{
    margin-right: 0.5vh;
    font-size: 3vh;
}
.GoogleBtn{
    background-color: aliceblue;
    color: rgba(25, 37, 55, 0.9);
    margin-right: 10%;
} 
.FacebookBtn{
    background-color: rgb(55, 79, 128);
    color: rgba(255,255,255,0.9);
    margin-right: 0;
} 



/* mobile screen */
@media  screen and (max-width: 789px) {
    body{
        background-image: url(../assets/loginBackgroundPortrait.jpg);
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }
    form{
        margin-top: 3%;
        height: 48%;
        width: 55%;
        padding: 5vh;
        box-shadow: 0 0 4vh rgb(255, 190, 0);
    }
    label{
        font-size: 15px;
    }
    .forgotPassword{
        margin-top: 60%;
        margin-left: 21%;
        font-size: 12px;
    }
    .socialButtons{
        margin-top: 10%;
    }
    .socialButtons a{
        font-size: 1.8vh;
    }
    .socialButtons a i{
        font-size: 2.5vh;
    }
    .GoogleBtn{
        margin-right: 0;
    }
}