/*
######################################################################
 Author : Luke Gassmann
 Description : This page gives the design for the Log In Page
######################################################################
*/

/*
######################################################################
	Page Stypes
######################################################################
*/

*{
    margin: 0;
    padding: 0;
    user-select: none;
}

html{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: url(../Resources/Images/mountainRange.jpg);
    background-position: center;
    background-size: cover;
}

body{
    overflow: hidden;
    background-image: linear-gradient(50deg, rgba(95, 134, 160, 0.6), #5B86E5);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.mainTable{
    width: 100%;
    height: 50em;
    margin: 0;
    border-collapse: collapse;
    
}



/*
######################################################################
	Header Section
######################################################################
*/

.topBarTableTitle{
    width: 100%;
    text-align: center;
    background-color: white;
    text-align: center;
}

.topBarTableTitle img{
    width: 2em;
    margin: 0.3em;
}

.topBarTableTitle p{
    font-family: caviar;
    font-weight: 700;
    color: midnightblue;
    height: 2.5em;
    line-height: 2.5em;
    cursor: pointer;
    transition: 0.4s;
}

.topBarTableTitle p:hover{
    font-family: caviar;
    font-weight: 700;
    
    text-decoration: underline;
}



/*
######################################################################
	Main Holder
######################################################################
*/


.loginMain{
    margin: auto;
    background-color: white;
    width: 25em;
    height: 35em;
    border-collapse: collapse;
    box-shadow: 0.8em 0.8em rgba(30, 30, 100, 0.2);
}

main{
    margin-top: 6em;
    box-shadow: 1em 1em rgba(255, 255, 255, 0);
    background-color: rgba(0, 0, 0, 0);
}

/*
######################################################################
	Login Side Section
######################################################################
*/

.loginSideImage{
    overflow: hidden;
    position: relative;
    background-image: url(/Resources/Images/womanDrinkingWater.jpg);
    background-size: cover;
    background-position: center;
}

.loginSideImage .sideImageCover{
    position: absolute;
    top: 0;
    left: 0;
    width: 35em;
    height: 100%;
    background-image: linear-gradient(75deg, rgba(95, 134, 160, 0.8), rgba(95, 118, 160, 0.8), rgba(95, 134, 160, 0.8));
}

.loginFormCol{
    width: 25em;
}

.loginTextTable{
	position: relative;
    color: white;
    height: 15em;
    width: 90%;
    padding: 2em;
    padding-top: 10em;
    text-align: left;
	margin: auto;
	top: 8em;
}

.header{
    font-family: bebas;
    font-size: 4em;
}

.paragraph{
    font-family: caviar;
    font-size: 1em;
}



/*
######################################################################
	Log In Form Section [Inputs]
######################################################################
*/

.loginFormTable{
    width: 100%;
    height: 100%;
    text-align: center;

}

.loginFormLogo{
    width: 5em;
}

.titleForm{
    font-family: caviar;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.waterTitle{
    color: cadetblue;
}

.capitolTitle{
    color: #5F86A0;
}

.signInText{
    font-family: caviar;
    font-size: 1em;
    padding-top: 1em;
}


/*
######################################################################
	Log In Buttons and Inputs
######################################################################
*/
.inputDiv{
    width: 20em;
    border-bottom: solid cadetblue thin;
    margin: auto;
}

.inputDiv > input{
    width: 95%;
    font-size: 1.2em;
    margin-bottom: 0.5em;
    font-family: mainRegular;
}

textarea:focus, input:focus{
    outline: none;
}

input{
    outline: none;
    border: none;
}

.button{
    font-family: caviar;
    border: solid 0.2em #5F86A0;
    border-top-width: 0.05em;
    border-bottom-width: 0.05em;
    background-color: white;
    height: 3em;
    width: 20em;
    margin: auto;
    color: #5F86A0;
    transition: 0.4s;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.button:hover{
    background-color: #5F86A0;
    color: white;
    cursor: pointer;
}

.button > p{
    font-size: 1.2em;
    line-height: 2.5em;
}