body{
    background-color: rgb(181, 221, 252);
}

div.one{
    width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 40% 30%,#0000 4%,57%,#000 90%) 
    #7dad66;
    position: absolute;
    top: 1vh;
    left: 40vw;
    z-index: 999;
    
}

div.two{
    width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 40% 30%,#0000 4%,57%,#000 90%) 
    #8a4aac;
    position: absolute;
    top: 25vh;
    left: 40vw;
    z-index: 998;
    
}

div.three{
    border-style:dotted;
    
    --b: 5px; /* border thickness */
    height: 700px; /* adjust to control the size  */
    aspect-ratio: 1;
    clip-path: 
      polygon(50% 0,100% 50%,50% 100%,0 50%,50% 0,
       50% var(--b),
       var(--b) 50%,
       50% calc(100% - var(--b)),
       calc(100% - var(--b)) 50%,
       50% var(--b)
      );
    background: #535dcb;
    position: absolute;
    top: 10vh;
    left:20vw;
    z-index: 9997;

}

div.four{
    width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff200;
  box-shadow: -1px -2px 102px 24px rgba(255,242,0,1);
-webkit-box-shadow: -1px -2px 102px 24px rgba(255,242,0,1);
-moz-box-shadow: -1px -2px 102px 24px rgba(255,242,0,1);
  position: absolute;
  top: 15vh;
  left: 30vw;
}

div.five{
    width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 40% 30%,#0000 4%,57%,#000 90%) 
    #e5dbdb;
    position: absolute;
    top: 65vh;
    left: 40vw;
    z-index: 998;

}

div.six{
    width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 40% 30%,#0000 4%,57%,#000 90%) 
    #282827;
    position: absolute;
    top: 90vh;
    left: 40vw;
    z-index: 998;
}

div.seven{
    width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 40% 30%,#0000 4%,57%,#000 90%) 
    #bbaa94;
    position: absolute;
    top: 50vh;
    left: 10vw;
    z-index: 998;
}

div.eight{
    width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 40% 30%,#0000 4%,57%,#000 90%) 
    #e486d8;
    position: absolute;
    top: 50vh;
    left: 70vw;
    z-index: 998;
   
}