.popit-3 {
    width: 485px;
    height: 480px;
    clip-path: circle(50% at 50% 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popit3__line {
    display: flex;  
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.popit3__circle {
    width: 70px;
    height: 70px;
    margin: 0 2.5px;
    background: #000;
    border-radius: 100%;
    cursor: pointer;
}

.popit3__line:nth-child(1) {
    background: red;
}

.popit3__line:nth-child(1) .popit3__circle {
    background: linear-gradient(145deg, #671818, #d32020);
    box-shadow: inset 5px 5px 10px #660a0a, inset -5px -5px 10px #ff0000;
}

.popit3__line:nth-child(1) .popit3__circle.active {
    background: #ff1d1d;
    box-shadow: inset 5px 5px 10px #660a0a, inset -5px -5px 10px #af0707;
}

.popit3__line:nth-child(1) .popit3__circle {
    width: 60px;
    height: 60px;
}

.popit3__line:nth-child(2) {
    background: #ff8000;
}

.popit3__line:nth-child(2) .popit3__circle {
    background: linear-gradient(145deg, #8b5e0b, #ff9b05);
    box-shadow: inset 5px 5px 10px #755113, inset -5px -5px 10px #ffad00;
}

.popit3__line:nth-child(2) .popit3__circle.active {
    background: #ff8c08;
}

.popit3__line:nth-child(3) {
    background: #fff707;
}

.popit3__line:nth-child(3) .popit3__circle {
    background: linear-gradient(145deg, #706b1b, #ffe852);
}

.popit3__line:nth-child(3) .popit3__circle.active {
    background: #fbff00;
    box-shadow: inset 5px 5px 10px #9c8f35, inset -5px -5px 10px #ffec00;
}

.popit3__line:nth-child(3) .popit3__circle {
    margin: 0 2px;
    width: 62px;
    height: 62px;
}

.popit3__line:nth-child(4) {
    background: #04d419;
}

.popit3__line:nth-child(4) .popit3__circle {
    background: linear-gradient(145deg, #0c3d0b, #04e600);
}

.popit3__line:nth-child(4) .popit3__circle.active {
    background: #00ff1e;
    box-shadow: inset 5px 5px 10px #166415, inset -5px -5px 10px #04ff00;
}

.popit3__line:nth-child(4) .popit3__circle {
    margin: 0 2px;
    width: 63px;
    height: 63px;
}

.popit3__line:nth-child(5) {
    background: #00b7ff;
}

.popit3__line:nth-child(5) .popit3__circle {
    background: linear-gradient(145deg, #145069, #00b7ff);
}

.popit3__line:nth-child(5) .popit3__circle.active {
    background: #00b7ff;
    box-shadow: inset 5px 5px 10px #2c8bb1, inset -5px -5px 10px #189bd8;
}

.popit3__line:nth-child(6) {
    background: #e465f5;
}

.popit3__line:nth-child(6) .popit3__circle {
    background: linear-gradient(145deg, #b12ee9, #c46af5);
}

.popit3__line:nth-child(6) .popit3__circle.active {
    background: #e465f5;
    box-shadow: inset 5px 5px 10px #20082d, inset -5px -5px 10px #b200ff;
}

.popit3__line:nth-child(6) .popit3__circle {
    margin: 0 2px;
    width: 65px;
    height: 65px;
}