@import "https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap";

:root {
	--theme-family: 'Lora', sans-serif;
	--theme-font-secondary: "Quicksand", sans-serif;
	--body-bg: #fff;
	--body-text-color: #475569;
	--logo: url('../resources/images/logos/logo.webp') no-repeat center;
	--logoWatermark: url('../resources/images/logo.svg') no-repeat bottom right;
	--logo-width: 250px;
	--logo-height: 120px;
	--font-size: 16px;
	--font-size-labels: 15px;
	--border-radius: 0;
	--checkbox-color: #329ad6;
	--c-primary: #1e9661;
	--bg-secondary-dark: #2e302f;
	--c-white: #f6f5f5;
	--c-secondary: #434645;
}

.login {
	font-family: var(--font-family);
	background-color: var(--body-bg);
	color: var(--body-text-color)
}

.login:before {
	content: '';
	background: var(--logoWatermark);
	background-size: 18%;
	position: absolute;
	bottom: 5%;
	right: 5%;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: .3;
}

.login h1 a {
	width: var(--logo-width);
	height: var(--logo-height);
	background: var(--logo);
	background-size: contain;
	margin-block-end: 20px;
}

.login form {
	background-color: var(--c-primary);
	border: none;
	border-radius: 3px;
}

.login form > *:not(:last-child) {
	padding-bottom: 15px;
}

.login input[type="checkbox"]:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

.login label {
	font-size: var(--font-size-labels);
	color: var(--body-bg);
	display: block;
	font-weight: 300;
}

.login #wp-submit {
	display: inline-block;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	appearance: none;
	box-shadow: none;
	border-radius: 3px;
	border: 1px solid var(--c-secondary);
	color: var(--c-white);
	transition: color, background, border;
	transition-duration: 0.4s;
	padding: 10px 20px;
	width: 100%;
	color: var(--c-white);
	box-shadow: inset 0 0 0 3rem var(--c-secondary);
	border-color: var(--c-secondary);
	background-color: var(--c-secondary);
}

.login #wp-submit:hover {
	box-shadow: inset 0 0 0 3rem var(--c-white);
	background-color: var(--c-white);
	color: var(--c-primary);
	border-color: var(--c-white);
}

.login form .input {
	font-size: var(--font-size);
	border-radius: var(--border-radius);
	color: var(--bg-secondary-dark);
	padding: 15px;
	margin: 0;
	border: none;
	box-shadow: none;
	background-color: #fff;
}

.login .forgetmenot {
	width: 100%;
	display: flex;
	align-items: center;
}

.login .forgetmenot input {
	border: none;
	box-shadow: none;
	accent-color: var(--checkbox-color);
	color: var(--body-bg)
	-webkit-appearance: checkbox;
	appearance: checkbox;
}
.login .forgetmenot input:before {
	display: none;
}

.login .button.wp-hide-pw {
	height: 100%;
}

.login #backtoblog,
.login #nav {
	padding: 0;
	margin-top: 15px;
}

.login .privacy-policy-link,
.login #backtoblog a,
.login #nav a {
	color: var(--c-secondary);
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none;
	transition: color .4s, background-color .4s;
}

.login .privacy-policy-link:hover,
.login #backtoblog a:hover,
.login #nav a:hover {
	color: var(--c-primary);
}

.login #backtoblog a:focus,
.login #nav a:focus {
	outline: none;
	box-shadow: none;
}

.login .message {
	border-left: 4px solid var(--c-secondary);
}

.login .button.wp-hide-pw .dashicons {
	color: #fff;
}