#login h1 a, .login h1 a {
    background-image: url(/wp-content/uploads/2023/03/banner.png);
    height:max(5vw, 200px);
    width:318px;
    background-repeat: no-repeat;
    padding-bottom: 0;
    margin-bottom: 0;
    background-size: 100%;
    background-position: center bottom;
}

body.login #login {
    padding-top: 20px;
}


/* Rearrange the order of everything so that Social login is first */
#loginform {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}
#loginform > .heateor_sl_outer_login_container {
    order: 1;
    border-bottom: 1px solid #ccc;
    margin-bottom: 35px;
}
#loginform > .user-pass-wrap,
#loginform > p {
    order: 2;
}

/* Style the social login stuff nicely */
#loginform > .heateor_sl_outer_login_container .heateor_sl_title {
    text-align: center;
}
#loginform > .heateor_sl_outer_login_container .heateor_sl_login_ul > li > .heateorSlLogin {
    width: 50px;
    height: 50px;
    padding: 10px !important;
    float: none;
    display: block;
    margin: 25px auto 0;
}
#loginform > .heateor_sl_outer_login_container .heateor_sl_login_ul > li {
    display: block;
    float: none;
    margin: 0 auto;
}
#loginform > .heateor_sl_outer_login_container .heateor_sl_login_ul::after {
    content: "Login with Twitch";
    display: block;
    text-align: center;
    font-size: 24px;
    margin-bottom: 35px;
}

/* Shrink down the normal form a bit */
#loginform > p:first-child::before {
    display: block;
    content: "Or, if you have a user account, login below:";
    color: #555;
}

#loginform label {
    font-size: 13px;
    color: #888;
}
#loginform .button.wp-hide-pw .dashicons {
    opacity: 0.5;
}
.wp-core-ui #loginform .button-primary {
    background: #999;
    border-color: #555;
}

#loginform form .input,
#loginform input[type="password"],
#loginform input[type="text"] {
    margin: 0 6px 6px 0;
    font-size: 13px;
    min-height: 30px;
    border-color: #AAA;
    color: #555;
}

#wfls-prompt-overlay {
    z-index: 1;
}