.circle-font{
    color: white;
    font-size: 1em;
    text-align: center;
    vertical-align: middle;
   
    text-align: center;
   
    width: 100%;
    font-weight:700;
 
    justify-content: center;
    position: relative;
    z-index: 1;

}

.center-div{
    width:300px;
    height:300px;
    display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
}




/* Lower Left Circle */

.circle-1-position{
    position:relative;
    right: -25%;
    top: 15%;
    cursor: pointer;
}

.outer-1{
    background-color: none;
    margin: 0 auto;
    padding: 0;
    width: 200px;
    height: 200px;
    border: 10px solid;
    border-color: rgb(3, 151, 129) white orange orange;
    border-radius: 50%;
    position:absolute;
    z-index: 3;
    -webkit-animation: spin 4.8s linear infinite;
    -moz-animation: spin 4.8s linear infinite;
    animation: spin 4.8s linear infinite; 
}

.middle-1{
    background: linear-gradient( -45deg, rgb(102, 246, 224) 49%, white 51% );
    padding: 0;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    border: 0px solid rgb(132, 242, 226);
    border-radius: 300px;
    position:absolute;
    z-index: 4;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    animation-direction: reverse;
}

.inner-1{
    background-color: rgb(3, 151, 129);
    margin: 25px;
    width: 100px;
    height: 100px;

    border-radius: 100px;
    position:absolute;
    z-index: 5;
    display: flex;
    align-items: center; 
}


/* keyframes */
@-webkit-keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}

@keyframes spin {
    100%{-webkit-transform: rotate(360deg);}
}











/* Upper Right Circle */

.circle-2-position{
   

    position:relative;
    top: 10%;
    cursor: pointer;
}

.outer-2{
    background-color: none;
    margin: 0 auto;
    padding: 0;
    width: 200px;
    height: 200px;
    border: 10px solid;
    border-color: rgb(82, 202, 184) white white orange;
    border-radius: 50%;
    position:absolute;
    z-index: 3;
    -webkit-animation: spin 4.8s linear infinite;
    -moz-animation: spin 4.8s linear infinite;
    animation: spin 4.8s linear infinite;
}

.middle-2{
    background: linear-gradient( -90deg, rgb(102, 246, 224) 50%, white 50% );
    padding: 0;
    margin: 22px auto;
    width: 150px;
    height: 150px;
    border: 0px solid rgb(132, 242, 226);
    border-radius: 300px;
    position:absolute;
    z-index: 4;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    animation-direction: reverse;
}

.inner-2{
    background-color: orange;
    margin: 25px;
    width: 100px;
    height: 100px;

    border-radius: 100px;
    position:absolute;
    z-index: 5;

    display: flex;
    align-items: center; 

}







/* End Lower Right Circle */



/* Lower Right Circle */

.circle-3-position{
  

    position:relative;
    right: -47%;
    top: -38%;
    cursor: pointer;
}

.outer-3{
    background-color: none;
    margin: 0 auto;
    padding: 0;
    width: 200px;
    height: 200px;
    border: 10px solid;
    border-color: orange white rgb(102, 246, 224) rgb(102, 246, 224);
    border-radius: 50%;
    position:absolute;
    z-index: 3;
    -webkit-animation: spin 4.8s linear infinite;
    -moz-animation: spin 4.8s linear infinite;
    animation: spin 4.8s linear infinite;
}

.middle-3{
    background: linear-gradient( -140deg, white 49%, rgb(102, 246, 224) 51% );
    padding: 0;
    margin: 22px auto;
    width: 150px;
    height: 150px;
    border: 0px solid rgb(132, 242, 226);
    border-radius: 300px;
    position:absolute;
    z-index: 4;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    animation-direction: reverse;
}

.inner-3{
    background-color: rgb(10, 226, 193);
    margin: 25px;
    width: 100px;
    height: 100px;

    border-radius: 100px;
    position:absolute;
    z-index: 5;

    display: flex;
    align-items: center; 
}