.textInput-Container {
    position: relative;
    box-sizing: border-box;
    margin: 0 0 50px 0;

    transition: 1s;
    
}

.textInputs {
    background: transparent;
    border: none;
    border-bottom: 2px solid #383838;
    display: block;

    width: 100%;
    height: 30px;

}

.textInputs:focus {
    outline: none;
}

.placeholder {
    position: absolute;
    display: block;
    content: "";
    
    top: 0;
    left: 0;

    pointer-events: none;

    transition: top 0.4s;
}

.placeholder::after {
    position: absolute;
    display: block;
    content: attr(data-placeholder);
    top: 6px;
    left: 0;

    transition: top 0.5s, color 0.4s, left 0.1s;
}

.textInputs + .placeholder::after {
    color: #3b3b3b;
    top: 6px;
    left: 0;
}
.textInputs:focus + .placeholder::after {
    top: -15px;
    left: -5px;
    color: black;
}

.inputHasText + .placeholder::after {
    top: -15px;
}

#submit {
    background-color: #2c2c2c;
    color: #f5f5f5;

    width: 95%;
    height: 50px;

    border-radius: 5px;
    border: none;

    margin: 0 0 5% 0;
    font-size: medium;

    transition: background-color 500ms;
}

#submit:hover {
    background-color: #1e1e1e;
    cursor: pointer;
}

@keyframes UpPlaceholder {
    from {
        top: 6px;    
    }
    to {
        top: 0;
    }
}

@keyframes DownPlaceholder {
    from {
        top: 0;    
    }
    to {
        top: 6px;
    }
}