:root {
	--pp-ink: #19221d;
	--pp-green: #3f6651;
	--pp-lime: #c6f15f;
	--pp-paper: #fffdf7;
}

body.login {
	background:
		radial-gradient(circle at 12% 15%, rgb(198 241 95 / 42%) 0 9rem, transparent 9.1rem),
		radial-gradient(circle at 90% 85%, rgb(63 102 81 / 18%) 0 15rem, transparent 15.1rem),
		#edf1eb;
	color: var(--pp-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login #login {
	padding-top: min(12vh, 7rem);
	width: min(420px, calc(100% - 2rem));
}

.login h1 a {
	background-image: var(--pp-admin-logo);
	background-size: 76px;
	height: 82px;
	margin-bottom: 1.4rem;
	width: 100%;
}

.login h1::after {
	content: "PANELES PERFORADOS";
	display: block;
	font-size: 1.12rem;
	font-weight: 850;
	letter-spacing: .055em;
	margin-bottom: 1.5rem;
}

.login form {
	background: rgb(255 253 247 / 92%);
	border: 1px solid rgb(25 34 29 / 10%);
	border-radius: 24px;
	box-shadow: 0 24px 70px rgb(25 34 29 / 12%);
	padding: 2rem;
}

.login label {
	color: var(--pp-ink);
	font-weight: 750;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #fff;
	border: 1px solid #cfd8d1;
	border-radius: 12px;
	box-shadow: none;
	font-size: 1rem;
	min-height: 48px;
	padding: .7rem .9rem;
}

.login input:focus {
	border-color: var(--pp-green);
	box-shadow: 0 0 0 3px rgb(198 241 95 / 48%);
}

.login .button-primary {
	background: var(--pp-ink);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-weight: 800;
	min-height: 44px;
	padding: 0 1.35rem;
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--pp-green);
}

.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link {
	text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--pp-ink);
}