@keyframes parabola {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  50% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
  90% {
    transform: translateY(-4px);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scale {
  0% {
    opacity: 0;
    width: 0px;
    height: 0px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes come {
  0% {
    transform: translateY(80px);
  }
  100% {
    transform: translateY(0);
  }
}
.tip {
  /* display: inline-block; */
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px) brightness(90%);
  -webkit-backdrop-filter: blur(10px) brightness(90%);
  padding: 2px 12px;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3333333333);
  font-size: 12px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  display: none;
  position: fixed;
  z-index: 9999;
  /* Origin block */
}
.tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(180deg);
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent rgba(255, 255, 255, 0.6) transparent;
}

.dockcontainer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 75%;
  height: 56.5px;
  padding-bottom: 5px;
}

.dock {
  width: auto;
  height: 56.5px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding: 5px;
  padding-bottom: 2.5px;
  border-radius: 16px;
  margin-bottom: 5px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3333333333), inset 0 0 2px rgba(26, 26, 26, 0.7333333333);
  z-index: 2049;
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
          backdrop-filter: blur(50px) saturate(1.8);
  background: rgba(246, 246, 246, 0.46);
  transform: translateY(80px);
  animation: come 0.7s ease forwards;
  animation-delay: 0.2s;
}
.dock .container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dock .container img {
  width: 50px;
  height: 50px;
  transition: filter 0.05s;
  will-change: width;
  transform-origin: bottom;
}
.dock .container img.opening {
  animation: parabola 1s infinite;
}
.dock .container img.openingwithscale {
  animation: parabola 1s infinite, scale 1s ease forwards;
}
.dock .container img:active {
  filter: brightness(0.5);
}
.dock .container hr {
  border: none;
  height: 42.5px;
  width: 1px;
  border-radius: 1px;
  background: rgba(232, 232, 232, 0.4);
  margin: 0 10px;
  margin-bottom: 5px;
  animation: fade 0.5s ease;
}
.dock .container .light {
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0);
  margin-top: 2.5px;
}
.dock .container .light.on {
  background: rgba(0, 0, 0, 0.5333333333);
}/*# sourceMappingURL=dock.css.map */