/* =========================================
   SOFT SKILLS SECTION
   ========================================= */

/* Main container for soft skills with reveal animation */
.mainSoftSkills {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 80%;
}
@media (orientation: portrait) and (max-width: 768px) {
    .mainSoftSkills {
        width: 100%;
    }
}


.mainSoftSkillsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;    
    height: 100%;
}

/* soft skills container */

.softSkillsContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

@media (orientation: portrait) and (max-width: 768px) {
    .softSkillsContainer {
        width: 100dvw;
        gap : 0;
    }
}


/* each soft skill */

.skill1, .skill2, .skill3, .skill4, .skill5, .skill6 {
    display: none;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    border-radius: .8rem;
    width: 30rem;
}

.skill4, .skill5, .skill6 {
    justify-content: flex-start;
}


@media (orientation: portrait) and (max-width: 768px) {
    .skill1, .skill2, .skill3, .skill4, .skill5, .skill6 {
       flex-direction: column;
       
       align-self: center;
    }
}

.skill1 p, .skill2 p, .skill3 p, .skill4 p, .skill5 p, .skill6 p {
    font-size: 1.5rem;
}

.skill1 span{
    color: var(--flavorColor);
    filter: hue-rotate(180deg);
    text-shadow: 0 0 .5rem var(--flavorColor);
}

.skill2 span{
    color: var(--flavorColor);
    filter: hue-rotate(120deg);
    text-shadow: 0 0 .5rem var(--flavorColor);
}

.skill3 span{
    color: var(--flavorColor);
    filter: hue-rotate(260deg);
    text-shadow: 0 0 .5rem var(--flavorColor);
}

.skill4 span{
    color: var(--flavorColor);
    filter: hue-rotate(280deg);
    text-shadow: 0 0 .5rem var(--flavorColor);
}

.skill5 span{
    color: var(--flavorColor);
    filter: hue-rotate(320deg);
    text-shadow: 0 0 .5rem var(--flavorColor);
}

.skill6 span{
    color: var(--flavorColor);
    filter: hue-rotate(380deg);
    text-shadow: 0 0 .5rem var(--flavorColor);
}


/* Circular Progress Bar */

/* Circular progress bar sizing and positioning */
.circularProgress1 , .circularProgress2 , .circularProgress3 , .circularProgress4 , .circularProgress5 , .circularProgress6 {
    position: relative;
    height: 10rem;
    width: 10rem;
    text-shadow: 0 0 .5rem var(--flavorColor);
}

.circularProgress1 .outer , .circularProgress2 .outer , .circularProgress3 .outer , .circularProgress4 .outer , .circularProgress5 .outer , .circularProgress6 .outer {
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
    padding: 1.25rem;
}

.circularProgress1 .inner , .circularProgress2 .inner , .circularProgress3 .inner , .circularProgress4 .inner , .circularProgress5 .inner , .circularProgress6 .inner {
    height: 7.5rem;
    width: 7.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number {
    font-weight: lighter;
    font-size: 1.5rem;
}

.n1 {
    font-weight: bold;
    color: var(--flavorColor);
    filter: hue-rotate(180deg);
}

.n2 {
    font-weight: bold;
    color: var(--flavorColor);
    filter: hue-rotate(120deg);
}

.n3 {
    font-weight: bold;
    color: var(--flavorColor);
    filter: hue-rotate(260deg);
}

.n4 {
    font-weight: bold;
    color: var(--flavorColor);
    filter: hue-rotate(280deg);
}

.n5 {
    font-weight: bold;
    color: var(--flavorColor);
    filter: hue-rotate(320deg);
}

.n6 {
    font-weight: bold;
    color: var(--flavorColor);
    filter: hue-rotate(380deg);
}

.circularProgress1 circle , .circularProgress2 circle , .circularProgress3 circle , .circularProgress4 circle , .circularProgress5 circle , .circularProgress6 circle {
    fill: none;
    stroke: var(--flavorColor);
    stroke-width: .2rem;
    stroke-dashoffset: 1000;
    animation: progressAnimation 2s forwards;

}

.circularProgress1 circle {
    stroke-dasharray: 447.48;
    filter: hue-rotate(180deg);
}

.circularProgress2 circle {
    stroke-dasharray: 406.8;
    filter: hue-rotate(120deg);
}

.circularProgress3 circle {
    stroke-dasharray:  384.2;
    filter: hue-rotate(260deg);
}

.circularProgress4 circle {
    stroke-dasharray: 339;
    filter: hue-rotate(280deg);
}

.circularProgress5 circle {
    stroke-dasharray: 361.6;
    filter: hue-rotate(320deg);
}

.circularProgress6 circle {
    stroke-dasharray: 361.6;
    filter: hue-rotate(380deg);
}

.circularProgress1 svg , .circularProgress2 svg , .circularProgress3 svg , .circularProgress4 svg , .circularProgress5 svg , .circularProgress6 svg {
    position: absolute;
    top: 0;
    left: 0;
}

.mainSoftSkillsChange {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.mainSoftSkillsChange button {
    border-radius: 50%;
    padding: 0;
    border: none;
    &:hover {
        background-color: transparent;
        svg {
            fill: var(--flavorColor);
            filter: drop-shadow(0 0 .5rem var(--flavorColor));
            transition: .3s ease-in-out;
        }
    }
}
.hardSkillsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
@media (orientation: portrait) and (max-width: 768px) {
    .hardSkillsContainer {
        width: 100dvw;
        gap : 0;
    }
}
.hardSkills1, .hardSkills2, .hardSkills3 {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 1rem;
    border-radius: .8rem;
    width: 30rem;
}

.hardSkills1 circle  {
    stroke-dasharray: 447.48;
}

.hardSkills2 circle {
    stroke-dasharray:  384.2;
}

.hardSkills3 circle {
    stroke-dasharray: 447.48;
}

@media (orientation: portrait) and (max-width: 768px) {
    .hardSkills1, .hardSkills2, .hardSkills3, .hardSkills4, .hardSkills5, .hardSkills6 {
       flex-direction: column;
       width: fit-content;
       align-self: center;
    }
}