/*
	Colours

	Material Design
	Indigo 200	#9fa8da
	Indigo 500	#3f51b5
	Indigo 800	#283593
	Red 500	#f44336

*/

* {
	color: #090707;
}

body {
	background-color: #9fa8da;
}

header {
	background-color: #3f51b5;
}

footer {
	background-color: #283593;
}

footer *,
header * {
	color: #fff;
}

.login-form {
	padding: 2rem;
	margin: 2rem auto 0;
	width: 25rem;
	background-color: #283593;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);
}

.login-form * {
	margin-top: 0;
	color: #fff;
}

.login-form input[type="text"],
.login-form input[type="password"] {
	width: calc(100% - 1rem);
	padding: 0.5rem;
}

.login-form .login {
	padding: 0.5rem 3rem;
	background-color: #f44336;
	border: none;
	font-weight: bold;
	color: #222;
}

.login-form .login.is-clicked {
	animation:
		button-move   1.5s cubic-bezier(.55,.08,.45,.92) infinite,
		button-shrink 1.5s linear infinite;
}

@keyframes button-move {
	40% {
		margin-left: calc(100% - 7.5rem);
	}
	50% {
		margin-left: calc(100% - 4rem);
	}
	55% {
		margin-left: calc(100% - 7.5rem);
	}
	90% {
		margin-left: 0;
	}
}

@keyframes button-shrink {
	0%, 40% {
		padding: 0.5rem 3rem;
	}
	50% {
		padding: 0.5rem 1rem;
	}
	55%, 90% {
		padding: 0.5rem 3rem;
	}
	95% {
		padding: 0.5rem 1rem;
	}
	100% {
		padding: 0.5rem 3rem;
	}
}

/*
*/