:root {
    --qegs-body-bg-dm: hsla(200,8%,8%,1.00);

    --qegs-primary-h: 208;
    --qegs-primary-s: 28%;
    --qegs-primary-l: 41%;

    --qegs-secondary-h: 208;
    --qegs-secondary-s: 28%;
    --qegs-secondary-l: 60%;

    --qegs-primary: hsla(var(--qegs-primary-h),var(--qegs-primary-s),var(--qegs-primary-l),1.00);
    --qegs-primary-darker: hsla(var(--qegs-primary-h),var(--qegs-primary-s),calc(var(--qegs-primary-l) - 15%),1.00);
      --qegs-secondary: hsla(var(--qegs-secondary-h),var(--qegs-secondary-s),var(--qegs-secondary-l),1.00);
    --qegs-secondary-transparent30: hsla(var(--qegs-secondary-h),var(--qegs-secondary-s),var(--qegs-secondary-l),0.30);
    --qegs-secondary-darker: hsla(var(--qegs-secondary-h),var(--qegs-secondary-s),calc(var(--qegs-secondary-l) - 15%),1.00);
    --qegs-header-text: hsla(0,0%,100%,1.00);
    --qegs-header-text-dm: hsla(210,14%,89%,1.00);
}

html {
    height: 100%;
}

.form-signin {
    max-width: 330px;
    padding: 1rem; 
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.26);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    animation: fadeInAnimation ease 1.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

[data-bs-theme="dark"] .form-signin {
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.26);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-qegs-primary {
    --bs-btn-color: var(--qegs-header-text);
    --bs-btn-bg: var(--qegs-primary);
    --bs-btn-border-color: var(--qegs-primary);
    --bs-btn-hover-color: var(--qegs-header-text);
    --bs-btn-hover-bg: var(--qegs-primary-darker);
    --bs-btn-hover-border-color: var(--qegs-primary-darker);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--qegs-header-text);
    --bs-btn-active-bg: var(--qegs-primary-darker);
    --bs-btn-active-border-color: var(--qegs-primary-darker);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

[data-bs-theme="dark"] .btn-qegs-primary {
    --bs-btn-color: var(--qegs-header-text-dm);
    --bs-btn-hover-color: var(--qegs-header-text-dm);
    --bs-btn-active-color: var(--qegs-header-text-dm);
}

.sign-in-text {
    color: #ffffff;
    text-shadow: 1px;
}