/*--Login Screen-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.login-holder{
    justify-content: center;
    align-items:     center;
    display:         flex;

    padding: 0px;
    margin:  0px;
    height:  100%;
    width:   100%;
}
.login-art{
    background-color: var(--accent-main);
    padding: 0px;
    height:  100vh;
    width:   50%;

    position:      relative;
    justify-content: center;
    align-items:     center;
    display:         flex;
}
.login-art-holder{
    justify-content: center;
    align-items:     center;
    display:         flex;
}
.login-art-mascot{
    background-image:    url("/assets/mascot/virtue-ninja-head.webp");
    background-position: center center;
    background-repeat:   no-repeat;
    background-size:     contain;

    aspect-ratio:    1;
    height:       8rem;
    margin-right: 1rem;
}
.login-art-text{
    font-size:  4rem;
    font-weight: 600;
}
.login-window-holder{
    height:  calc(100vh - 2rem);
    padding: 1rem;
    width:   50%;

    justify-content: center;
    align-items:     center;
    display:         flex;
}
.bottom-wave{
    position: absolute;
    display:  none;
    height:   7rem;
    width:    100%;
    left:     0px;
    bottom:   0px;
}

/*--Login Window-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#login-window{
    max-width: 100%;
    width:    30rem;
}
.login-row{
    margin-bottom: 1rem;
    width:         100%;
}
.login-text{
    font-weight: 600;
    margin-left: 0.25rem;
}
#login-window input{
    width: calc(100% - 1rem);
}
#login-button, #register-button{
    margin-top: 2rem;
    width:      100%;
}
.login-register-holder{
    justify-content: center;
    align-items:     center;
    display:         flex;

    margin-bottom: 0.5rem;
    margin-top:    1.5rem;
}
.login-register-text{
    margin-right: 0.5rem;
    text-align: right;
}
.login-register-holder a{
   width: fit-content;
}

/*--Mobile Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:768px){
    .login-holder{
        flex-direction: column;
    }
    .login-art{
        align-items: flex-start;
        height: 15rem;
        width:   100%;
    }
    .login-art-holder{
        margin-top: 2rem;
    }
    .login-art-mascot{
        height:       6rem;
        margin-right: 1rem;
    }
    .login-art-text{
        font-size:  3rem;
        font-weight: 600;
    }
    .bottom-wave{
        display: block;
    }
    .login-window-holder{
        width:  calc(100% - 2rem);
        height: fit-content;
    }
}
@media only screen and (max-width:768px) and (orientation:portrait){
    .login-register-holder{
        flex-direction: column;
    }
    .login-register-text{
        margin-right: 0px;
    }
    .login-register-holder > *{
        text-align: center;
    }
}
@media only screen and (max-height:500px) and (orientation:landscape){
    .login-holder{
        margin-bottom: 2rem;
    }
}