/* .loginContainer{
    width: 100vw;
    height: 100vh;
    display: flex;
} */

section#loginIllustrator {
    width: 80%;
    height: 100vh;
    background: linear-gradient(150deg, #A4B9D8 0, #153E7C 66%, #0B2143 80%, black 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

section#loginIllustrator svg {
    width: 70%;
    filter: drop-shadow(0 2px 5px rgba(164, 185, 216, 0.7));
}

section#loginBox{
    width: 40%;
    height: 100vh;
}

section#loginBox header{
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section#loginBox header svg {
    color: var(--blueLionsoft);
    width: 10vw;
}


section#loginBox footer{
    width: 100%;
    height: 5vh;
    text-align: center;
    font-size: 0.8vw;
    font-weight: bold;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


section#loginBox main{
    width: 100%;
    height: 63vh;
    text-align: center;
    display: flex;
    overflow: hidden;
}

section#loginBox main form {
    margin-top: auto;
    margin-bottom: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
}

section#loginBox main form.close {
    opacity: 0;
    visibility: collapse;
    transform: translateY(100%);
}

@media(orientation: portrait) {
    section#loginBox{
        width: 100%;
    }

    section#loginBox header svg {
        width: 20vh;
    }

    section#loginBox footer{
        font-size: 1.5vh;
    }
}