body.login.login-password-protected {
	background: radial-gradient(circle at top left, rgba(138, 99, 210, 0.18), rgba(22, 62, 113, 0.08) 55%, #f4eef8 100%);
}

#login {
	padding: 6% 0 0;
}

#login h1 a,
#password-protected-logo a {
	background-image: url("assets/images/favicon.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 120px;
	height: 120px;
	text-indent: -9999px;
	overflow: hidden;
}

.login #loginform {
	border-radius: 1.2rem;
	padding: 2.2rem;
	box-shadow: 0 18px 40px rgba(12, 27, 42, 0.12);
	border: 1px solid rgba(22, 62, 113, 0.12);
}

.login #loginform .input,
.login #loginform input[type="text"],
.login #loginform input[type="password"] {
	border-radius: 0.8rem;
	border: 1px solid rgba(22, 62, 113, 0.2);
	background: #eef2fb;
}

.login #loginform .input:focus,
.login #loginform input[type="text"]:focus,
.login #loginform input[type="password"]:focus {
	border-color: #8a63d2;
	box-shadow: 0 0 0 3px rgba(138, 99, 210, 0.2);
}

.login #loginform label {
	font-weight: 600;
	color: #163e71;
}

.login .button.button-primary {
	background: #163e71;
	border-color: transparent;
	border-radius: 999px;
	padding: 0.4rem 1.6rem;
	box-shadow: 0 12px 24px rgba(12, 27, 42, 0.15);
	text-shadow: none;
}

.login .button.button-primary:hover,
.login .button.button-primary:focus {
	background: #1e4b84;
}

.login #nav a,
.login #backtoblog a {
	color: #1e4b84;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: #8a63d2;
}