:root{
    --body-font: Arial, Helvetica, sans-serif;
    --primary-green: #10ac84;
    --primary-blur-blue: blue;
    --primary-blue: #2e86de;
    --primary-black: #24252a;
    --main-black: #121212;
    --primary-white: aliceblue;
    --primary-h2-color: #063146;
	--background: #042331;
	--box-shadow: 13px 13px 20px #cbced1,
					-13px -13px 20px #ffffff;
}
*, *::before, *::after{
	box-sizing: border-box;
}
body{
	margin: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-black);
	/* background: #ecf0f3; */
	background-image: url("../img/1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
body::after{
	content: '';
	position: absolute;
	margin: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-white);
	opacity: 0.8;
	z-index: -1;
}
.login-div{
	width: 330px;
	height: 70%;
	/*width: calc(100% - 220px);*/
	/* height: calc(100vh - 150px); */
	padding: 40px 35px 35px 35px;
	border-radius: 40px;
	margin-top: 30px;
	background: #ecf0f3;
	box-shadow: var(--box-shadow);
}
.logo{
	background: url("./cybergate.jpg") center no-repeat;
	background-size: contain;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0 auto;
	box-shadow: 
	/* logo shadow */
	0px 0px 2px #5f5f5f,
	/* offset */
	0px 0px 0px 5px #ecf0f3,
	/* bottom right */
	8px 8px 15px #a7aaaf,
	/* top left */
	-8px -8px 15px #ffffff;
}
.title{
	text-align: center;
	font-size: 22px;
	padding-top: 20px;
	letter-spacing: 0.5px;
}
.sub-title{
	text-align: center;
	font-size: 12px;
	padding-top: 7px;
	letter-spacing: 3px;
}
.fields{
	width: 100%;
	padding: 10px 5px 5px 5px;
	position: sticky;
}
.fields input{
	border: none;
	outline: none;
	background: none;
	font-size: 16px;
	color: var(--primary-black);
	padding: 7px 10px 10px 5px;
	max-width: 80%;
	margin-left: 10px;
}
.fields div i{
	position: relative;
	left: 10px;
	top: 2px;
	margin-left: 5px;
}
.username, .password{
	margin-bottom: 15px;
	border-radius: 25px;
	box-shadow: inset 8px 8px 8px #cbced1,
				inset -8px -8px 8px #ffffff;
}
.fields svg{
	height: 22px;
	margin: 0 10px -3px 25px;
}
.signin-button{
	outline: none;
	border: none;
	cursor: pointer;
	width: 100%;
	height: 35px;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 700;
	font-family: 'Lato', sans-serif;
	color: var(--primary-white);
	text-align: center;
	background: var(--primary-blue);
	box-shadow: 3px 3px 8px #b1b1b1,
				-3px -3px 8px #ffffff;
	transition: 0.5s;
}
.signin-button:hover{
	background: var(--primary-h2-color);
	transform: scaleX(1.01);
}
.signin-button:active{
	background: lightblue;
	outline: none;
}
.link{
	padding-top: 20px;
	text-align: center;
}
.link a{
	text-decoration: none;
	color: #aaa;
	font-size: 15px;
}