/* --- ANIMATED BACKGROUND --- */
.background-blobs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.6;
}
.blob1 {
  width: 400px;
  height: 450px;
  background: var(--pastel-pink);
  top: -150px;
  left: -200px;
  animation: move-blob1 25s infinite alternate ease-in-out;
}
.blob2 {
  width: 500px;
  height: 500px;
  background: var(--pastel-blue);
  bottom: -200px;
  right: -150px;
  animation: move-blob2 30s infinite alternate ease-in-out;
}
.blob3 {
  width: 350px;
  height: 350px;
  background: var(--pastel-lavender);
  top: 50%;
  left: 40%;
  animation: move-blob3 20s infinite alternate ease-in-out;
}
@keyframes move-blob1 {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(100px, 50px) rotate(90deg);
  }
}
@keyframes move-blob2 {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(-150px, -80px) rotate(-120deg);
  }
}
@keyframes move-blob3 {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(50px, -150px) rotate(180deg);
  }
}