:root{
	--login-padding: 40px;
}

section.login{
	background: var(--aside-background);
	background: var(--aside-webkit-gradient);
	background: var(--aside-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
section.login .login-box{
	background: var(--body-background);
	padding: var(--login-padding);
	box-shadow: 0 12px 45px rgba(0,0,0,0.6);
	animation: animation-login-box-zoomIn 1s ease;
	max-width: 550px;
	width: 100%;
}

section.login h2{
	font-size: 2.2rem;
	font-weight: 900;
}

section.login .login-input{
	margin-top: 30px;
	position: relative;
}
section.login .login-input input{
	width: 100%;
	padding: 8px 15px;
	padding-left: 25px;
	border: 0;
	color: var(--main-color);
	background: transparent;
	border-bottom: solid 2px var(--main-color);
}
section.login .login-input input:focus{
	border-color: var(--main-link-color);
}
section.login .login-input input:focus ~ svg:not(.passwordshow) > path{
	fill: var(--main-link-color);
}
section.login .login-input input:focus:placeholder{
	opacity: 0.3;
}
section.login .login-btn{
	margin-top: 30px;
}
section.login .login-input svg{
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.2rem;
	height: 1.2rem;
	margin-top: -0.6rem;

}
section.login .login-input .passwordshow{
	left: auto;
	right: 0;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: -0.7rem;
	cursor: pointer;
}
section.login .login-input .passwordshow[icon="eye-splash"] path{
	fill: var(--bs-danger);
}

section.login .login-input svg path{
	fill: var(--main-color);
}

section.login .login-btn button{
	padding-left: 40px;
	padding-right: 40px;
	background: var(--main-link-color);
	color: var(--reverse-color);
	font-weight: 900;
}
section.login .login-btn button:hover{
	background: var(--main-link-color);
}

@keyframes animation-login-box-zoomIn{
	from {
		transform: scale(1.5); 
		opacity: 0;
	}
 	to { 
 		transform: scale(1);  
 		opacity: 1;
 	}
}

@media (max-width: 520.98px) {
	:root{
		--login-padding: 30px 20px;
	}
	section.login .login-btn button{
		width: 100%;
	}
	section.login{
		padding: 0 20px;
	}
	section.login h2{
		font-size: 1.6rem;
	}
}