*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Josefin Sans', sans-serif;
}
.main_div{
    width:100%;
    height:100vh;
    position:relative; 
    background:url(https://www.surveylegend.com/wordpress/wp-content/uploads/2020/03/All-Types-of-Surveys-You-Can-Do.png);
}

.box{
    width: 400px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);    
    padding: 50px;
    background: rgba(0, 0, 0, 0.8);	
    border-radius: 15px;
}
.box h1{
    margin-bottom:30px;
    color: white;
    text-align:center;
    text-transform: capitalize; 
}
.box .inputbox{
    position:relative
}
.box .inputbox input{
    width:100%;
    padding:10px;   
    margin-bottom: 30px;
    border:none;
    color:white;
    letter-spacing:1px;
    border-bottom: 1px solid white;
    outline: none;
    background:transparent;
}
.box .inputbox label{
    position: absolute;
    top:0;
    left:0;
    letter-spacing: 1px;
    padding:10px 0; 
    font-size: 16px;
    color:white;
    transition:0.5s;
}
.box .inputbox input:focus ~label,
.box .inputbox input:valid   ~label{
    top:-20px;
    left:0;
    color:#03a9f4;
    font-size: 12px;
} 

.box input[type="submit"] {
    background:transparent;
    border:none;
    outline:none;
    color: white;
    background: #03a9f4;
    padding:8px 16px;
    border-radius: 5px;
    font-size: 14px;
}