.bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #120a1a;
}

/* make sure login sits above bg */
.login-box {
  position: relative;
  z-index: 2;
}

/* blob 1 */
.bg::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -150px;
  left: -150px;
  background: radial-gradient(circle, #ffd6e8, #c4b5fd, transparent 70%);
  filter: blur(90px);
  opacity: 0.8;
}

/* blob 2 */
.bg::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  bottom: -180px;
  right: -180px;
  background: radial-gradient(circle, #bde0fe, #ffafcc, transparent 70%);
  filter: blur(90px);
  opacity: 0.8;
}

/* center blob */
body::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffc8dd, #a0c4ff, transparent 70%);
  filter: blur(100px);
  opacity: 0.6;
  z-index: 0;
}