:root {
    --border: 1px solid green;
    --btn-color: green;
    --padding-input: 10px 20px;
    --margin-bottom: 55px
}

.form__wrapper {
    border: var(--border);
    padding: 20px;
    border-radius: 20px;
}

.form__title {
    font-size: 2rem;
}

.title-form {
    text-align: center;
}

.form__input {
    border: var(--border);
}

.form__input,
.form__btn,
.title-form {
    margin-bottom: var(--margin-bottom);
}

.form__input input,
.form__btn button {
    padding: 10px;
    width: 100%;
}

.form__input input,
.form__btn button {
    padding: var(--padding-input);
}

.form__btn {}

.form__btn button {
    border: var(--border);
    color: #000000;
    background: var(--btn-color);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-in-out 0.4s;
}

.btn-form {}

.form__btn button:hover {
    box-shadow: inset 1000px 0 0 0 rgb(114, 200, 152);
    color: azure
}