.connexion {
    min-width: 100vh;
    min-height: 100vh;
    background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    color: $blanc;

    .formulaire {
        background-color: $noir;
        width: 60%;
        border-radius: 30px;
        border: solid 4px $blanc;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 80px;
        gap: 50px;

        form {
            display: flex;
            flex-direction: column;
            width: 100%;
            align-items: center;
            gap: 30px;

            input {
                width: 70%;
                padding: 15px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid $blanc;
                border-radius: 4px;
                box-sizing: border-box;
                text-align: center;
                margin-top: 20px;
            }

            input[type=submit] {
                width: 60%;
                background-color: $orange;
                color: white;
                padding: 15px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 20px;

                &:hover {
                    background-color: $gris;
                }
            }

        }

    }

    a {
        font-size: 1.5rem;

        &:hover {
            color: $orange;
        }
    }
}