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


*{
    box-sizing: border-box;
}
body{    
    /* background-color: #7d5fff; */
    background-image: linear-gradient(90deg,rgb(142, 5, 255),rgb(129, 56, 254));
    font-family: "Roboto",sans-serif;
    display: flex;  
    align-items: center; 
    justify-content:center; 
    height: 100vh;
    margin:0;  
}

.search{
    position:relative; 
    height:50px; 
} 
 
.search input{
    background-color: #fff; 
    color:black; 
    border:0; 
    font-size:18px; 
    padding:15px; 
    height:50px; 
    width:50px; 
    transition:0.3s ease; 
    
}

.btn { 
    background-color: #fff;
    position:absolute;
    top:0; 
    left:0; 
    height:50px; 
    width:50px; 
    font-size:24px; 
    cursor:pointer; 
    margin:0; 
    border:0;  
    transition:transform 0.3s ease;
}

.btn:focus,.input:focus{
    outline:none; 
} 

.search.active input{
    width:400px;
}

.search.active .btn{
    transform: translateX(398px);
}