:root{
  --dots-size: clamp(320px, 45vw, 720px);
  --dots-blur: 0px;
  --dots-opacity: 1;
}

.dot{
  position: fixed;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--dots-opacity);
  filter: blur(var(--dots-blur));
  transform: translateZ(0);
  background: black;
}

.dot1{
  top: 5%; left: -10%;
  width: 200px; 
  height: 400px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(100px);
}

.dot2{
  top: -20%; left: 10%;
  width: 400px; 
  height: 200px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(90px);
}

.dot4{
  bottom: -20%; left: -5%;
  width: 300px; 
  height: 300px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(100px);
}

.dot5{
  top: 0%; right: -15%;
  width: 300px; 
  height: 400px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(120px);
}

.dot6{
  top: 30%; right: 60%;
  width: 400px; 
  height: 300px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(150px);
}

.dot7{
  bottom: -20%; right: 20%;
  width: 400px; 
  height: 200px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(50px);
}

.dot8{
  top: 10%; right: 25%;
  width: 250px; 
  height: 200px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(100px);
}

.dot9{
  top: 50%; right: 10%;
  width: 250px; 
  height: 250px;
  opacity: 1;
  background: rgba(0,0,0,0.8);
  filter: blur(120px);
}

@media (max-width: 768px) {
  .dot1{
    top: 5%; left: -15%;
    width: 140px; height: 260px;
    filter: blur(100px);
  }

  .dot2{
    top: -10%; left: 5%;
    width: 240px; height: 140px;
    filter: blur(70px);
  }

  .dot4{
    bottom: -15%; left: -10%;
    width: 200px; height: 200px;
    filter: blur(80px);
  }

  .dot5{
    top: 0%; right: -10%;
    width: 200px; height: 280px;
    filter: blur(90px);
  }

  .dot6{
    top: 25%; right: 50%;
    width: 260px; height: 200px;
    filter: blur(100px);
  }

  .dot7{
    bottom: -10%; right: 15%;
    width: 260px; height: 140px;
    filter: blur(40px);
  }

  .dot8{
    top: 12%; right: 20%;
    width: 180px; height: 140px;
    filter: blur(70px);
  }

  .dot9{
    top: 50%; right: 5%;
    width: 180px; height: 180px;
    filter: blur(90px);
  }
}

@media (max-width: 768px) {
  .dot1{
    top: 5%; left: -15%;
    width: 90px; height: 160px;
    filter: blur(60px);
  }

  .dot2{
    top: -8%; left: 5%;
    width: 140px; height: 90px;
    filter: blur(50px);
  }

  .dot4{
    bottom: -10%; left: -8%;
    width: 120px; height: 120px;
    filter: blur(50px);
  }

  .dot5{
    top: 0%; right: -8%;
    width: 120px; height: 180px;
    filter: blur(60px);
  }

  .dot6{
    top: 25%; right: 50%;
    width: 160px; height: 120px;
    filter: blur(70px);
  }

  .dot7{
    bottom: -8%; right: 15%;
    width: 160px; height: 90px;
    filter: blur(30px);
  }

  .dot8{
    top: 12%; right: 20%;
    width: 110px; height: 90px;
    filter: blur(100px);
  }

  .dot9{
    top: 50%; right: 5%;
    width: 120px; height: 120px;
    filter: blur(60px);
  }
}