#search-form {
  display: inline; }

#search-wrapper {
  display: inline-block;
  margin: 10px;
  padding: 5px;
  border-width: 4px;
  border-color: #cccccc;
  background-color: #ffffff;
  width: fit-content;
  height: fit-content;
  border-style: solid;
  border-radius: 24px;
  box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.75);
  transition: width 0.5s; }

#search-box {
  display: inline-block;
  border: none;
  color: #000000;
  text-shadow: 0px 0px 2px rgba(66, 66, 66, 0.5);
  font-size: medium;
  transition: width 0.5s;
  width: 0; }
  #search-box.inputted, #search-box:focus {
    width: 150px;
    max-height: max-content;
    transition: width 0.5s;
    display: inline-block;
    outline: none; }

#search-box.no-query {
  color: #ff0d0d;
  text-shadow: 0px 0px 2px rgba(230, 230, 71, 0.5);
  width: 150px; }

#search-wrapper.no-query {
  border-color: #f93131;
  box-shadow: 0px 0px 5px rgba(101, 59, 59, 0.75);
  animation: shaking 0.3s;
  animation-iteration-count: infinite; }

.inner-search:hover {
  cursor: pointer; }

@keyframes shaking {
  0% {
    transform: translate(1px, 1px) rotate(0deg); }
  10% {
    transform: translate(-1px, -2px) rotate(-2deg); }
  20% {
    transform: translate(-3px, 0px) rotate(2deg); }
  30% {
    transform: translate(3px, 2px) rotate(0deg); }
  40% {
    transform: translate(1px, -1px) rotate(2deg); }
  50% {
    transform: translate(-1px, 2px) rotate(-2deg); }
  60% {
    transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    transform: translate(3px, 1px) rotate(-2deg); }
  80% {
    transform: translate(-1px, -1px) rotate(2deg); }
  90% {
    transform: translate(1px, 2px) rotate(0deg); }
  100% {
    transform: translate(1px, -2px) rotate(-2deg); } }

/*# sourceMappingURL=searchbar.css.map */