@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#03080a;
}

.container{
    width:80%;
    padding:20px;
}

.container h2{
    width:100%;
    color:#45f3ff;
    font-size:36px;
    text-align:center;
    margin-bottom:10px;
}

.container .row100{
    position:relative;
    width:100%;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.container .row100 .col{
    position:relative;
    width:100%;
    padding:0 10px;
    margin:30px 0 10px;
    transition:0.5s;
}

.container .row100 .inputBox{
    position:relative;
    width:100%;
    height:40px;
    color:#45f3ff;
}
.container .row100 .inputBox input,
.container .row100 .inputBox.textarea textarea{
    position:absolute;
    width:100%;
    height:100%;
    background:transparent;
    box-shadow:none;
    padding:0 10px;
    border:none;
    outline:none;
    font-size:18px;
    z-index:1;
    color:#000;
}
.container .row100 .inputBox .text{
    position:absolute;
    top:0;
    left:0;
    line-height:40px;
    font-size:18px;
    display:block;
    transition:0.5s;
    pointer-events:none;
}

.container .row100 .inputBox input:focus + .text,
.container .row100 .inputBox input:valid + .text{
    top:-35px;
    left:-10px;
}

.container .row100 .inputBox .line{
    position:absolute;
    bottom:0;
    display:block;
    width:100%;
    height:2px;
    background:#45f3ff;
    transition:0.5s;
    border-radius:2px;
    pointer-events:none;
}

.container .row100 .inputBox input:focus ~ .line,
.container .row100 .inputBox input:valid ~ .line{
    height:100%;
}

.container .row100 .inputBox.textarea{
    position:relative;
    width:100%;
    height:100px;
    padding:10px 0;
}

.container .row100 .inputBox.textarea textarea{
    height:100%;
    resize:none;
}

.container .row100 .inputBox textarea:focus + .text,
.container .row100 .inputBox textarea:valid + .text{
    top:-35px;
    left:-10px;
}
.container .row100 .inputBox textarea:focus ~ .line,
.container .row100 .inputBox textarea:valid ~ .line{
    height:100%;
}

.container .row100 input[type="submit"]{
    border:none;
    width:200px;
    text-align:center;
    padding:7px 1  5px;
    cursor:pointer;
    outline:none;
    background:#45f3ff;
    color:#000;
    font-size:18px;
    border-radius:2px;
}