.logged-out-main
{
    width: 100%;
    height: 100vh;
    background: var(--sc-background);
    position: relative;
}

#login-or-signup-form
{
    max-width: 50vw;
    position: absolute;
    width: fit-content;
    left: 50%;
    top: 50%;
    transform: translate3D(-50%, -50%, 0);
}

#logo/* ? This is used in every page like register, forgot password, reset password, etc.*/
{
    position: absolute;
    bottom: calc(100% - 2 * 1rem);
    left: 0px;
    max-width: 80%;
    /* left: 14%; */
    border:none;
    z-index:3;
}


#login-or-signup-form-card
{
    box-shadow: var(--std-box-shadow);
    border-radius: 1rem;

    padding: 2rem;
    margin: 0 auto;
    
    background: var(--sc-surface-background);
    color: var(--sc-surface-foreground);
}

#login-or-signup-form-card > p {font-size: 1.5vw;}

/* The login/signup buttons */
#login-or-signup-form-buttons-container {display: flex; margin-top: calc(2 * 1rem);}
#login-or-signup-form-buttons-container > div {margin: 0 1rem 0 1rem;}


@media only screen
and (max-width: 900px)/* and (orientation: portrait)*/
{
    #logo
    {
        top: 10px;
        left: 10px;
        width: calc(100% - 10px);
        max-width: none;
    }

    #login-or-signup-form
    {
        position: fixed;

        width: 100%;
        height: 100%;
        max-width: none;
        
        bottom: 0px;
    }

    #login-or-signup-form-card
    {
        width: 100%;
        height: 100%;
        
        background: none;
        box-shadow: none;
    }
    
    #login-or-signup-form-card > p
    {
        position: absolute;
        font-size: 2rem;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }

    #login-or-signup-form-buttons-container
    {
        display: block;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }
    #login-or-signup-form-buttons-container > .button
    {
        --button-font-size: 1.5rem;
        --double-button-font-size: calc(var(--button-font-size) * 2);
        --half-button-font-size: calc(var(--button-font-size) / 2);
        
        height: var(--double-button-font-size);
        padding-top: var(--half-button-font-size);
        padding-right: var(--button-font-size);
        padding-bottom: var(--half-button-font-size);
        padding-left: var(--button-font-size);

        line-height: var(--button-font-size);
        font-size: var(--button-font-size);

        border-radius: var(--button-font-size);
        width: calc(100% - 20px);
        margin: 10px auto;
    }

}