html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(
        100% 300.28% at 100% 0%,
        hsl(254.3 50.4% 24.5%) 0%,
        hsl(254.3 50.4% 24.5%) 32.94%,
        hsl(254.3 50.4% 24.5%) 49.9%,
        hsl(254.3 50.4% 24.5%) 50.2%,
        hsl(180.5 100% 24.7%) 100%
    )
}

.auth-container {
    background-color: #333;
    background: rgba(40, 40, 40, 0.88);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 30px 0px;
    padding: 4rem;
    width: 30rem;
    margin: 2rem;
    margin-bottom: 10rem;
}

.auth-container h1,
.auth-container h2,
.auth-container h3 {
    color: white;
}
.auth-container h1 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 2rem;
}
.auth-container h2 {
    margin: 0 0 20px 0;
    text-align: center;
}

.auth-container p,
.auth-container li {
    color: white;
}
.auth-container a {
    color: rgba(150, 200, 255, 1.0)
}

input.form-control[type="text"],
input.form-control[type="password"],
input.form-control[type="email"],
input.form-control[type="text"]:focus,
input.form-control[type="password"]:focus,
input.form-control[type="email"]:focus {
    background: #4b474d;
    color: white;
    line-height: 2;
    position: relative;
    z-index: 1;
}
.form-floating > .form-control ~ label::after {
    background: transparent !important;
}
input.form-control[type="text"]:focus,
input.form-control[type="password"]:focus,
input.form-control[type="email"]:focus {
    z-index: 2;
}

#id_login {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
#id_password {
    margin-bottom: .5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body.signup #id_email,
body.login #id_email {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#id_username,
#id_password1 {
    margin: 0;
    border-radius: 0;
}
#id_password2 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#id_username.is-invalid,
#id_password1.is-invalid {
    border-width: 2px;
}

.form-floating label {
    color: white;
}

div.form-check {
    margin-top: 2rem;
    color: white;
}

.popover {
    box-shadow: 20px 20px 60px rgba(40, 40, 40, 0.2);
}

.popover-body ul {
    padding-left: 1rem;
    margin-bottom: 0;
}

.visually-hidden
{
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}
li.has-error,
span.has-error {
    color: red;
}

.popover.popover-wide {
    max-width: 30rem;
    font-size: 1.25rem;
}
@media (max-width: 768px) {
    .popover.popover-wide {
        max-width: 95vw;
        font-size: .9rem;
    }
}