:root{
    --first: #fd8dd2;
    --secound: #b86598;
    --bg-dark-5: rgba(0, 0, 0, 0.5);
}

.form{
    margin-top: 15%;
    min-width: 450px;
}

.form a {
    color: var(--first);
}

.btn {
    background-color: var(--first);
    font-family: inherit;
    outline: 2px var(--secound) solid;
}

.btn:hover{
    background-color: var(--first);
    outline: none;
}

.btn:active {
    background-color: var(--first) !important;
    transform: scale(0.9);
    outline: 2px var(--secound) solid !important;
    color: black !important;
}

.form-input input {
    border-bottom: 2px #fff solid !important;
}

.form-input input:focus,
.form-input input:valid {
    outline: 0;
    border-bottom-color: var(--first) !important;
}

.form-input label {
    top: 15px;
    left: 0;
    pointer-events: none;
}

.form-input label span {
    display: inline-block;
    font-size: 18px;
    min-width: 5px;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-input input:focus + label span,
.form-input input:valid + label span {
    color: var(--first);
    transform: translateY(-30px);
}

@media screen and (max-width: 550px) {
    .form{
        margin-top: 25%;
        min-width: 250px;
    }
}

@media screen and (max-width: 900px) {
    .form{
        margin-top: 35%;
        min-width: 350px;
    }
}