html {
  font-size: 62.5%; /*10px*/
}
/* animating search field */
.search {
  border: 0.1rem solid #440099;
  display: inline-block;
  position: relative;
  border-radius: 50px;
}

.search input[type="text"] {
  width: 50px;
  height: 50px;
  padding: 5px 40px 5px 10px;
  border: none;
  box-sizing: border-box;
  border-radius: 50px;
  transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 0.5) 600ms;
}

.search input[type="text"]:focus {
  outline: none;
}

.search input[type="text"]:focus,
.search input[type="text"]:not(:placeholder-shown) {
  width: 300px;
  transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

.search input[type="text"]:focus + span,
.search input[type="text"]:not(:placeholder-shown) + span {
  bottom: 13px;
  right: 10px;
  transition: bottom 300ms ease-out 800ms, right 300ms ease-out 800ms;
}

.search input[type="text"]:focus + span:after,
.search input[type="text"]:not(:placeholder-shown) + span:after {
  top: 0;
  right: 10px;
  opacity: 1;
  transition: top 300ms ease-out 1100ms, right 300ms ease-out 1100ms,
    opacity 300ms ease 1100ms;
}

.search span {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -13px;
  right: -15px;
  transition: bottom 300ms ease-out 300ms, right 300ms ease-out 300ms;
}

.search span:before,
.search span:after {
  content: "";
  height: 25px;
  border-left: 5px solid #000;
  position: absolute;
  transform: rotate(-45deg);
}

.search span:after {
  transform: rotate(45deg);
  opacity: 0;
  top: -20px;
  right: -10px;
  transition: bottom 300ms ease-out, right 300ms ease-out,
    opacity 300ms ease-out;
}

@media screen and (max-width: 76.8rem) {
  .search input[type="text"] {
    width: 40px;
    height: 40px;
    padding: 5px 40px 5px 10px;
    border: none;
    box-sizing: border-box;
    border-radius: 50px;
    transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 0.5) 600ms;
  }

  .search input[type="text"]:focus {
    outline: none;
  }

  .search input[type="text"]:focus,
  .search input[type="text"]:not(:placeholder-shown) {
    width: 150px;
    transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 1.5);
  }

  .search input[type="text"]:focus + span,
  .search input[type="text"]:not(:placeholder-shown) + span {
    bottom: 13px;
    right: 10px;
    transition: bottom 300ms ease-out 800ms, right 300ms ease-out 800ms;
  }

  .search input[type="text"]:focus + span:after,
  .search input[type="text"]:not(:placeholder-shown) + span:after {
    top: 0;
    right: 10px;
    opacity: 1;
    transition: top 300ms ease-out 1100ms, right 300ms ease-out 1100ms,
      opacity 300ms ease 1100ms;
  }

  .search span {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -13px;
    right: -15px;
    transition: bottom 300ms ease-out 300ms, right 300ms ease-out 300ms;
  }

  .search span:before,
  .search span:after {
    content: "";
    height: 25px;
    border-left: 5px solid #000;
    position: absolute;
    transform: rotate(-45deg);
  }

  .search span:after {
    transform: rotate(45deg);
    opacity: 0;
    top: -20px;
    right: -10px;
    transition: bottom 300ms ease-out, right 300ms ease-out,
      opacity 300ms ease-out;
  }
}