/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
  /*--------------------------------------------------------------
# 	Custom Variables
--------------------------------------------------------------*/
:root {
  --primary: rgb(237,15,105);
  --secondary: rgb(57,54,54);
  --lighter: rgb(243,237,245);
  --light: rgb(223,217,225);
  --grey: rgb(122,111,114);
  --dark: rgb(57,54,54);
  --darker: rgb(44,41,41);
}

/*--------------------------------------------------------------
# 	Login
--------------------------------------------------------------*/
body.login {
	background-color: var(--darker);
}
#login {
	padding-top: 3em;
}
.login form {
	margin-top: 0;
	margin-left: 0;
	padding: 3em;
	font-weight: 400;
	overflow: hidden;
	background-color: var(--darker);
	border: none;
	box-shadow: 0 0.5em 1em rgba(0,0,0,0.25);
}
#login h1 a, 
.login h1 a {
	background-image: url('../images/logo.svg');
	background-size: 320px 110px;
	width: 100%;
	height: 100%;
	margin-bottom: 0.25em;
	padding-bottom: 0;
	font-size: 110px;
	line-height: 1;
}
.login #login_error,
.login .message {
    border-left: 4px solid var(--primary);
    background-color: #fff;
}
.login form label {
	color: var(--light);
}
.login form .input, 
.login form input[type=checkbox], 
.login input[type=text] {
	background-color: var(--dark);
	border: none;
}
input[type=text],
input[type=password] {
	color: #fff;
	outline: none;
	transition: all 0.3s ease;
}
input[type=text]:focus,
input[type=password]:focus {
	box-shadow: 0 0 8px rgba(237,15,105,0.75);
}
.wp-core-ui .button, 
.wp-core-ui .button-secondary {
	color: var(--primary);
}
.wp-core-ui .button-secondary:hover, 
.wp-core-ui .button.hover, .wp-core-ui .button:hover {
	color: var(--dark);	
}

body.login div#login form#loginform p.submit input#wp-submit {
	text-shadow: none;
	border: none;
	color: #fff;
	background-color: var(--primary);
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
body.login div#login form#loginform p.submit input#wp-submit:hover {
	background-color: var(--primary);
}
body.login div#login p#nav a,
body.login div#login p#backtoblog a,
.privacy-policy-page-link a {
	color: var(--light);
}