@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');


*{
    box-sizing: border-box;
}
body{  
    font-family: "Muli",sans-serif;
    background-color: steelblue;
    display: flex;  
    flex-direction: column;
    margin:0;  
    align-items: center; 
    justify-content:center; 
    height: 100vh; 
    overflow:hidden;
} 
.container{

    background-color: rgb(37, 100, 178); 
    color:#fff; 
    padding:20px 40px; 
    border-radius:5px;
    width: 320px;
} 

.container h1{
    text-align: center; 
    
} 

.btn{
    cursor:pointer;
    padding:10px;  
    display: inline-block;
    border-radius: 5px;    
    width:100%;
    background-color: lightblue; 
    border:steelblue; 
    font-size: 16px; 
    font-family: inherit; 
    margin-top: 15px;
} 

.form-control{
    position: relative; 
    margin:80px 0px;
    /* border:1px solid red; */
}



.form-control input{ 
    background-color: transparent; 
    border:0; 
    border-bottom:1px solid #fff; 
    display: block; 
    width: 100%; 
    font-size: 13px;
    color:#fff;    
    
} 

.form-control input:focus,
.form-control input:valid{
    outline: 0; 
    color:lightblue;
    border-bottom-color:lightblue;
}





.form-control label{
    position: absolute; 
    top:0px; 
    left:0px; 
    
    /* pointer-events: none; */
    
}

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

.form-control input:focus+label span,
.form-control input:valid+label span{
    outline: 0; 
    color:lightblue;
    transform:translateY(-30px);
}

.text{
    text-align: center;
}

.text a{
    text-decoration: none;
    color:lightblue
}