#skills {
    background-image: url("../img/backgrounds/skills.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /*parallax effect*/
}

.skills-title {
    /* margin-left: 10vw;
    margin-top: 15vh; */
    font-size: 40px;
    color: white;
    background-color: rgba(255,255,255,0.1);
    position: relative; /*to position the title on top of the black filter, because default position:static are placed in the bottom regardless of the order of the divs. With position relative/absolute/fixed/sticky the z-order is defined by the order of the divs (the latest on top)*/
}

/* Skills styles */
.skills-container {
    display: flex;
    justify-content: space-around;
    gap:350px;
    padding-left: 150px;
    padding-right: 165px;
    position: absolute;
    bottom: 20%;
    width: 100%;
}

.skills-col {
    display:flex;
    flex-direction:column;
    flex: 1; /*so that the columns occupy all width of the parent row, not the with of the content. Flex:1 is the same as "flex:auto"*/
    gap: 20px;
}

.skills-item {
    background-color: rgba(255,255,255,0.6); /*Add the opacity in the rgba instead of using the opacity property, to avoid affecting the children.*/
    padding: 4px;
    border-left: 5px solid #50DED0;
    font-family: 'Mukta';
}

.skills-item-title {
    text-align: center;
    color: white;
    font-size: 25px;
}