.container-skils {
    display: flex;
    background-color: var(--black-color);
    gap: 20px;
    flex-direction: column;
    position: relative;
    box-sizing: content-box;
    margin: 0 calc(-1 * var(--margin-20));
    justify-content: center;
    align-items: center;
    color: inherit;
    padding: var(--margin-20);

    @media (max-width:600px) {
        margin: 0 calc(-1 * var(--margin-10));
        padding: var(--margin-10);
    }
}

.skils {
    background-attachment: scroll, local;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 600px) {
        flex-wrap: wrap;
    }
}

:root {
    --color-1: #C7B2FF;
    --color-2: #A1EEFF;
    --color-3: #EED677;
    --color-4: #A52A2A;
    --color-5: #4EF483;
    --color-6: #7C4EFF;
}

.color-1 {
    stroke: var(--color-1);

    &.active {
        filter: drop-shadow(0 4px 8px var(--color-1));
        stroke-width: 22px;
    }
}

.color-2 {
    stroke: var(--color-2);

    &.active {
        filter: drop-shadow(0 4px 8px var(--color-2));
        stroke-width: 22px;
    }
}

.color-3 {
    stroke: var(--color-3);

    &.active {
        filter: drop-shadow(0 4px 8px var(--color-3));
        stroke-width: 22px;
    }
}

.color-4 {
    stroke: var(--color-4);

    &.active {
        filter: drop-shadow(0 4px 8px var(--color-4));
        stroke-width: 22px;
    }
}

.color-5 {
    stroke: var(--color-5);

    &.active {
        filter: drop-shadow(0 4px 8px var(--color-5));
        stroke-width: 22px;
    }
}

.color-6 {
    stroke: var(--color-6);

    &.active {
        filter: drop-shadow(0 4px 8px var(--color-6));
        stroke-width: 22px;
    }
}

li {
    &:has(.color-1) {
        &::marker {
            color: var(--color-1);
        }
    }

    &:has(.color-2) {
        &::marker {
            color: var(--color-2);
        }
    }

    &:has(.color-3) {
        &::marker {
            color: var(--color-3);
        }
    }

    &:has(.color-4) {
        &::marker {
            color: var(--color-4);
        }
    }

    &:has(.color-5) {
        &::marker {
            color: var(--color-5);
        }
    }

    &:has(.color-6) {
        &::marker {
            color: var(--color-6);
        }
    }

    span.active {
        text-decoration: underline var(--white-color);
    }
}


.segment {
    pointer-events: stroke;
}

#center-blocker {
    pointer-events: all;
    cursor: default;
}