@import url("https://use.typekit.net/omx4nld.css");

body.login {
	--element-width: 12rem;
    --element-height: 1.5rem;
    --bg-color: #000020;

    background-color: var(--bg-color);
    font-family: "halyard-display", sans-serif;
	font-weight: 300;

	margin: 0;

	* {
		outline: none;
		box-shadow: none;
		border: none;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.screen-reader-text {
		display: none;
	}

	.message,
	.notice,
	#login_error {
		background-color: #FFF;
		width: 100%;
		padding: 0.9rem;
		border-radius: 0.25rem;
		font-size: 0.8rem;
	}

	#login {
		width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
		width: 25rem;
		gap: 2rem;
		z-index: 3;
		position: relative;
		margin: 0 auto;
		min-height: calc(100vh - 2rem);
		margin: 1rem auto;
        max-width: calc(100% - 2rem);
	}
	
	.backup-methods-wrap {
		background-color: #FFF;
		padding: 0.9rem;
        border-radius: 0.25rem;
        font-size: 0.8rem;
		width: 100%;
	}

	.backup-methods-wrap ul a {
		color: #0036a7;;
	}

	p:empty {
	display: none;
	}

	form {
		overflow: hidden;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E") top left,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 326.1 34.3'%3E%3Cpath d='M318,0c-3.1,0-6.2,1-8.6,3l-30.8,24.1c-2.5,1.9-5.5,3-8.6,3H58.9c-3.1,0-6.1-1-8.5-2.9L18.9,2.9c-2.4-1.9-5.4-2.9-8.5-2.9H0v34.3h326.1V0h-8.1Z'/%3E%3C/svg%3E") top center,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E") top right,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E") bottom left;
		mask-size: calc((100% - var(--element-width) + 2px) / 2) var(--element-height),
			var(--element-width) var(--element-height),
			calc((100% - var(--element-width) + 2px) / 2) var(--element-height),
			100% calc(100% - var(--element-height) + 2px);
		mask-repeat: no-repeat;
		border-radius: 0.8rem;
		padding: 4.5rem 3rem 3rem;
		background-color: #FFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;

		> * {
			width: 100%;
		}

		.submit {
			text-align: center;
		}

		.wp-pwd {
			position: relative;

			.button {
				position: absolute;
				width: 25px;
				height: 20px;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
				background: transparent;
				
				span {
					width: 100%;
					height: 100%;
					position: relative;
					display: block;
					mask-repeat: no-repeat;
					mask-size: 20px 20px;
					mask-position: center right;
					background: rgba(66, 89, 97, .35);
					transition: all .2s ease-in-out;
				}
				
				span:hover {
					background: #0036a7;
				}

				span.dashicons-hidden {
					mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye-slash' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/%3E%3Cpath d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z'/%3E%3C/svg%3E");
				}

				span.dashicons-visibility {
					mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");
				}
			}
		}
	}
	

	h1 {
        a { 
            width: 200px;
            height: 55px;
            display: block;
            background: url('logo.svg');
            background-size: contain; 
            font-size: 0;
        }
    }

	input.input {
        display: block;
        width: 100%;
        padding: .5rem 0;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: var(--bg-color);
        appearance: none;
        background-color: #FFF !important;
        background-clip: padding-box;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid rgba(66, 89, 97, .35);
		width: 100%;
		transition: all .2s ease-in-out;
		box-shadow: inset 0 0 20px 20px white !important
    }

	input.input:focus {
		border-color: #0036a7;
	}

	input#rememberme {
        width: 1.25em;
        height: 1.25em;
        margin-top: .25em;
        vertical-align: top;
        appearance: none;
        background-color: #FFF;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 1px solid rgba(66, 89, 97, .35);
        border-radius: .25em;
        margin-right: 0.25em;
		cursor: pointer;
    }

	.forgetmenot {
		label {
			margin-left: 0.2rem;
			cursor: pointer;
		}
	}

	input#rememberme:checked {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		background-color: #0036a7;
	}
	
	.button:not(.wp-hide-pw) {
        display: inline-block;
        padding: 0.75rem 2.5rem;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
        color: #FFF;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        border: none;
        border-radius: 10rem;
        background-color: #0036a7;
		transition: all .2s ease-in-out;
    }

	.button:not(.wp-hide-pw):hover {
        scale: 1.05;
    }

	.two-factor-email-resend {
		text-align: center;
	}

	#nav a,
	#backtoblog a,
	.privacy-policy-link {
		color: rgba(255, 255, 255, .5);
		transition: all .2s ease-in-out;
		text-decoration: none;
		font-size: 0.9rem;
	}

	#nav a:hover,
	#backtoblog a:hover,
	.privacy-policy-link:hover {
		color: #00E6EF;
	}

	#backtoblog,
	.privacy-policy-page-link {
		margin-top: -1rem;
	}
}

body.login .bg {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

body.login .bg::before {
    content: "";
    aspect-ratio: 4 / 3;
    height: 120%;
	min-width: 80rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    background-color: #000020;
    z-index: 2;
}

body.login .bg::after {
    content: "";
    position: absolute;
    height: 120%;
	min-width: 80rem;
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 65.49% at 50% 34.51%, #000082 0%, #000020 100%);
}