body {
    background-color: #1F1F1F;
}

.circle-munkasok {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    font-size: 27px;
    color: #FFFFFF;
    line-height: 200px;
    text-align: center;
    background: #00770c;
    position: absolute;
    top:70%;
    left:60%;
    transform: translate(-50%, -50%);
}

.circle-1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #770600;
    position: absolute;
    top:55%;
    left:45%;
    transform: translate(-50%, -50%);
}

.circle-2 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #ff9100;
    position: absolute;
    top:70%;
    left:40%;
    transform: translate(-50%, -50%);
}

.circle-3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #ffdb00;
    position: absolute;
    top:85%;
    left:45%;
    transform: translate(-50%, -50%);
}

.circle-4 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #53bc00;
    position: absolute;
    top:100%;
    left:53%;
    transform: translate(-50%, -50%);
}

.circle-5 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #9200bc;
    position: absolute;
    top:100%;
    left:67%;
    transform: translate(-50%, -50%);
}

.circle-6 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #ff6e0f;
    position: absolute;
    top:85%;
    left:75%;
    transform: translate(-50%, -50%);
}

.circle-7 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #ff0063;
    position: absolute;
    top:70%;
    left:80%;
    transform: translate(-50%, -50%);
}

.circle-8 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #0091ff;
    position: absolute;
    top:55%;
    left:75%;
    transform: translate(-50%, -50%);
}

.circle-9 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #979100;
    position: absolute;
    top:45%;
    left:67%;
    transform: translate(-50%, -50%);
}

.circle-10 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #006829;
    position: absolute;
    top:45%;
    left:53%;
    transform: translate(-50%, -50%);
}


.circle-1-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #770600;
    position: absolute;
    top:55%;
    left:45%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-1-3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.circle-2-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #ff9100;
    position: absolute;
    top:70%;
    left:40%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 5s;
}

.circle-3-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #ffdb00;
    position: absolute;
    top:85%;
    left:45%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-1-3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 1s;

}

.circle-4-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #53bc00;
    position: absolute;
    top:100%;
    left:53%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-4-5;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 7s;

}

.circle-5-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #9200bc;
    position: absolute;
    top:100%;
    left: 67%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-4-5;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 7s;

}

.circle-6-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #ff6e0f;
    position: absolute;
    top:85%;
    left:75%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-6-8;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 3s;
}

.circle-7-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #ff0063;
    position: absolute;
    top:70%;
    left:80%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-6-8;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 8s;
}

.circle-8-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #0091ff;
    position: absolute;
    top:55%;
    left:75%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-6-8;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}

.circle-9-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    background: #979100;
    position: absolute;
    top:45%;
    left:67%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-9-10;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 6s;
}

.circle-10-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #000000;
    line-height: 100px;
    text-align: center;
    background: #006829;
    position: absolute;
    top:45%;
    left:53%;
    transform: translate(-50%, -50%);

    animation-name: circle-keyframe-9-10;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 3s;
}

@keyframes circle-keyframe-1-3 {
    0% {left: 45%;}
    100% {left: 60%; top: 69%;}
}

@keyframes circle-keyframe-2 {
    0% {left: 40%;}
    100% {left: 60%; top: 69%;}
}

@keyframes circle-keyframe-4-5 {
    0% {top: 100%;}
    100% {left: 60%; top: 69%;}
}

@keyframes circle-keyframe-7 {
    0% {left: 80%;}
    100% {left: 60%; top: 69%;}
}

@keyframes circle-keyframe-6-8 {
    0% {right: 25%;}
    100% {left: 60%; top: 69%;}
}

@keyframes circle-keyframe-9-10 {
    0% {top: 45%;}
    100% {left: 60%; top: 69%;}
}

@keyframes circle-shake-keyframe-1 {
    0% {left: 50%;}
    25% {left: 40%;}
    50% {left: 50%;}
    75% {left: 60%;}
    100% {left: 50%;}
}


.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}