/* see basic style for all circles in a_layout.css */

.bg-circle1 {
  /* set a custom property */
  --initial-rotation: 280deg;
   filter: blur(1.6vw);
   top: 20vw;
   left: 20vw;
   width: 20vw;
   height: 20vw;
   opacity: 0.3;
}

.bg-circle2 {
  --initial-rotation: 40deg;
   filter: blur(.6vw);
   top: 30vw;
   left: 4vw;
   width: 25vw;
   height: 25vw;
   opacity: 0.3;
}

.bg-circle3 {
  --initial-rotation: 180deg;
   filter: blur(0.3vw);
   top: 20vw;
   left: 10vw;
   width: 5vw;
   height: 5vw;
   opacity: 0.6;
}

.bg-circle4 {
  --initial-rotation: 240deg;
   filter: blur(0.8vw);
   top: 40vw;
   left: 25vw;
   width: 15vw;
   height: 15vw;
   opacity: 0.6;
}

/* .bg-circle5 {
   --initial-rotation: 260deg;
   filter: blur(0.2vw);
   top: 50vw;
   left: 80vw;
   width: 7vw;
   height: 7vw;
   opacity: 0.3;
} */
/* 
.bg-circle6 {
  --initial-rotation: 340deg;
   filter: blur(1.5vw);
   top: 30vw;
   left: -20vw;
   width: 65vw;
   height: 65vw;
   opacity: 0.2;
} */

/* change the circles in mobile nav */

@media screen and (max-width: 768px) {

   .bg-circle1 {
      --initial-rotation: 206deg;
      filter: blur(3vw);
      top: 20vw;
      left: 50vw;
      width: 80vw;
      height: 80vw;
   }

   .bg-circle2 {
      --initial-rotation: 340deg;
      filter: blur(1.5vw);
      top: 116vw;
      left: 40vw;
      width: 40vw;
      height: 40vw;
   }

   .bg-circle3 {
      --initial-rotation: 300deg;
      filter: blur(1.5vw);
      top: 130vw;
      left: 81vw;
      width: 40vw;
      height: 40vw;
   }

   .bg-circle4 {
      --initial-rotation: 265deg;
      filter: blur(1.5vw);
      top: 100vw;
      left: 76vw;
      width: 25vw;
      height: 25vw;
      opacity: 0.4;
   }
}