/* spell-checker: disable */

*{
    margin: 0;
    padding: 0;
}

.CirclesContainer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 67%;
    left: 50%;
    transform: rotateX(70deg);
    perspective: 400px;
    transform-style: preserve-3d;
}

.circle {
    border-radius: 100px;
    position: absolute;
    z-index: 1;
    animation: anim 10s infinite;
}

@keyframes anim {
    50% {
        transform: translateZ(53px);
    }
}

.circle1 {
    height: 200px;
    width: 200px;
    border: 5px solid blue;
    animation-delay: 2s;
}

.circle2 {
    height: 180px;
    width: 180px;
    border: 5px solid #ffbb00;
    animation-delay: 1.8s;
}

.circle3 {
    height: 160px;
    width: 160px;
    border: 5px solid #ff4800;
    animation-delay: 1.6s;
}

.circle4 {
    height: 140px;
    width: 140px;
    border: 5px solid #09ff00;
    animation-delay: 1.4s;
}

.circle5 {
    height: 120px;
    width: 120px;
    border: 5px solid #00a2ff;
    animation-delay: 1.2s;
}

.circle6 {
    height: 100px;
    width: 100px;
    border: 5px solid #00f0ff;
    animation-delay: 1s;
}

.circle7 {
    height: 80px;
    width: 80px;
    border: 5px solid #ff0015;
    animation-delay: .8s;
}

.circle8 {
    height: 60px;
    width: 60px;
    border: 5px solid #707070;
    animation-delay: .6s;
}

.circle9 {
    height: 40px;
    width: 40px;
    border: 5px solid #00f000;
    animation-delay: .4s;
}

.circle10 {
    height: 20px;
    width: 20px;
    border: 5px solid #0000ff;
    animation-delay: .2s;
}