header.header .mobile-header,
header.header .logo,
header.header .navbar{
    display:none;
}

main .logo{
    background:url(../assets/CQ-logo.webp) no-repeat center;
    background-size:cover;
    flex:none;
    height: 300px;
    width: 300px;
    z-index: 10;
}

body main .container{
    margin-top:0px
}

main .container .wrapper .title-text{
    opacity:0;
    transition:1200ms opacity 550ms;
}

body.in main .container .wrapper .title-text{
    opacity:1;
}

main .container .wrapper .form-container{
    margin-top:12px;
    opacity:0;
    transition:1200ms opacity 550ms;
}

body.in main .container .wrapper .form-container{
    opacity:1;
}

main .container .wrapper .signup-link{
    margin-top:10px;
}

main .container .wrapper .text-link a,
main .container .wrapper .text-link a:visited,
main .container .wrapper .text-link a:active{
    color:white;
    font-weight:600;
}

/* FORM */
.container form .form-control{
    padding:4px 8px;
    width:100%;
}

.container form .fieldset #confirm_password{
    margin-bottom:.5rem;
}

.container form .fieldset .field{
    flex:unset;
}

.container form .login-link{
    margin-top:20px;
    padding-left:15px;
    padding-right:15px;
}

.container form .login-link a,
.container form .login-link a:visited,
.container form .login-link a:active{
    color:white;
    font-weight:600;
}

.container form .field:has(.btn){
    margin:0 auto;
}

.container form .field:has(.btn) .btn{
    background:rgb(59, 140, 255);
    color:white;
}

.container form .field:has(.btn) .btn:hover{
    background:rgb(137, 185, 253);
}

@media screen and (min-width: 768px) {
    header.header .logo {
        left: 50%;
        height: 150px;
        top:50px;
        transform: translate3d(-50%, 0, 0);
        width: 150px;
    }

    .container form .login-link a:hover{
        color:white;
    }
}