@import url('css-vars.css');
@import url('main.css');

body {
    background-color: hsl( var(--clr_h), 92.5%, 97.5% );
    /* background-image: url('/assets/img/concrete-mixer-vehicle-toy.png');
    background-size: cover;
    background-position: 0%;
    background-repeat: no-repeat; */
    /* image('/assets/img/concrete-mixer-vehicle-toy.png'); */
}

.login .page-title { 
    font-weight: 500; 
}

.login {
    background-image: url('/assets/img/background-001.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.login .left-side {
    /* background-color: hsla( var(--clr_h), 92.5%, 57.5%, 0.9 ); */
    background: linear-gradient( to bottom, hsla( var(--clr_h), 92.5%, 57.5%, 0.99 ) 10%, 
                                            hsla( var(--clr_h), 92.5%, 57.5%, 0.97 ) 35%, 
                                            hsla( var(--clr_h), 92.5%, 57.5%, 0.92 ) 45%, 
                                            hsla( var(--clr_h), 92.5%, 57.5%, 0.92 ) 55%, 
                                            hsla( var(--clr_h), 92.5%, 57.5%, 0.96 ) 60%, 
                                            hsla( var(--clr_h), 92.5%, 57.5%, 0.99 ) 90% );
    color: hsl( var(--clr_h), 92.5%, 95% );
    align-content: center;
}

.login .right-side {
    /* background-color: hsla( var(--clr_h), 92.5%, 92.5%, 0.975 ); */
    background: linear-gradient( to bottom, hsla( var(--clr_h), 92.5%, 92.5%, 0.98 ) 10%, 
                                            hsla( var(--clr_h), 92.5%, 92.5%, 0.95 ) 45%, 
                                            hsla( var(--clr_h), 92.5%, 92.5%, 0.99 ) 90% );
    color: hsl( var(--clr_h), 92.5%, 17.5% );
    align-content: center;
}

.login .page-text {
    text-align: left;
}

.login #login-text-page-content {
    align-content: center;
    overflow: auto;
}

.login #login-text-page-content > div {
    align-items: center;
}

.login-border {
    background-color: hsl(var(--clr_h), 97.5%, 95.5%);
    border-width: 2px;
    border-style: solid;
    border-color: hsl( var(--clr_h), 92.5%, 92.5% );
    /* border-color: transparent; */
    /* border-image: hsl( var(--clr_h), 92.5%, 92.5% ) 10 round; */
    /* border-image: linear-gradient(to bottom right, blue, red) 2 stretch; */
    /* border-image-width: 2px; */
    border-radius: 5px;
    box-shadow: 0 3px 9px hsla( var(--clr_h), 92.5%, 50%, 0.35 );
    transition: 0.25s ease-in-out;
}
.login-border:hover {
    background-color: hsl(var(--clr_h), 97.5%, 96.5%);
    border-color: hsl( var(--clr_h), 92.5%, 97.5% );
    /* border-image-width: 3px; */
    /* border-image: linear-gradient(to bottom right, red, blue) 5 stretch; */
    box-shadow: 0 2px 11px hsla( var(--clr_h), 92.5%, 35%, 0.45 );
    transition: 0.25s ease-in-out;
}

.login #login-text-page .owner-title {
    cursor: default;
    position: sticky;
    top: 0px;
    background-color: inherit !important;
    color: hsl( 60, 92.5%, 87.5% );
    background-blend-mode: screen;
    mask: linear-gradient( hsla( var(--clr_h), 92.5%, 67.5%, 1 ) 10%, hsla( var(--clr_h), 92.5%, 67.5%, 0.95 ) 80%, transparent 100% );
    backdrop-filter: blur(3px);
    text-shadow:  0px 0px 8px hsla( var(--clr_h), var(--clr_bg_s), 6.25%, 0.9 );
}

.login .login-form {
    background-color: hsla( var(--clr_h), 92.5%, 92.5%, 0.75 );
}

.login #login-form-page .owner-title {
    color: hsla( var(--clr_h), 92.5%, 52.5%, 0.75 );
}

.login .login-form .page-title { 
    color: hsl( var(--clr_h), 92.5%, 47.5% );
}