html, body {
    height: 100%;
}

body {
    display: inline-block;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient( 135deg, rgba(#242e4d, .9), rgba(#897e79, .9) );
    font-family: DroidSans, Droid Sans, Verdana;
}

.login-form {
    margin: 0 auto;
    padding: 2em;
    position: relative;
    align-items: center;
    justify-content: center;
    /*background: #2A7B9B;
    background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);*/
    /*background: #0485CB;
    background: linear-gradient(90deg,rgba(4, 133, 203, 1) 52%, rgba(0, 212, 255, 1) 100%);*/
    background: #0485CB;
    background: linear-gradient(90deg,rgba(4, 133, 203, 1) 3%, rgba(255, 255, 255, 1) 100%);
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
    border-radius: 10px;
}

    .login-form > div {
        text-align: center;
        padding: 5px 0;
    }

.login-link {
    display: grid;
    grid-template-columns: auto min-content auto min-content auto;
    align-items: center;
    grid-gap: 0px;
}

    .login-link > input[type=button] {
        text-align: center;
        padding: 10px 0;
        background: none;
        border:none;
        width:auto;
        cursor:hand;
        cursor:pointer;
    }

.sep::after {
    content: '\f0eb'; /* Unicode for the lightbulb icon */
    font-family: "Font Awesome 6 Free"; /* Important for icon rendering */
    font-weight: 900; /* Font weight for solid icons */
    margin-left: 8px;
    color: gold;
}

input[type=password], input[type=text] {
    border-radius: 10px;
    cursor:pointer;
    cursor:hand;
}

.lf--submit {
    margin: 0 auto;
    padding: 1em;
    background: linear-gradient( to right, #35c3c1, #00d6b7 );
    border: 0;
    color: #fff;
    cursor: pointer;
    text-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    cursor: pointer;
    cursor: hand;
}

/*-------------------- Desktop--------------------*/
@media screen and (min-width: 600px) {
    .login-form {
        width: 50vw;
        /*max-width: 15em;*/
    }

    input[type=password], input[type=text] {
        height: 2em;
        font-size: 1.2em;
        width: 40vw;
        margin-bottom: 0px;
        padding:5px;
    }

    .lf--submit {
        font-size: 1.2em;
        font-weight: 600;
    }
}

/*-------------------- Mobile --------------------*/
@media screen and (max-width: 600px){
    .login-form {
        width: 70vw;
        /*max-width: 15em;*/
    }

    input[type=password], input[type=text] {
        height: 2em;
        font-size: 0.7em;
        width: 99%;
        padding: 5px;
    }

    .lf--submit {
        font-size: 1em;
        font-weight: 600;
        padding:0.5em;
    }
}