.login_page{
    padding: 3rem 2rem 3rem 2rem;
    border: 1px solid lightgray;
    border-radius: 0.5rem;
    background-color: white;
}

.login_form{
    background: linear-gradient(-45deg, #e79200,#ff9900,#ffca37,#fbb947);
    background-size: 400%,400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

.brand img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
    padding: 1rem 2rem 3rem 2rem;
}

 @keyframes gradient {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
#account-login-btn{
    font-size: small;
}

.copyright{
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Custom button styles */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-google img {
    width: 20px;
    height: 20px;
}

.btn-account {
    border-color: #6c757d;
    color: #6c757d; /* muted text */
    background-color: white;
}

.btn-account:hover {
    background-color: #f8f9fa;
    color: #212529;
}

.or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #6c757d;
    margin: 1.5rem 0;
}
.or-separator::before,
.or-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}
.or-separator:not(:empty)::before { margin-right: .5em; }
.or-separator:not(:empty)::after { margin-left: .5em; }