@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

html,
body {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	position: relative !important;
}

body {
	background-color: #eee !important;
}

body:before {
	background-image: url("../images/symbol.svg") !important;
	background-position: 45vw !important;
	background-repeat: no-repeat !important;
	background-size: auto 135vh !important;
	bottom: 0 !important;
	content: "" !important;
	filter: brightness(0) !important;
	height: 100% !important;
	left: 0 !important;
	opacity: .035 !important;
	position: fixed !important;
	top: 0 !important;
	width: 100% !important;
	z-index: -1 !important;
}

html *::selection,
body *::selection {
	background: transparent !important;
}

* {
	box-sizing: border-box !important;
	outline: inherit !important;
	resize: none !important;
}

a:focus {
	box-shadow: inherit !important;
}

body.login div#login h1 a {
	background-image: url("../images/logo.svg") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	border-radius: 0 !important;
	display: block !important;
	height: 70px !important;
	width: 90% !important;
}

#login_error,
.message,
.success {
	border-left-color: var(--upside-color) !important;
	border-radius: 3px !important;
	color: #666 !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	margin-bottom: 15px !important;
	padding: 15px !important;
}

#login_error a,
.message a,
.success a {
	color: var(--upside-color) !important;
}

#loginform,
#lostpasswordform,
#registerform {
	background: #fff !important;
	border: 0 !important;
	border-radius: 3px !important;
	color: #333 !important;
	margin-top: 0 !important;
	padding: 25px !important;
}

#loginform #wp-submit,
#lostpasswordform #wp-submit,
#registerform #wp-submit {
	background: var(--upside-color) !important;
	border: 1px solid var(--upside-color) !important;
	border-radius: 3px !important;
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2) !important;
	font-weight: bold !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	padding: 10px !important;
	text-align: center !important;
	text-shadow: none !important;
	width: 100% !important;
}

#nav,
#backtoblog {
	text-align: center !important;
}

#nav a:hover,
#backtoblog a:hover {
	color: var(--upside-color) !important;
}

.login label {
	font-size: 13px !important;
	font-weight: bold !important;
	margin-bottom: 7px !important;
}

.login .forgetmenot,
.login .submit {
	float: inherit !important;
	width: 100% !important;
}

.login .forgetmenot {
	margin-bottom: 15px !important;
}

.login .forgetmenot label,
.login .pw-weak label {
	margin-bottom: 0 !important;
}

input[type=text],
input[type=search],
input[type=radio],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
input[type=password],
input[type=checkbox],
input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
select,
textarea {
	border-color: #ccc !important;
	border-radius: 3px !important;
	font-size: 14px !important;
	margin: 0 0 15px !important;
	padding: 10px !important;
	width: 100% !important;
}

input[type=checkbox],
input[type=radio] {
	margin: 0 5px 0 0 !important;
	padding: 5px !important;
	width: auto !important;
}

input[type=text]:focus,
input[type=search]:focus,
input[type=radio]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=password]:focus,
input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
	border-color: #999 !important;
	box-shadow: inherit !important;
}

.wp-core-ui .button span,
.wp-core-ui .button-secondary span {
	color: var(--upside-color) !important;
}