/** SKILLS */
#skills {
    min-height: 0;
    padding-top: 6rem;
    padding-left: 3rem;
}

#skills article {
    min-height: 0;

    align-self: end;
    display: flex;

    transition: background-color 0.5s ease;
    background-color: #76aac889;
    backdrop-filter: blur(2px);
    border-radius: 1rem;

    padding: 0.625rem;
} #skills article:hover {
    background-color: #76aac8a2;
}

#skillsBody {
    background-color: #e7e7e7;
    color: black;
    border-radius: 0.625rem;
    padding: 0.625rem;

    overflow: hidden;
}

.skillsBodyScroll {
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #032232 #e7e7e7;
    scrollbar-width: thin;
}

#skillsBody a {
    text-decoration: none;
    color: #000;
}

#skillsBody + header {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
} #skillsBody + header img {
    background-color: #e7e7e7;
    border-radius: 0.625rem;
    
    width: 100%;
    align-self: center;
} #skillsBody + header div {
    display: flex;
    flex-direction: column;
}

#skillsBody + header button {
    color: #fff;
    background: none;
    border-width: 1px;
    border-color: transparent;
    padding: 1rem;
    text-align: left;
} #skillsBody + header button:hover, .skillsTabActive {
    background: linear-gradient(0deg,rgba(118, 170, 200, 0.145) 0%, rgba(83, 118, 140, 0.288) 50%, rgba(118, 170, 200, 0.259) 100%);
    backdrop-filter: blur(2px);

    border: solid 1px #0A1520;
    border-radius: 0.44rem;

    cursor: pointer;
}

#skillsBody figure {
    display: flex;
    align-items: center;
    margin: 0;
    border-radius: 1rem;
    border: solid 1px #6f6f6f00;
} #skillsBody figure:hover {
    background: linear-gradient(0deg,rgb(220, 220, 220) 0%, rgb(210, 210, 210) 50%, rgb(220, 220, 220) 100%);
    border: solid 1px #6f6f6f;
} #skillsBody img {
    width: 100%;
} #skillsBody aside {
    margin-left: auto;
    align-self: stretch;
    display: flex;
    align-items: center;

    padding-left: 1rem;
    padding-right: 1rem;

    border-radius: 0 1rem 1rem 0;
} #skillsBody aside:hover {
    background-color: #00000014;
    border-left: solid 1px #6f6f6f;
}

#skillsText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} #skillsText p {
    width: 60%;
    margin-top: 3rem;
    line-height: 1.5;
}

/** smaller mobile */
@media screen and (max-width: 599px) {
    #skills {
        padding-right: 3rem;
    }

    #skills article {
        height: 70vh;
        flex-direction: column-reverse;
    } #skills aside {
        margin-top: 3rem;
    }

    #skillsBody + header img {
        /* padding: 0.3rem;
        border: solid 0.2rem #042941;
        
        max-width: 2rem; */
        display: none;
    }

    #skillsBody img {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;

        max-width: 2rem;
        width: 100%;
        margin-right: 1rem;
    }

    #skillsText p {
        width: 100%;
    }
}

/** mobile */
@media screen and (min-width: 600px) and (max-width: 767px) {
    #skills {
        padding-right: 3rem;
    }

    #skills article {
        height: 70vh;
    } #skills aside {
        margin-top: 3rem;
    }

    #skillsBody {
        width: 60%;
    } #skillsBody + header {
        width: 40%;

        padding-left: 10px;
        padding-top: 10%;
        padding-bottom: 15%;
    }

    #skillsBody + header img {
        padding: 0.625rem;
        border: solid 0.44rem #042941;
        
        max-width: 3rem;
    }

    #skillsBody figure {
        padding-left: 1rem;
    } #skillsBody img {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;

        max-width: 2.5rem;
        width: 100%;
        margin-right: 1rem;
    }

    #skillsText p {
        width: 100%;
    }
}

/** tablet vertical portrait */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #skills {
        padding-right: 3rem;
    }

    #skills article {
        height: 70vh;
    } #skills aside {
        margin-top: 3rem;
    }

    #skillsBody {
        width: 60%;
    } #skillsBody + header {
        width: 40%;

        padding-left: 10px;
        padding-top: 10%;
        padding-bottom: 15%;
    }

    #skillsBody + header img {
        padding: 0.625rem;
        border: solid 0.44rem #042941;
        
        max-width: 3rem;
    }

    #skillsBody figure {
        padding-left: 1rem;
    } #skillsBody img {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;

        max-width: 2.5rem;
        width: 100%;
        margin-right: 1rem;
    }

    #skillsText p {
        width: 100%;
    }
}

/** desktop screen */
@media screen and (min-width: 1024px) and (max-width: 1369px) {
    #skills {
        height: 70vh;

        display: grid;
        grid-template-columns: 40% 60%;
    }

    #skills article {
        height: 100%;
    }

    #skillsBody {
        width: 60%;
    } #skillsBody + header {
        width: 40%;

        padding-left: 10px;
        padding-top: 10%;
        padding-bottom: 15%;
    }

    #skillsBody + header img {
        padding: 0.625rem;
        border: solid 0.44rem #042941;
        
        max-width: 3rem;
    }

    #skillsBody figure {
        padding-left: 1rem;
    } #skillsBody img {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;

        max-width: 2.5rem;
        width: 100%;
        margin-right: 1rem;
    }

    #skillsText p {
        width: 60%;
        font-size: 1.25rem;
    }
}

/** bigger desktop screen */
@media screen and (min-width: 1370px) {
    #skills {
        height: 70vh;

        display: grid;
        grid-template-columns: 40% 60%;
    }

    #skills article {
        height: 100%;
    }

    #skillsBody {
        width: 60%;
    } #skillsBody + header {
        width: 40%;
        height: 100%;

        padding-left: 10px;
        padding-top: 10%;
        padding-bottom: 15%;
    }

    #skillsBody + header img {
        padding: 0.625rem;
        border: solid 0.44rem #042941;
        
        max-width: 3rem;
    }

    #skillsBody figure {
        padding-left: 1rem;
    } #skillsBody img {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;

        max-width: 2.5rem;
        width: 100%;
        margin-right: 1rem;
    }

    #skillsText p {
        width: 60%;
        font-size: 1.25rem;
    }
}