/************ SKILLS ************/

.skills-wrapper {
    width: 98%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing_medium) var(--spacing_medium) var(--spacing_medium);
    max-width: 1400px;
    min-width: 800px;
    margin: auto;
    margin-bottom: var(--spacing_large);
}

.skills-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing_large);
}

.column-rotator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    gap: var(--spacing_medium);
    rotate: 45deg;
}

.progressBar {
    width: 120px; /* Twice the radius */
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progressBarLabel {
    rotate: -45deg;
}

.progressBar svg {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(-135deg);
}

.progressBarFill {
    stroke-dasharray: 377; /* 2 * PI * radius */
    stroke-dashoffset: 377;
}

.lg1 {
    stroke: url(#linearGradient1);
}

.lg2 {
    stroke: url(#linearGradient2);
}

.progressBarTrack { stroke: black; }

circle {
    fill: none;
    stroke-width: 10px;
    stroke-linecap: round;
}

/************ RESPONSIVE EFFECTS ************/

@media (max-width: 1400px) {

    .skills-wrapper {
        flex-wrap: wrap;
        column-gap: calc(2 * var(--spacing_large));

        justify-content: center;
        min-width: 380px;
    }
}

@media (max-width: 1000px) {

    .skills-wrapper {
        flex-direction: column;
        row-gap: var(--spacing_large);
    }
}