html {
    background-color: #FF1493; 
    color: #0000EE; 
}
    
body, html {
  height: 100%;
  margin: 0;
}
    
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-element {
	width: 300px;
	height: 300px;
	border-radius: 5px;
    background-color: #7FFF00;
}






.circle {
  position: absolute;
  background: #7CFC00; /* grün */
  border-radius: 50%;
  border: 3px double border #b6ff00; /* heller Rand */
}

/* Einzelne Kreise (Position + Größe) */
/* Große Kreise */
.c1  { width: 120px; height: 120px; top: 8%; left: 12%; }
.c2  { width: 100px; height: 100px; top: 10%; left: 25%; }
.c3  { width: 140px; height: 140px; top: 18%; right: 8%; }
.c4  { width: 90px; height: 90px; top: 32%; right: 5%; }
.c5  { width: 130px; height: 130px; bottom: 8%; left: 45%; }
.c6  { width: 110px; height: 110px; bottom: 12%; right: 18%; }
.c7  { width: 120px; height: 120px; bottom: 10%; left: 5%; }

/* Mittlere Kreise */
.c8  { width: 70px; height: 70px; top: 35%; left: 18%; }
.c9  { width: 60px; height: 60px; top: 50%; left: 20%; }
.c10 { width: 80px; height: 80px; top: 55%; right: 30%; }
.c11 { width: 65px; height: 65px; bottom: 25%; left: 30%; }
.c12 { width: 75px; height: 75px; bottom: 35%; right: 10%; }
.c13 { width: 60px; height: 60px; top: 65%; left: 55%; }

/* Kleine Kreise */
.c14 { width: 30px; height: 30px; top: 15%; left: 8%; }
.c15 { width: 25px; height: 25px; top: 30%; left: 60%; }
.c16 { width: 20px; height: 20px; top: 25%; right: 25%; }
.c17 { width: 28px; height: 28px; top: 40%; left: 35%; }
.c18 { width: 22px; height: 22px; top: 45%; right: 40%; }
.c19 { width: 26px; height: 26px; top: 60%; left: 10%; }
.c20 { width: 24px; height: 24px; top: 70%; right: 35%; }
.c21 { width: 18px; height: 18px; bottom: 20%; left: 60%; }
.c22 { width: 22px; height: 22px; bottom: 30%; right: 45%; }

/* Sehr kleine Punkte */
.c23 { width: 12px; height: 12px; top: 12%; left: 70%; }
.c24 { width: 10px; height: 10px; top: 18%; right: 15%; }
.c25 { width: 14px; height: 14px; top: 38%; right: 12%; }
.c26 { width: 12px; height: 12px; top: 48%; left: 42%; }
.c27 { width: 10px; height: 10px; top: 58%; right: 22%; }
.c28 { width: 12px; height: 12px; bottom: 18%; right: 5%; }
.c29 { width: 10px; height: 10px; bottom: 28%; left: 15%; }
.c30 { width: 8px; height: 8px; top: 5%; left: 5%; }

/* zusätzliche Streuung */
.c31 { width: 20px; height: 20px; top: 75%; left: 70%; }
.c32 { width: 18px; height: 18px; top: 30%; right: 2%; }
.c33 { width: 16px; height: 16px; bottom: 40%; left: 2%; }
.c34 { width: 14px; height: 14px; top: 80%; right: 10%; }
.c35 { width: 12px; height: 12px; bottom: 5%; right: 2%; }