.btn-primary {
    background-color: rgb(224, 169, 28) !important; /* background */
    border-color: rgb(224, 169, 28) !important;     /* border */
    color: white !important;                      /* text */

    /* remove purple glow on focus */
}

.btn-primary:hover, .btn-primary:focus , .btn-primary:active {
    color: black !important;
    background-color: rgb(238, 188, 63) !important;
    border-color: rgb(238, 188, 63) !important;
}

.register-link{
    color: rgb(224, 169, 28);
}

.register-link:hover{
    color: rgb(238, 188, 63);
}


.LoginContainer{
    height: clamp(450px, 45vh, 600px);
    width: 100%;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* image layer */
.LoginContainer::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/static/images/bard-background.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 0;
}

/* dark gradient so that we can read the text over top */
.LoginContainer::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 80%, rgba(0,0,0,1)  90%);
    z-index: 1;
}

.LoginContainer > * { position: relative; z-index: 2; }


.form-control:focus {
    border-color: rgb(224, 169, 28);
    box-shadow: 0 0 5px rgb(224, 169, 28);
    outline: none;
}

.form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* smooth transition */
}