:root {
    --highlight-color: #aa0000;
}
body { font-size: 16px; }
input, select { font-size: 100%; }
body:before {
    content: ''; position:fixed; z-index:-1;width:100%; height:100%; background-size: cover; image-rendering: pixelated;
    background-color: #000000; background-image: radial-gradient(circle, rgba(0,0,0,0) -30%, rgba(0,0,0,1) 70%), url(//picsum.photos/32/32.webp?blur=10);
    /*background-color: #f1f1f1;background-image: radial-gradient(circle, rgba(0,0,0,0) -50%, rgba(241,241,241,1) 70%), url(//source.unsplash.com/random/32x32);*/
}
#login:before {
    content: "Music.\00a0 It's Awesome,\00a0 Innit?"; display:block; position:absolute; color:#fffff8; font-family: "Georgia", serif;
    font-size: 3em; left: 10%; top: 50%; transform: translateY(-50%); width: 16em; max-width: 30%; text-align: center; text-shadow: 1px 1px 1px #999
} /*#login:before {color:#111;text-shadow:none}*/
/*#login:after {content: "© 2020 Musicboxd. All Rights Reserved.";display: block;text-align: center;position: absolute;bottom: 1em;margin: 0 auto;font-size: .7em;opacity: .2;}*/
a:hover, .login #nav a:hover, .login #backtoblog a:hover, .login h1 a:hover, input[type="checkbox"]:checked::before {color:var(--highlight-color)}
a:focus, a:active, .login #nav a:active, .login #backtoblog a:active, .login h1 a:active,
.login #nav a:focus, .login #backtoblog a:focus, .login h1 a:focus {color: #cc0000}
.login #nav, .login #backtoblog {padding:0}
.login #backtoblog, .login .privacy-policy-page-link {display:none}
.login #login h1 a {margin-bottom:0;padding-bottom:0; margin-left: 0;outline:0;-webkit-tap-highlight-color: rgba(0,0,0,0);    }
.login #login h1 a:hover {opacity:.9}
.login #login form {background:transparent; border:none;box-shadow:none;padding:0;margin-top:0}
.login #login .dashicons {color:#666666 !important}
.login #login .dashicons:hover, .login #login .dashicons:focus, .login #login .dashicons:active {color:#000000 !important}
.login #login {width: 50%;margin-left: 50%;padding: 25vh 2vw;padding-bottom:1em;box-sizing: border-box;background-color: #f1f1f1D9;border-left: 1px solid #000000D9;opacity:85%;}
.login #login * {max-width: 30em;}
.login #login > p:not(.message) {text-align:center}
.login #login form .input, .login input[type="text"], .login input[type="password"] {font-size:1.2em;padding-left:2em;}
.login #login form input[type="checkbox"]:checked {background-color:#fffff8}
.login #login input[type="checkbox"]:checked::before {content: "✗";font-size: 2em;font-family: -webkit-body;margin: .4em 0;margin-left: -.1em;}
.login #login .input, .login #login #rememberme {border-color: #dddddd !important;box-shadow:none !important}
.login #login .input:focus, .login #login .input:active, .login #login #rememberme:focus, .login #login #rememberme:active {border-color: #cccccc !important;}
.wp-core-ui .button, .wp-core-ui .button.button-large, .wp-core-ui .button.button-small, input#publish, input#save-post, a.preview {width:45%;padding:.5em;margin-bottom:.5em;text-transform:uppercase;font-weight:700;font-size:14px;line-height:2.71428571}
.wp-core-ui #lostpasswordform .button.button-large {width:100%}
.wp-core-ui .button, .wp-core-ui .button-secondary {background-color:#000000;border-color:#00000090;box-shadow:none !important}
.wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:hover,
.wp-core-ui .button:active, .wp-core-ui .button-secondary:active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active {background-color: #222222;border-color:transparent;}
.wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active {position:relative;top:2px}
.login #loginform .submit {position:relative; cursor: pointer;}
.login #loginform .submit:before {content: '\f160'; display:block; font-family:'dashicons'; color: #fffff8; position: absolute; z-index:10;line-height:1.6; right:.3em; font-size:2em;}
.login #loginform .submit:active:before, #loginform .submit:focus:before {content: '\f528';line-height: 1.8;}
.login #loginform #wp-submit {text-indent:-1em}
.login .message, .login .success, .login #login_error {display: flow-root; margin: 0.5em 0; max-width:28em !important; padding: 1em; box-shadow: none; background-color: var(--highlight-color); border-color: var(--highlight-color); border-radius: 4px; color: #ffffff}
.login .message a, .login .success a, .login #login_error a {color:#fffff8;opacity:.7;}
.login .message a:hover, .login .success a:hover, .login #login_error a:hover {color:#fffff8;opacity:1;}
.login .message {background-color: #00a0d2; border-color:#00a0d290;}
.login .success {background-color: #46b450;border-color:#46b45090;}
label[for="user_login"]:before, label[for="user_pass"]:before {color:#999999;content: "\f12f"/*"\f110"*/;position: absolute;margin-left: .3em;margin-top: 1.7em;z-index:10}
label[for="user_pass"]:before {content: "\f112";}
label[for="user_login"]:hover:before {color: var(--highlight-color);}
label[for="user_pass"]:hover:before {color: #FFD700;}
label:before {
    font-family: dashicons; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1;
    display: inline-block; width: 20px; height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-decoration: inherit; text-transform: none; text-rendering: auto; vertical-align: top; text-align: center; transition: color 0.1s ease-in; speak: none;
}
@media only screen and (max-height: 480px) and (max-width: 782px) {
    #login {padding-top:10vh;height:100vh !important;}
    #login h1 a {width:25% !important;padding-top: 25%;float:left;margin-right:1em !important;}
}
@media only screen and (min-height: 768px) {
    html, body, body:before, #login {height:100% !important;}
}
@media only screen and (max-width: 782px) {
    .login #login:before {display:none;}
    .login #login:after {width: calc(100% - 16vw);}
    .login #login {width: 100%;margin-left: 0vw;padding:8vh 8vw !important;border-left:none}
    .login #login * {margin-left: auto !important;margin-right: auto !important}
    .login #login h1 a {background-size: 100% !important; max-width: 50vw !important; max-height: 0; padding-top:45%;}
    .login #loginform .submit:hover:before {content: '\f528';line-height: 1.8;}
    .wp-core-ui .button-primary:hover {position:relative;top:2px}
    html, body {background-color: #f1f1f1;}
    html, body, body:before, .login #login {height: initial !important;}
    body:before {background-color: #5e5e5e; background-image: radial-gradient(circle, rgba(0,0,0,0) -30%, rgba(94,94,94,1) 70%), url(https://source.unsplash.com/random/900x700/?fruit);}
}



/*** iPhone and iOS Form Input Zoom Fixes ***/
/* Fix Input Zoom on devices older than iPhone 5: */
@media screen and (device-aspect-ratio: 2/3) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max  */
@media screen and (device-aspect-ratio: 9/16) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}