.skill-container {
    width: 18.6680vw;
    height: fit-content;

    display: flex;
    align-items: center;
    gap: 0.5200vw;

    padding: 0.5200vw;

    background-color: var(--secondary-bg-color);
    border-radius: var(--rounded);
}

.skill-icon {
    min-width: 3.1200vw;
    height: 3.1200vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: var(--icon-size);

    color: var(--skill-color);
    border-color: var(--skill-color);
    background-color: var(--skill-bg-color);

    border: 1px solid;
    border-radius: var(--rounded);
}

.skill-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.skill-data-upper {
    display: flex;
    justify-content: space-between;
}

.skill-data-upper div {
    width: fit-content;
    height: 1.5600vw;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5800vw;

    padding: 0.1040vw 0.5200vw;

    background-color: var(--skill-bg-color);
    border-radius: var(--rounded);
}

.skill-data-upper div p,
.skill-data-upper div i {
    color: var(--primary-text-color);

    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.skill-label {
    font-size: var(--font-size-md);
    font-weight: 700;
}

.skill-xp {
    color: var(--primary-text-color);
    font-size: var(--font-size-sm);
    font-weight: 300;
}

.skill__progress-bar {
    position: relative;

    width: 100%;
    height: 0.3120vw;

    background-color: var(--progress-bar-bg-color);
    border-radius: var(--rounded);

    overflow: hidden;
}

.skill-progress-bar {
    position: absolute;
    height: 100%;

    border-radius: var(--rounded);
}
