@charset "utf-8";

html,
body {
	height:                                                    100%;
	margin:                                                    0;
	padding:                                                   0;
}

body {
	background:                                                #f2f2f2;
	min-width:                                                 0;
	color:                                                     var(--black-highest);
}

a {
	color:                                                     var(--black-high);
}

a:hover,
a:active,
a.tab-focus {
  color:                                                    var(--black-highest);
}

#login {
	width:                                                     500px;
	max-width:                                                 94%;
	padding:                                                   5vh 0 0 !important;
	margin:                                                    0 auto;
}

#login h1 {
	text-align:                                                center;
	background:                                                transparent;
	border:                                                    none;
	box-shadow:                                                none;
	text-shadow:                                               none;
    background-image:                                       url('/wp-content/uploads/logo.png'), url('/wp-content/uploads/logo.webp');
    padding-bottom:                                         2vh;
    width:                                                  auto;
	height:                                                    28vh;
    background-size:                                        contain;
	background-position:                                       center center;
	background-repeat:                                         no-repeat;
	margin:                                                    0 auto;
	outline:                                                   0;
	overflow:                                                  hidden;
	display:                                                   block;
}

#login h1 a {
	display:                                                   none;
}

.login #pass-strength-result {
    font-weight:                                            600;
    margin:                                                 -1px 5px 16px 0;
    padding:                                                6px 5px;
    text-align:                                             center;
    width:                                                  100%;
}
#pass-strength-result.strong {
    background-color:                                       rgba(0,0,0,0.2);
    border:                                                 1px solid var(--black-highest);
	opacity:                                                   1;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
  	width:                                                   90%;
	font-size:                                                 19px;
  	padding:                                                 6px 10px;
}

input[type="checkbox"],
input[type="radio"] {
	border:                                                    1px solid var(--black-low);
	margin-right:                                              3px !important;
}

input[type="checkbox"]:checked::after {
  	transform:                                               translate(0);
	content:                                                   "";
}

input#wp-submit {
	font-size:                                                 19px;
	padding:                                                   3px 15px;
}

.screen-reader-text {
	display: 									none !important
}

:root {
	--input-border:                                            1px solid var(--black-low);

	--input-color-focus:                                       var(--black);

	--button-color:                                            var(--black);
	--button-background:                                       var(--black-lowest);
	--button-border:                                           1px solid var(--black-low);

	--button-background-hover:                                 var(--white-high);
	--button-border-hover:                                     1px solid var(--black-med);
}

.login form {
	margin-top:                                                20px;
	margin-left:                                               0;
	padding:                                                   10px 25px;
	overflow:                                                  hidden;
	text-align:                                                center;
	background:                                                var(--light-grey);
	border:                                                    1px solid var(--black-low);
}

.login form.shake {
	animation:                                                 shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
	animation-iteration-count:                                 3;
	transform:                                                 translateX(0);

}

@keyframes shake {
	25% { transform: translateX(-20px) }
	75% { transform: translateX(20px) }
	100% { transform: translateX(0) }
}

@media (prefers-reduced-motion: reduce) {
	.login form.shake {
		animation:                                                none;
		transform:                                                none;
	}
}

.login form p {
	margin:                                                    1em 0;
	text-align:                                                center !important;
	font-size:                                                 95%;
}

.submit.reset-pass-submit {
	display:                                                   flex;
	gap:                                                       0.5em 3%;
}

.submit.reset-pass-submit * {
	font-size:                                                 21px;
	flex:                                                      1;
}

.login form p#reg_passmail {
	/*margin-bottom: 								-1em;*/ /*not needed for basic register page*/
}

.login p.message,
div#login_error {
	margin-top:                                                3vh !important;
	text-align:                                                center;
}

.login form label {
	display:                                                   inline-block;
	margin-bottom:                                             0.3em;
}

.login form label[for="user_login"],
.login form label[for="user_pass"] {
	font-weight:                                               bold;
}

.login #nav,
#backtoblog {
	margin:                                                    16px 0;
	text-align:                                                center;
}

#backtoblog {
	word-break:                                                break-word;
}

p.message.register {
	text-align:                                                center;
	margin:                                                    3vh 0 0;
	font-size:                                                 30rem;
	font-weight:                                               bold;
}

button.button-secondary.wp-hide-pw.hide-if-no-js {
	display:                                                   none !important;
}

input[type="checkbox"]:checked::after, input[type="radio"]:checked::after {
  background-color:                                         var(--black);
}

:focus {
	outline:                                                   3px dotted red !important;
}