/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  --body-color: hsl(0, 0%, 96%);
  --text-color: hsl(0, 0%, 12%);

  /*========== Font and typography ==========*/
  --body-font: "Inter", sans-serif;
  --loading-font-size: 2rem;
}

/*=============== LOADING ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--body-color);
  overflow: hidden;
}

.loading {
  color: var(--text-color);
  font-size: var(--loading-font-size);
  font-family: var(--body-font);
}

.loading__dots {
  display: inline-flex;
  column-gap: 0.25rem;
}
.loading__dot {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: var(--text-color);
  border-radius: 50%;
}

.loading__dot:nth-child(1) {
  position: absolute;
  transform: scale(0);
}
.loading__dot:nth-child(4) {
  background: transparent;
}
.loading__dot-down {
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--text-color);
  border-radius: 50%;
  transform: translate(0);
}
/* Add animated class */
.animate .loading__dot:nth-child(1) {
  animation: scale-dot 0.8s 0.2s forwards;
}
.animate .loading__dot:nth-child(2),
.animate .loading__dot:nth-child(3) {
  animation: move-right 0.6s forwards;
}
.animate .loading__dot-down {
  animation: move-right-down 0.8s 0.2s forwards linear,
    move-down 2.8s 0.3s forwards ease-in;
}

/* Animated dot 1 */
@keyframes scale-dot {
  100% {
    transform: scale(1);
  }
}
/* Animated dot 2 & 3*/
@keyframes move-right {
  100% {
    transform: translateX(0.75rem);
  }
}
/* Animated dot 4 */
@keyframes move-right-down {
  50% {
    transform: translate(1.5rem, 0.25rem);
  }
  100% {
    transform: translate(2rem, 0.5rem);
  }
}

@keyframes move-down {
  100% {
    transform: translate(10rem, 80vh);
  }
}