.popit-2 {
    width: 475px;
    height: 450px;
    clip-path: polygon(25% 0, 75% 0, 100% 31%, 100% 68%, 75% 100%, 23% 100%, 0 69%, 0 28%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

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

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

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

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

.popit2__line:nth-child(2) {
    background: #ff8c08;
}

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

.popit2__line:nth-child(2) .popit2__circle.active {
    background: #ff8000;
}

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

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

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

.popit2__line:nth-child(3) .popit2__circle {
    margin: 0 1px;
}

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

.popit2__line:nth-child(4) .popit2__circle {
    background: linear-gradient(145deg, #0c580b, #04e600);
}

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

.popit2__line:nth-child(4) .popit2__circle {
    margin: 0 1px;
}

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

.popit2__line:nth-child(5) .popit2__circle {
    background: linear-gradient(145deg, #0e5d7d, #00b7ff);
}

.popit2__line:nth-child(5) .popit2__circle.active {
    background: #00b7ff;
    box-shadow: inset 5px 5px 10px #11313e, inset -5px -5px 10px #189bd8;
}

.popit2__line:nth-child(6) {
    background: #e101ff;
}

.popit2__line:nth-child(6) .popit2__circle {
    background: linear-gradient(145deg, #541b6d, #c46af5);
}

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