/* CSS Document */
#loading-bar-container {
  width: 70%;
  max-width: 318px;
  height: 1px;
  background: #333;
  border-radius: 0;
  overflow: hidden;
  margin: 24px auto; }

#loading-bar {
  height: 100%;
  width: 0%;
  height: 1px;
  background-color: #fff;
  transition: width 100ms; }

.loading-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999; }

.equalizer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 70%;
  max-width: 318px;
  max-height: 160px;
  aspect-ratio: 318 / 160; }
  .equalizer::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../images/eqbar-cover@2x.webp") left bottom/8px 4px repeat; }

.eqbar {
  width: calc( ( 100% / 10 ) - 2px );
  background-color: #fff;
  animation: equalizer 500ms forwards 1 linear; }

.eqbar1 {
  animation: equalizer1 500ms infinite ease-in-out; }

.eqbar2 {
  animation: equalizer2 500ms infinite ease-in-out; }

.eqbar3 {
  animation: equalizer3 500ms infinite ease-in-out; }

.eqbar:nth-child(1) {
  animation-delay: 100ms; }

.eqbar:nth-child(2) {
  animation-delay: 200ms; }

.eqbar:nth-child(3) {
  animation-delay: 0ms; }

.eqbar:nth-child(4) {
  animation-delay: 200ms; }

.eqbar:nth-child(5) {
  animation-delay: 100ms; }

.eqbar:nth-child(6) {
  animation-delay: 200ms; }

.eqbar:nth-child(7) {
  animation-delay: 200ms; }

.eqbar:nth-child(8) {
  animation-delay: 300ms; }

.eqbar:nth-child(9) {
  animation-delay: 200ms; }

.eqbar:nth-child(10) {
  animation-delay: 0ms; }

@keyframes equalizer1 {
  0%, 100% {
    height: 20%; }
  50% {
    height: 100%; } }
@keyframes equalizer2 {
  0%, 100% {
    height: 10%; }
  50% {
    height: 80%; } }
@keyframes equalizer3 {
  0%, 100% {
    height: 0%; }
  50% {
    height: 60%; } }
#loadingScreen {
  transition: transform 0.5s ease-out; }

#loadingScreen.hidden {
  transform: translateY(-100%); }

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