.login__background {
    background-image: url("/static/login/img/newloginback.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.login__container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 35% 15% 15% 35%;
    grid-template-rows: 20% 30% 30% 20%;
    grid-template-areas:
            ". . . ."
            ". login login ."
            ". login login ."
            ". . . .";
}

.login__form-container {
    grid-area: login;
    background-color: rgba(210, 234, 255, .3);
    border-radius: 5%;
}

.login-form__logo {
    height: 7em;
    width: auto;
}

.login-form {
    height: 100%;
    width: 100%;
    font-size: 1.6em;
    display: grid;
    grid-template-columns: 20% 30% 30% 20%;
    grid-template-rows: 30% 10% 10% 4% 10% 26%;
    grid-template-areas:
            ". logo logo ."
            ". . . ."
            ". lbutton lbutton ."
            ". . . ."
            ". sbutton sbutton ."
            ". extra extra .";
}


.login-form__logo-container {
    grid-area: logo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


.login-form__description {
    position: absolute;
    top: 105px;
    color: white;
    font-weight: 600;
}


.login-form__description-text {
    font-size: 1.2em;
}


.login-form__login-button-container {
    grid-area: lbutton;
    display: flex;
    justify-content: center;
    align-items: center;
}


.login-form__signup-button-container {
    grid-area: sbutton;
    display: flex;
    justify-content: center;
    align-items: center;
}


.login-form__extra {
    grid-area: extra;
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    color: white;
}


.login-form__login-button {
    height: 4em;
    width: 20em;
    appearance: none;
    background-color: #5697f7;
    border-radius: 5px;
    border-style: none;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.9em;
    line-height: normal;
}


.login-form__signup-button {
    height: 4em;
    width: 20em;
    appearance: none;
    background-color: #ac69de;
    border-radius: 5px;
    border-style: none;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.9em;
    line-height: normal;
}


.login-form__login-button-text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

    .login__container {
        grid-template-rows: 20% 30% 30% 20%;
        grid-template-columns: 10% 40% 40% 10%;
        font-size: 1.9rem;
    }


    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .login-form__logo {
        height: 7em;
    }


    .login-form__description {
        top: 150px;
    }
}


@media only screen
  and (min-device-width: 912px)
  and (max-device-width: 1023px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

    .login__container {
        grid-template-rows: 20% 30% 30% 20%;
        grid-template-columns: 10% 40% 40% 10%;
        font-size: 2.0rem;
    }


    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .login-form__logo {
        height: 7em;
    }


    .login-form__description {
        top: 150px;
    }
}



@media only screen
  and (min-device-width: 601px)
  and (max-device-width: 911px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

    .login__container {
        grid-template-rows: 20% 30% 30% 20%;
        grid-template-columns: 10% 40% 40% 10%;
        font-size: 1.5rem;
    }


    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .login-form__logo {
        height: 7em;
    }


    .login-form__description {
        top: 120px;
    }
}


@media only screen
  and (min-device-width: 1181px)
  and (max-device-width: 1536px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

    .login__container {
        grid-template-rows: 5% 45% 45% 5%;
        grid-template-columns: 25% 25% 25% 25%;
        font-size: 1.4rem;
    }


    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .login-form {
        grid-template-rows: 30% 10% 10% 1% 10% 29%;
    }


    .login-form__logo {
        height: 7em;
    }


    .login-form__description {
        top: 8em;
    }

    .login-form__signup-button {
        width: 25em;
    }

    .login-form__login-button {
        width: 25em;
    }
}


@media only screen
  and (min-device-width: 601px)
  and (max-device-width: 1180px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

    .login__container {
        grid-template-rows: 5% 45% 45% 5%;
        grid-template-columns: 10% 40% 40% 10%;
        font-size: 1.2rem;
    }


    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .login-form {
        grid-template-rows: 30% 10% 10% 5% 10% 29%;
    }


    .login-form__logo {
        height: 7em;
    }


    .login-form__description {
        top: 120px;
    }

    .login-form__signup-button {
        width: 25em;
    }

    .login-form__login-button {
        width: 25em;
    }
}


@media only screen
    and (min-width: 320px)
    and (max-width: 601px)
    and (orientation: portrait) {

    .login__container {
        grid-template-rows: 20% 30% 30% 20%;
        grid-template-columns: 10% 40% 40% 10%;
        font-size: 1.0rem;
    }


    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .login-form__logo {
        height: 7em;
    }


    .login-form__description {
        top: 95px;
    }
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 932px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    .login__container {
        grid-template-rows: 0% 50% 50% 0%;
        grid-template-columns: 10% 40% 40% 10%;
        font-size: 0.9rem;
    }

    .login__form-container {
        grid-column: 2/4;
        grid-row: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-form__logo {
        height: 7em;
    }

    .login-form__description {
        top: 90px;
    }
}