/* body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.animation-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #3498db;
  animation: moveCircle 2s ease-in-out infinite alternate;
}

@keyframes moveCircle {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 150px;
    left: 150px;
  }
}
*/
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: pulse 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.5s;
}

.dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}