:root {
    --cor-pri: #e6ebef;
    --cor-extra: #b4cfe6;
    --cor-sec: #7fa7c7;
    --cor-ter: #3f5f78;
    --acc-01: #8b7a6b;
    --acc-02: #3a2817;
    --acc-03: #d9d0b9;
    --fs-title: clamp(1.8rem, 3vw + 0.5rem, 2rem);
    --fs-text: clamp(0.8rem, 1vw + 0.5rem, 1.2rem);
    --size-img: clamp(10rem, 19vw + 0.5rem, 15rem);
    --size-img02: clamp(12rem, 23vw + 0.5rem, 18rem);
    --size-bar: clamp(0.33rem, 0.3vw + 0.1rem, 0.4rem);
}

section {
    justify-content: center;
}

.profile {
    display: flex;
    justify-content: space-around;
    align-content: center;
    gap: 2vw;
    margin: 3.5vw auto 0 auto;
    padding: 1.5vw;
    background: linear-gradient(white,white, whitesmoke);
    border-radius: 2vw;
    width: fit-content;
}

.karolo-photo {
    width: var(--size-img);
    height: auto;
    border-radius: 1.5vw;
    image-rendering: pixelated;
}

.list {
    list-style: none;
    padding: 0;
    margin: 0;
    align-content: center;
}

.list li {
    font-weight: bold;
    color: var(--cor-ter);
    font-size: var(--fs-text);
    font-weight: 100;
    margin: 0;
    text-align: justify;
    hyphens: auto;
    margin-bottom: 0.5rem;
}

.set-marrom{ background-color: var(--acc-03); }
.set-azul { background-color: var(--cor-extra); }

.skill-type {
    font-family: monospace;
    font-weight: bold;
    color: var(--cor-ter);
    font-size: var(--fs-text);
    font-weight: 600;
    padding: 0.5vw 0;
    text-align: justify;
    hyphens: auto;
    margin-bottom: 2vw;
}

.skills-01 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    gap: 1vw;
    margin-top: 3.5vw;
}

.skill-set {
    text-align: center;
    align-content: space-between;
    padding: 2vw;
    border-radius: 0.5vw;
    hyphens: auto;
}

.skill-list {
    margin-top: 1vw;
    text-align: left;
}

.skill-list-flex {
    display: grid;
    grid-template-columns: repeat (auto-fit, minmax(var(--size-img), 1fr));
}

.skill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 0.25vw;
}

.skill-item-s {
    display: flex;
    align-items: center;
    height: auto;
    padding: 0.25vw;
}

.progress-bar {
    align-content: center;
    width: clamp(4rem, 5vw + 0.1rem, 6rem);
    height: var(--size-bar);
    border-radius: 0.25rem;
    background-color: var(--cor-sec);
    overflow: hidden;
}
@keyframes growBar {
    from {
        width: 0;
    }
}

.skill-set:hover .progress {
    animation-delay: 1s;
    animation: growBar 2s ease-in-out forwards;
}

.progress {
    height: 100%;
    background-color: var(--cor-ter); 
    animation: growBar 1.5s ease-out forwards;
}
.java { width: 90%; }
.api { width: 25%; }
.spring { width: 25%; }
.python { width: 50%; }
.csharp { width: 75%; }
.html { width: 90%; }
.css { width: 90%; }
.js { width: 25%; }
.next { width: 25%; }
.portuguese { width: 100%; }
.english { width: 100%; }
.japanese { width: 75%; }

.skill-list-flex {
    display: flex;
    justify-content: space-between;
    padding: 0 1vw 0 0;
}

.skills-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    margin-top: 3.5vw;
}

.soft-skills {
    grid-column: span 2;
}

.education-grid02 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-evenly;
    align-content: center;
    gap: 1vw;
    margin-top: 3.5vw;
}

.long-course01 {
    grid-column: span 1;
    text-align: center;
    align-content: space-between;
    padding: 2vw;
    border-radius: 0.5vw;
    hyphens: auto;
}

.long-course02 {
    grid-column: span 2;
    text-align: center;
    align-content: space-between;
    padding: 2vw;
    border-radius: 0.5vw;
    hyphens: auto;
}

.education-grid03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-evenly;
    align-content: center;
    gap: 1vw;
    margin-top: 1vw;
}

.short-course02 {
    grid-column: span 2;
    text-align: center;
    align-content: space-between;
    padding: 2vw;
    border-radius: 0.5vw;
    hyphens: auto;
}

.short-course01 {
    grid-column: span 1;
    text-align: center;
    align-content: space-between;
    padding: 2vw;
    border-radius: 0.5vw;
    hyphens: auto;
}