.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-msg-container {
  text-align: center;
}

.spinner {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.spinner > div {
  width: 6px;
  height: 24px;
  background-color: #333;
  animation: loading-stretch 1.2s infinite ease-in-out;
}

.spinner .rect2 { animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }

@keyframes loading-stretch {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}