regular.min

*{
  margin: 0; padding: 0;
}
.main{
  width: 100%; height: 100vh;
  display: flex; justify-content: center; align-items: center;
}
.search-box{
  width: 250px; height: 40px;
  position: relative; transition: all 0.5s;
}
.search-box: hover{
  transform: scale(1, 1);
}
.search-box input{
  width: 100%; height: 100%; font-size: 20px; padding: 0px 20px;
  border: none; box-shadow: -1px -1px 5px rgb(177, 177, 177), 0.5px 0.5px 5px rgb(177, 177, 177);
border-radius: 50px;
  }
  .search-box i{
    position: absolute; top: 0; right: 1px; background-color: black; color: white;
    font-size: 23px; padding: 7.5px; cursor: pointer; border-radius: 50px;
    boarder: 1px solid white; transition: all 0.3s;
  }
  .search-box i :hover{
    transform: scale(1, 1);
  }