:root
{
	--dark00	: #504c49; /* dark brown */
	--dark01	: #5a6c72; /* dark blue */
	--light00	: #c0bbb7; /* light brown */
	--light01	: #c4543b; /* red */
	--light02	: #e3c7a0; /* pole yellow */
	--light03	: #cbd3d6; /* light blue */
}
body
{
	background-color: var(--dark00);
	background-image: url('/koelkast/_icons/koelkast_background.jpg');
	background-size	: cover;
}
.login
{
	opacity		: 80%;
	height		: 100vh;
	width		: 100vw;
	overflow	: hidden;
	margin		: 0px;
	padding		: 0px;
	position	: fixed;
	left		: 0px;
	top			: 0px;
}
.login #logo
{
	position	: absolute;
	top			: 50%;
	left		: 50%;
	transform	: translate(-50%,-50%);
	font-family	: Poppins;
	font-weight	: bold;
	font-size	: 4rem;
	color		: var(--light00);
	transition	: left ease 2s;
}
.login #logo img
{
	height	: 6rem;
	left	: 5px;
}
.login #form
{
	position	: absolute;
	top			: 50%;
	left		: 50%;
	transform	: translate(-50%,-50%);
	font-family	: Poppins;
	font-weight	: 500;
	font-size	: 2.5rem;
	color		: var(--light00);
	opacity		: 0;
	transition	: all ease 2s;
}
.login input
{
	font-family	: Poppins;
	font-weight	: 500;
	font-size	: 2.5rem;
	border		: none;
	width		: 25vw;
}
.login #username
{
	backdrop-filter: blur(10px);
 	background	: var(--dark02);
	color		: var(--light02); 
	border-radius: 8px 8px 0px 0px;
}
.login #password
{
	background	: var(--light02);
	color		: var(--dark01);
	margin-top	: 5px;
	border-radius: 0px 0px 8px 8px;
}
.login #submit
{
	background	: var(--dark02);
	color		: var(--light03);
	margin-top	: 5px;
	border-radius: 8px 8px 8px 8px;
}
form input
{
	background	: var(--dark01);
	color		: var(--light02);
	margin-top	: 5px;
}
/* HOVER ANIMATIONS */
.login:hover #logo
{
	left	:65%;
}
.login:hover #form
{
	opacity		: 1;
	transition	: all ease 2s;
	left		: 35%;
}
.copyrights
{
	font-family	: Poppins;
	position 	: fixed;
	bottom		: 0px;
	right		: 0px;
	color		: var(--light03);
	z-index		: 100;
}
.alert 
{
	vertical-align:top;
}