.circle {
  position: fixed; /* Changed from absolute to fixed */
  border-radius: 50%;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  z-index: -1; /* Ensures circles are in the background */
}

.circle:hover {
  transform: scale(1.3) rotate(15deg);
}

.circle.red {
  width: 10vw;
  height: 10vw;
  border: 0.5vw solid #ff0000;
  top: 70%;
  left: 70%;
}

.circle.purple {
  width: 14.3vw;
  height: 14.3vw;
  top: -17vh;
  left: 43vw;
  z-index: 8;
  border: 1vw solid #BB00FF;
}

.circle.mpurple {
 width: 48.7vw;
    height: 48.7vw;
    top: -12vh;
    left: 30vw;
    z-index: 8;
  border: 3px solid #BB00FF;
}

.circle.green {
  width: 6.3vw;
  height: 6.3vw;
  top: 18vh;
  left: 87vw;
  border: 0.5vw solid #97DE0A; /* Changed from px */
  z-index: 1;
}

.circle.mgreen {
  width: 23vw;
    height: 23vw;
    top: 10vh;
    left: 63vw;
    border: 4px solid #97DE0A;
    z-index: 1;
}

.circle.greens {
  width: 8vw;
  height: 8vw;
  top: 38vh;
  left: 45vw;
  border: 0.75vw solid #97DE0A;
}

.circle.blue {
  width: 9.1vw;
  height: 9.1vw;
  top: 138vh;
  left: 62vw;
  border: 0.6vw solid #4046FC; /* Changed from px */
  z-index:0;
}

.circle.mblue {
 width: 32vw;
    height: 32vw;
    top: 62vh;
    left: 62vw;
    border: 3px solid #4046FC;
    z-index: 1;
}

.circle.darkred {
  width: 12vw;
  height: 12vw;
  top: 40vh;
  left: 75vw;
  border: 0.5vw solid #FF0000;
}

.circle.purple2,
.circle.purple4,
.circle.purple5 {
  width: 14.6vw;
  height: 14.6vw;
  border: 1vw solid #BB00FF;
  z-index: 1;
}

.circle.mpurple4 {
 width: 35.5vw;
    height: 35.5vw;
    border: 4px solid #BB00FF;
    z-index: 1;
    top: 75vh;
    left: 73vw;
}

.circle.purple2 { top: 120vh; left: 95vw; }
.circle.purple4 { top: 120vh; left: 92vw; }
.circle.purple5 { top: 577px; left: 94vw; }


.circle.purple3 {
  width: 6.6vw;
  height: 6.6vw;
  top: 160vh;
  left: 74vw;
  border: 0.5vw solid #B60CFF; /* Changed from px */
  z-index: 0;
}

.circle.red3 {
  width: 36.7vw;
  height: 36.7vw;
  top: 200vh;
  left: 75vw;
  border: 0.3vw solid #FF0000;
  z-index: 0;
}
.circle.red5 {
 width: 6.3vw;
    height: 6.3vw;
    top: 55vh;
    left: 12vw;
    border: 9px solid #FF0000;
    z-index: -1;
}
.circle.red6 {
 width: 6.3vw;
    height: 6.3vw;
    top: 50vh;
    left: 12vw;
    border: 9px solid #FF0000;
    z-index: -1;
}

.circle.lightgreen {
  width: 6vw;
  height: 6vw;
  top: 125vh;
  left: 75vw;
  border: 0.4vw solid #F00; /* Changed from px */
  z-index: 1;
}

.circle.pink,
.circle.pink1,
.circle.cpink {
  width: 6.4vw;
  height: 6.4vw;
  left: -3%;
  border: 0.6vw solid #FC40CD; /* Changed from px */
  z-index: 1;
}

.circle.mpink1 {
 width: 38.9vw;
    height: 38.9vw;
    left: -19%;
    border: 4px solid #FC40CD;
    z-index: 1;
    top: 38vh;
}

.circle.pink { top: 33vh; }
.circle.pink1 { top: 110vh; }
.circle.cpink { top: 60vh; }

.circle.yellow {
  width: 4.1vw;
  height: 4.1vw;
  top: 20vh;
  left: 65vw;
  border: 0.3vw solid #F2B705;
  z-index: 1;
}

.circle.myellow {
  width: 22.7vw;
    height: 22.7vw;
    top: 18vh;
    left: 57vw;
    border: 3px solid #F2B705;
    z-index: 1;
}

.circle.skyblue,
.circle.skyblue1,
.circle.skyblue3,
.circle.tskyblue3 {
  left: 70vw;
  border: 0.5vw solid #0CAEFF;
  z-index: -1;
}

.circle.skyblue { width: 8vw; height: 8vw; top: 89vh; }
.circle.skyblue1 { width: 8vw; height: 8vw; top: 64vh; }
.circle.skyblue3 { width: 6.6vw; height: 6.6vw; top: 167vh; }
.circle.tskyblue3 { width: 6.6vw; height: 6.6vw; top: 1025px; }


.circle.glightgreen {
  width: 6.3vw;
  height: 6.3vw;
  top: 125vh;
  left: 36vw;
  border: 0.5vw solid #97DE0A; /* Changed from px */
  z-index: 1;
}

.circle.mglightgreen {
  width: 19.7vw;
    height: 19.7vw;
    top: 5vh;
    left: 20vw;
  border: 3px solid #EAF205; /* Changed from px */
  z-index: 1;
}

.circle.gdarkred {
	width: 3.6vw;
  height: 3.6vw;
  top: 123vh;
  left: 21vw;
  border: 0.2vw solid #00B58D; /* Changed from px */
}

.circle.mgdarkred {
	width: 21.8vw;
    height: 21.8vw;
    top: 62vh;
    left: 30vw;
    border: 3px solid #00B58D;
}

.circle.lightyellow {
	width: 4.2vw;
  height: 4.2vw;
  top: 110vh;
  left: 43vw;
  border: 0.3vw solid #EAF205; /* Changed from px */
}

.circle.lightgreens,
.circle.tlightgreens {
	width: 4.2vw;
  height: 4.2vw;
  left: 15vw;
  border: 0.4vw solid #97DE0A; /* Changed from px */
}

.circle.lightgreens { top: 185vh; }
.circle.tlightgreens { top: 175vh; }


/* --- Responsive Adjustments --- */

/* For Tablets */
@media (max-width: 1024px) {
  .circle {
    /* Scale down all sizes and borders slightly for tablets */
    transform: scale(0.8);
  }
  
}
@media only screen and (min-width: 1024px) and (max-width: 1280px){ 
  .circle.pink1 {
    /* Scale down all sizes and borders slightly for tablets */
	top: 120vh;
  }
  .circle.purple4{
	  top: 145vh;
	  width: 16.3vw;
    height: 16.3vw;
    border: 1vw solid #BB00FF;
    z-index: 1;
  }
  .circle.lightgreen{
	  width: 10.3vw;
    height: 10.3vw;
    top: 145vh;
    left: 75vw;
    border: 0.4vw solid #F00;
    z-index: 1;
  }
  .circle.blue{
	  width: 10.1vw;
    height: 10.1vw;
    top: 155vh;
    left: 57vw;
    border: 0.6vw solid #4046FC;
    z-index: 0;
  }
  .circle.purple3{
	  width: 7.3vw;
    height: 7.3vw;
    top: 180vh;
    left: 70vw;
    border: 0.5vw solid #B60CFF;
    z-index: 0;
  }
  
  .circle.red3{
	  width: 40.8vw;
    height: 40.8vw;
    top: 230vh;
    left: 75vw;
    border: 0.3vw solid #FF0000;
    z-index: 0;
  }
  
}
@media only screen and (min-width: 800px) and (max-width: 1024px){
	.circle.purple{
		width: 17.8vw;
    height: 17.8vw;
    top: -5vh;
    left: 32vw;
    z-index: 8;
    border: 1vw solid #BB00FF;
	}
	.circle.yellow{
		width: 8.3vw;
    height: 8.3vw;
    top: 27vh;
    left: 57vw;
    border: 0.3vw solid #F2B705;
    z-index: 1;
	}
	.circle.green{
		width: 9vw;
    height: 9vw;
    top: 15vh;
    left: 75vw;
    border: 0.5vw solid #97DE0A;
    z-index: 1;
	}
	.circle.pink, .circle.pink1, .circle.cpink{
		width: 14.2vw;
    height: 14.2vw;
    left: -7%;
    border: 0.6vw solid #FC40CD;
    z-index: 1;
    top: 45vh !important;
	}
	.circle.glightgreen{
		width: 6.3vw;
    height: 6.3vw;
    top: 80vh;
    left: 36vw;
    border: 0.5vw solid #97DE0A;
    z-index: 1;
	}
	.circle.gdarkred{
		width: 8vw;
    height: 8vw;
    top: 65vh;
    left: 15vw;
    border: 0.2vw solid #00B58D;
	}
	.circle.lightyellow{
			width: 9vw;
    height: 9vw;
    top: 100vh;
    left: 55vw;
    border: 0.3vw solid #EAF205;
    z-index: 1;
	}
	.circle.purple4{
		top: 88vh;
        width: 16.3vw;
        height: 16.3vw;
        border: 1vw solid #BB00FF;
        z-index: 1;
		left:75vw
	}
	
}	
@media only screen and (min-width: 1600px) and (max-width: 1759px){
	.circle.pink1{
		top:100vh;
		width: 5.7vw;
		height: 5.7vw;
	}
	.circle.gdarkred{
		    width: 3.2vw;
    height: 3.2vw;
    top: 110vh;
	}
	.circle.glightgreen{
		    width: 5.6vw;
    height: 5.6vw;
    top: 108vh;
    left: 36vw;
    border: 0.5vw solid #97DE0A;
    z-index: 1;
	}
	.circle.purple4{
		top: 110vh;
    left: 92vw;
	width: 13vw;
    height: 13vw;
	}
	.circle.lightgreen{
			width: 8.3vw;
    height: 8.3vw;
    top: 110vh;
    left: 75vw;
    border: 0.4vw solid #F00;
    z-index: 1;
	}
	.circle.blue{
		width: 8.1vw;
    height: 8.1vw;
    top: 125vh;
    left: 58vw;
    border: 0.6vw solid #4046FC;
    z-index: 0;
	}
	.circle.purple3{
		width: 5.9vw;
    height: 5.9vw;
    top: 146vh;
    left: 70vw;
    border: 0.5vw solid #B60CFF;
    z-index: 0;
	}
	.circle.lightyellow{
		width: 3.8vw;
    height: 3.8vw;
    top: 192vh;
    left: 43vw;
    border: 0.3vw solid #EAF205;
    z-index: 0;
	}
	.circle.red3{
		    width: 32.6vw;
    height: 32.6vw;
    top: 185vh;
	}
	.circle.lightgreens{
		top: 1100px;
        left: 20vw;
	}
	.circle.skyblue3{
		top: 1025px;
	}
	.circle.red6{
		top: 305px;
    left: 300px;
	}
	.circle.red5{
		top: 330px;
    left: 300px;
	}

}
@media only screen and (min-width: 1760px) and (max-width: 2080px)
 {
  .circle.yellow {
    /* Scale down all sizes and borders slightly for tablets */
   width: 2.8vw;
    height: 2.8vw;
    top: 15vh;
    left: 75vw;
    border: 0.2vw solid #F2B705;
    z-index: 1;
  }
  .circle.green {
    /* Scale down all sizes and borders slightly for tablets */
   width: 4.2vw;
    height: 4.2vw;
    top: 13vh;
    left: 90vw;
    border: 0.3vw solid #97DE0A;
    z-index: 1;
  }
  .circle.pink, .circle.pink1, .circle.cpink {
    /* Scale down all sizes and borders slightly for tablets */
   width: 4.7vw;
    height: 4.7vw;
    left: -3%;
    border: 0.6vw solid #FC40CD;
    z-index: 1;
    top: 83vh !important;
  }
  .circle.gdarkred {
        width: 2.7vw;
    height: 2.7vw;
    top: 92vh;
    left: 15vw;
    border: 0.2vw solid #00B58D;
  }
  .circle.glightgreen {
    width: 4.7vw;
    height: 4.7vw;
    top: 90vh;
    left: 33vw;
    border: 0.4vw solid #97DE0A;
    z-index: 0;
  }
  .circle.blue {
    width: 6.7vw;
    height: 6.7vw;
    top: 110vh;
    left: 62vw;
    border: 0.4vw solid #4046FC;
    z-index: 0;
  }
  .circle.lightgreen {
        width: 6.9vw;
    height: 6.9vw;
    top: 95vh;
    left: 75vw;
    border: 0.4vw solid #F00;
    z-index: 1;
  }
  .circle.purple3 {
        width: 4.9vw;
    height: 4.9vw;
    top: 128vh;
    left: 74vw;
    border: 0.5vw solid #B60CFF;
    z-index: 1;
  }
  .circle.red3 {
        width: 27.2vw;
    height: 27.2vw;
    top: 145vh;
    left: 78vw;
    border: 0.3vw solid #FF0000;
    z-index: 0;
  }
  .circle.purple4{
		top: 90vh;
		left: 90vw;
  }
  .circle.lightgreens{
		top:131vh;
		left:25vw;
	}
	.circle.skyblue3{
		top: 122vh;
	}
	.circle.red6{
		top: 36vh;
        left: 21vw;
	}
	.circle.red5{
		top: 330px;
    left: 400px;
	}
}
@media (min-width: 2080px){
	.circle.purple{
		width: 10.3vw;
    height: 10.3vw;
    top: -11vh;
    left: 43vw;
    z-index: 8;
    border: 0.5vw solid #BB00FF;
	}
	.circle.green{
		width: 3.2vw;
    height: 3.2vw;
    top: 9vh;
    left: 93vw;
    border: 0.3vw solid #97DE0A;
    z-index: 1;
	}
	.circle.yellow{
		width: 2.5vw;
    height: 2.5vw;
    top: 9vh;
    left: 83vw;
    border: 0.3vw solid #F2B705;
    z-index: 0;
	}
	.circle.purple4{
		top: 60vh;
    left: 95vw;
	width: 7.6vw;
    height: 7.6vw;
    border: 0.5vw solid #BB00FF;
    z-index: 0;
	}
	.circle.red3{
		width: 20.7vw;
    height: 20.7vw;
    top: 114vh;
    left: 85vw;
    border: 0.3vw solid #FF0000;
    z-index: 0;
	}
	.circle.lightyellow{
		width: 2.2vw;
    height: 2.2vw;
    top: 102vh;
    left: 22vw;
    border: 0.2vw solid #EAF205;	
	}
	.circle.pink1{
		top: 58vh;
		width: 5.4vw;
    height: 5.4vw;
    left: -3%;
    border: 0.4vw solid #FC40CD;
    z-index: 1;
	}
	.circle.lightgreen{
		width: 3vw;
    height: 3vw;
    top: 60vh;
    left: 82vw;
    border: 0.3vw solid #F00;
    z-index: 1;
	}
	.circle.blue{
		width: 4.1vw;
    height: 4.1vw;
    top: 70vh;
    left: 70vw;
    border: 0.4vw solid #4046FC;
    z-index: 1;
	}
	.circle.glightgreen{
		width: 4.3vw;
    height: 4.3vw;
    top: 65vh;
    left: 30vw;
    border: 0.3vw solid #97DE0A;
    z-index: 1;
	}
	.circle.gdarkred{
		width: 3.6vw;
    height: 3.6vw;
    top: 70vh;
    left: 13vw;
    border: 0.2vw solid #00B58D;
	}
}
/* For Mobile */
@media only screen and (min-width: 600px) and (max-width: 900px)
{
  .circle {
    /* Further scale down for mobile screens */
    transform: scale(0.6);
  }
  
}
@media (max-width: 700px) {
	.circle.glightgreen{
		width: 11vw;
		height: 11vw;
		top: 63vh;
		left: 36vw;
		border: 0.5vw solid #97DE0A;
		z-index: 0;
	  
  }
  .circle.mglightgreen{
	  width: 15.3vw;
    height: 15.3vw;
    top: 6vh;
    left: 25vw;
    border: 3px solid #EAF205;
    z-index: 1;
  }
  .circle.mpurple{
		width: 37.7vw;
    height: 38.7vw;
    top: -10vh;
    left: 30vw;
    z-index: 8;
    border: 4px solid #BB00FF;
  }
  .circle.myellow{
	  width: 17.7vw;
    height: 17.7vw;
    top: 26vh;
    left: 66vw;
    border: 4px solid #F2B705;
    z-index: 1;
  }
  .circle.mgreen{
	  width: 19vw;
    height: 19vw;
    top: 15vh;
    left: 80vw;
    border: 4px solid #97DE0A;
    z-index: 1;
  }
}