:root {
    --logo: url("screenshot.png");
    --background-image: url("screenshot.png");
    --clr-primary: #1e73be;
    --clr-primary-2: #374c7c;
    --border-radius: 10px;
    --transition: all 0.4s ease;
    --logo-height: 10rem;
    --box-shadow: 0 10px 25px #293d4729;
}

/** FRONTEND **/
body.login {
    background: #ffffff;
    background-image: var(--background-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body.login div#login h1 a {
    background-image: var(--logo);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: var(--logo-height);
}

body.login #loginform,
body.login input {
    border-radius: var(--border-radius);
}

body.login #wp-submit {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    transition: var(--transition);
    border-radius: var(--border-radius);
}

body.login #wp-submit:hover,
body.login #wp-submit:focus {
    background: var(--clr-primary-2);
    border-color: var(--clr-primary-2);
    transform: scale(1.1);
}

body.login #nav a,
body.login #backtoblog a {
    display: inline-block;
    color: var(--clr-primary);
    transition: var(--transition);
    border: 3px solid var(--clr-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    font-size: 1rem;
    padding: 1rem 2rem;
    background: white;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus {
    background-color: var(--clr-primary);
    color: white;
    transform: scale(1.1);
}

body.login .pb-tailoredlogin-sidebar {
    display: none;
}