#registration, 
#authentication 
{
    --color-primary: var(--alfa-gold, #b3924a);
    --color-extra: var(--alfa-extra, darkseagreen);

    --color-light: color-mix(in oklab, var(--color-primary) 70%, white 30%);
    --color-extra-light: color-mix(in oklab, var(--color-extra) 70%, white 30%);

    --bs-success: var(--color-extra);
    --bs-link-color-rgb: 179, 146, 74;
    --bs-link-hover-color-rgb: 179, 146, 74;
}

#authentication  .btn-outline-primary, 
#registration .btn-outline-primary 
{
    --bs-btn-color: black;
    --bs-btn-border-color: black;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-gradient: none;
}

/* #authentication .btn-primary, 
#registration .btn-primary 
{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-extra);
    --bs-btn-border-color: var(--color-extra);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-extra-light);
    --bs-btn-hover-border-color: var(--color-extra-light);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-extra-light);
    --bs-btn-active-border-color: var(--color-extra-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-extra);
    --bs-btn-disabled-border-color: var(--color-extra);
} */

#authentication .page-header > h1, 
#registration .page-header > h1, 
#authentication .login__register-prompt > .h4, 
#registration .login__register-prompt > .h4 
{
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: calc(0.5rem + 10px);
    
}
#authentication .login__register-prompt > .h4, 
#registration .login__register-prompt > .h4 
{
    font-size: 20px;
    text-align: center;
}



/* inputs */
input:invalid {
    border-color: darkred;
}
#wrapper input[type="text"]:focus, 
#wrapper input[type="password"]:focus, 
#wrapper input[type="tel"]:focus, 
#wrapper input[type="email"]:focus 
{
    border-color: hsl(0, 0%, 95%);
    box-shadow: 0 2px 0 0px var(--color-primary);
}

input[type="text"], 
input[type="password"], 
input[type="tel"], 
input[type="email"] 
{
    border-radius: unset;
    background: hsl(0, 0%, 98%);
    border: 1px solid hsl(0, 0%, 95%);
}

#wrapper select {
    border-radius: unset;
    background-color: hsl(0, 0%, 98%);
    border: 1px solid hsl(0, 0%, 95%);
}
#wrapper select:focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

#wrapper input[type="checkbox"] {
    border-radius: 0;
}
input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
input[type="checkbox"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-light);
    /* box-shadow: unset; */
}

/* .login__register-prompt .btn {
    --bs-btn-padding-x: 2em;
    --bs-btn-padding-y: 1em;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 0px;
    text-transform: uppercase;
    color: var(--alfa-black, black);
}
.login__register-prompt .btn {
    background: var(--alfa-extra, darkseagreen);
    border-color: var(--alfa-extra, darkseagreen);
}
.login__register-prompt .btn:hover {
    background: color-mix(in oklab,
        var(--alfa-extra, darkseagreen) 70%,
        white 30%
    );
    border-color: color-mix(in oklab,
        var(--alfa-extra, darkseagreen) 70%,
        white 30%
    );
    color: var(--alfa-black, black);
} */




/* RESPONSIVE */

/* XXL larger desktops >= 1400 */
@media screen and (min-width: 1400px) { /* 1400 - inf */
    #authentication #submit-login {
        width: 240px;
        /* width: fit-content; */
        justify-self: center;
    }
    #authentication .login__register-prompt .btn {
        width: 240px;
        /* width: fit-content; */
        justify-self: center;
    }
}
/* XL large desktops >= 1200 */
@media screen and (max-width: 1399.98px) { /* 1201 - 1400 */
}
/* LG desktops >= 992 */
@media screen and (max-width: 1199.98px) { /* 993 - 1200 */
}
/* MD tablets >= 768 */
@media screen and (max-width: 991.98px) { /* 769 - 992 */
}
/* SM phones >= 576 */
@media screen and (max-width: 767.98px) { /* 577 - 768 */
}
/* XS small phones < 576 */
@media screen and (max-width: 575.98px) { /* 0 - 576 */
}