@import "global.css";

:root {
    --circle-diameter: 50px;
    --inner-circle-diameter: 40px;
}

.skill {
    height: 95px;
    width: 25%;
}

.skill-name-text {
    font-size: 1.1rem;
    font-weight: bold;
}

.skill-circle-wrapper {
    height: var(--circle-diameter);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-circle-inner-wrapper {
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    position: absolute;
}

.skill-circle-percentage {
    background-color: var(--body-bg-color);
    width: var(--inner-circle-diameter);
    height: var(--inner-circle-diameter);
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Do not delete - used in js for drawing ring */
.ring-base {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    border-radius: 50%;
    position: absolute;
}

@media screen and (max-width: 960px) {
    .skill-name-text {
        font-size: min(1rem, max(3.5vw, 11px))
    }
}