.sign {
    &-form {
        // background: $color-lightgrey-transparent;
        font-size: 18px;
        font-family: 'Poiret One', cursive;
        font-weight: bold;
        display: block;
        margin: auto;
        border: 3px solid $color-lightgrey;
        outline: 1px solid $color-grey;
        padding: 25px;
        width: 45%;
        @media screen and (max-width: 480px) {
            width: 75%;
        }
        text-align: center;
        &__input,
        &__submit-button {
            width: 80%;
        }
        &__header {
            margin: 0 0 35px 0;
        }
        &__password-container {
            margin: 50px 0 20px 0;
        }
        &__input {
            display: block;
            margin: 25px auto;
            border: 1px solid $color-lightgrey;
            padding: 15px;
            box-shadow: 0 0 3px $color-grey;

            &--login {}
            &--password {}
        }
        &__input::placeholder {
            font-family: 'Poiret One', cursive;
            font-size: 18px;
            font-weight: bold;
        }
        &__submit-button {
            
        }
        &__link {
            &--with-margin {
                margin-bottom: 20px;
            }
            &--sign-up a{
                color: $color-green;
                text-transform: uppercase;
                transition: all 100ms ease-in-out;
            }
            &--sign-up a:hover{
                font-size: 23px;
            }
        }
        &__divider {
            width: 60%;
        }
    }
}