body.login-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background: radial-gradient(circle at 20% 25%, rgba($elementum-secondary, 0.20) 0%, transparent 55%),
        radial-gradient(circle at 80% 30%, rgba($elementum-tertiary, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 25% 85%, rgba($elementum-tertiary, 0.18) 0%, transparent 60%),
        radial-gradient(circle at 90% 75%, rgba($elementum-secondary, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba($elementum-primary, 0.9) 0%, transparent 70%);
    background-color: darken($elementum-primary, 20%);
}

.elementum-login-page {
    $form-background: rgba(255, 255, 255, 0.06);

    h1,
    h2,
    h3,
    p {
        margin: 0;
        width: 100%;
        color: $elementum-text-primary;
    }

    .container {
        background: transparent;
        display: flex;
        justify-content: space-between;
        min-width: 70vw;
        border: 2px solid $form-background;
        border-radius: 10px;
        overflow: hidden;
        padding: 0;
        position: relative;

        .form-container {
            background: $form-background;
            padding: 5rem 2rem;
            flex: 1 1 auto;
        }

        .footer {
            margin-top: 30px;
            text-align: center;
            width: 100%;

            .elementum-logo {
                font-family: $elementum-font;
            }
        }
    }

    .left-side {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        padding: 4rem 6rem;
        color: $elementum-text-primary;

        header {
            width: 100%;
        }

        .logo {
            width: 70px;
            margin: 0 auto;

            img {
                width: 100%;
                object-fit: contain;
                filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
                border-radius: 5px;
            }
        }

        h1,
        h2 {
            text-align: center;
        }

        h1 {
            color: $elementum-tertiary;

        }

        h2 {
            margin-bottom: 50px;
        }


        .content {
            text-align: center;
            width: 100%;

            .coords {
                ul {
                    list-style: none;
                    padding: 0;

                    li {
                        margin-bottom: 1rem;

                        a {
                            display: inline-block;
                            background: $elementum-primary;
                            border: 1px solid $elementum-primary;
                            color: $elementum-text-primary;
                            padding: 0.5rem 1rem;
                            border-radius: 5px;
                            transition: 0.15s ease;
                            text-decoration: none;
                            width: 100%;
                            text-align: left;

                            &:hover {
                                background: transparent;
                                border-color: $elementum-tertiary;
                                color: $elementum-tertiary;
                            }
                        }
                    }
                }
            }
        }
    }

    form {
        min-width: 250px;
        max-width: 350px;
        height: 100%;
        margin: 0 auto;

        header {
            text-align: center;
            margin-bottom: 50px;
        }

        width: 100%;

        /* un poil de modern vibe */
        color: $elementum-text-primary;

        .form-group {
            margin-bottom: 20px;
        }

        .lost-password {
            text-align: right;
        }

        .btn-container {
            margin-top: 40px;
            display: flex;
            justify-content: center;
        }
    }

    .alert {
        margin: 20px auto;
        width: 100%;
        color: $elementum-tertiary;
        background: rgba(lighten($elementum-tertiary, 30%), 0.8);
        padding: 1rem;
        border-radius: 5px;
        border: 1px solid rgba($elementum-tertiary, 0.8);
        text-align: center;
        max-width: 350px;


        &.alert-success {
            color: #305E4F;
            background: rgba(lighten(#305E4F, 50%), 0.8);
            border-color: #305E4F;
        }

        &.alert-danger {
            color: #714045;
            background: rgba(lighten(#714045, 50%), 0.8);
            border-color: #714045;
        }
    }

    .login-link {
        margin-top: 30px;
        text-align: center;
    }

    .login-404 {
        display: flex;
        color: $elementum-text-primary;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;

        h1 {
            font-size: 8vw;
        }

        p {
            font-size: clamp(1rem, 2vw, 2rem);
        }
    }

    @import "./../components/input-group";
    @import "./../components/checkbox";
    @import "./../components/link";
    @import "./../components/button";
}