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

:root {
    --main-color: #192649;
    --secondary-color: #7EAA55;
    --brown: #7EAA55;
}

body {
    font-family: 'Montserrat', sans-serif;
}

body.login {
    background-color: var(--secondary-color);
    background-image: url(/wp-content/uploads/2023/11/IMG_3062-scaled.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
body.login::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #344453cc;
    z-index: -1;
}

#login {
    width: 400px;
    max-width: 96vw;
}

#login h1 a {
    width: 150px;
    height: 150px;
    background-image: url(/wp-content/uploads/2023/09/wtla-logo.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#login h1 a:focus {
    box-shadow: none;
}

/* Links */
#login p#nav a,
#login p#backtoblog a {
    color: #fff;
}
#login p#nav a:hover,
#login p#backtoblog a:hover {
    color: var(--main-color);
}

#login label {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

#login input[type=text],
#login input[type=password],
#login .button.wp-hide-pw {
    min-height: 50px;
    padding: 0.2rem 0.6rem;
    border-radius: 0;
}
#login input[type=checkbox] {
    border-radius: 0;
}
#login input[type=checkbox]:checked::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23344453cc'/%3E%3C/svg%3E");
}
#login input[type=text]:focus,
#login input[type=password]:focus,
#login input[type=checkbox]:focus,
#login .button.wp-hide-pw:focus {
    border: 1px solid var(--main-color);
    box-shadow: none;
    outline: none;
}
#login .button.wp-hide-pw:active .dashicons,
#login .button.wp-hide-pw:focus .dashicons {
    color: var(--main-color);
}

#login .forgetmenot {
    margin-top: 1rem;
}

/* Login Button */
#login input[type=submit] {
    min-height: 50px;
    padding: 0 1.2rem;
    background-color: var(--main-color);
    border-color: var(--main-color);
    border-radius: 32px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;

}
#login input[type=submit]:hover,
#login input[type=submit]:focus,
#login input[type=submit]:active {
    background-color: var(--brown);
    border-color: var(--brown);
    outline-color: var(--brown);
}

/* Hide Password */
#login .dashicons {
    color: var(--secondary-color);
}