body {
    font-family: 'Montserrat';
}

#login {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px !important;
}

#wp-submit {
    border: 0px !important;
    background-color: #ff5e1c !important;
}

input:focus {
    border-color: #ff5e1c !important;
    box-shadow: 0 0 0 1px #ff5e1c !important;
    outline: 2px solid transparent !important;
}

#loginform {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000 !important;
    }

    .login h1 a {
        filter: invert(1) hue-rotate(180deg);
    }

    #loginform {
        background: rgba(17, 17, 17, 0.8);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(8.1px);
        -webkit-backdrop-filter: blur(8.1px);
        border: 1px solid rgba(17, 17, 17, 0.31);
    }

    #loginform > p > label,
    #loginform > div > label,
    #nav > a,
    #backtoblog > a {
        color: #fff !important;
    }

    input.input {
        background-color: #000 !important;
        color: #fff !important;
    }

    #rememberme {
        background: #000 !important;
    }

    #particles-js > canvas {
        filter: blur(1px) !important;
    }

    #loginform > div > div > button > span {
        color: #fff !important;
    }

    #rememberme::before {
        filter: hue-rotate(150deg) !important;
    }
}