* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100%;
  background-color: #f0f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  background-color: #f0f8ff;
  height: 4rem;
  position: relative;
  width: 4rem;
  transition: 3s;
  /* width: 20rem; */
  box-shadow: 0px 0px 10px 0px;
  /* border-radius: 50%; */
  border-radius: 40px;
  padding-top: 16px;
  padding-left: 16px;
}
.box img {
  height: 32px;
}
.box img {
  cursor: pointer;
}
.box .input-box {
  height: 22px;
  position: absolute;
  display: none;
  top: 32%;
  left: 20%;
  padding-left: 2px;
  /* background-color: #f0f8ff; */
  border: none;
  background: transparent;
  outline: none;
  font-size: 18px;
}
.box .mic-icon {
  position: absolute;
  right: 10px;
  top: 12px;
  display: none;
  height: 36px;
}
.box .mic-icon:hover {
  cursor: pointer;
}