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

.bg-circle1 {
  /* set a custom property */
  --initial-rotation: 40deg;
  filter: blur(1vw);
  top: 15vw;
  left: 0vw;
  width: 25vw;
  height: 25vw;
  opacity: 0.3;
}

.bg-circle2 {
   --initial-rotation: 152deg;
   filter: blur(1.5vw);
   top: 29vw;
   left: 20vw;
   width: 30vw;
   height: 30vw;
   opacity: 0.25;
}

.bg-circle3 {
   --initial-rotation: 198deg;
   filter: blur(0.5vw);
   top: 10vw;
   left: 25vw;
   width: 20vw;
   height: 20vw;
   opacity: 0.25;
}

.bg-circle4 {
   --initial-rotation: 163deg;
   filter: blur(0.5vw);
   top: 8vw;
   left: 11vw;
   width: 12vw;
   height: 12vw;
   opacity: 0.3;
}

/* .bg-circle5 {
   --initial-rotation: 110deg;
   filter: blur(0.2vw);
   top: 30vw;
   left: 85vw;
   width: 7vw;
   height: 7vw;
   opacity: 0.3;
} */


/* change the circles in mobile nav */

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

   .bg-circle1 {
      --initial-rotation: 20deg;
      top: 130vw;
      left: -30vw;
      width: 90vw;
      height: 90vw;
   }

   .bg-circle2 {
      --initial-rotation: 80deg;
      top: 80vw;
      left: 5vw;
      width: 70vw;
      height: 70vw;
   }

   .bg-circle3 {
      --initial-rotation: 2000deg;
      filter: blur(1.6vw);
      top: -23vw;
      left: 58vw;
      width: 60vw;
      height: 60vw;
   }

   .bg-circle4 {
      --initial-rotation: 63deg;
      filter: blur(1.6vw);
      top: 50vw;
      left: 20vw;
      width: 40vw;
      height: 40vw;
   }
}