#habilidades {
    background: linear-gradient(120deg, #0f0f0f 50%, #470c7e 50%);
    height: 100vh;
    display: flex;
}

.habilidades-pd {
    padding-top: 93px;
}

.habilidades-pd h2 {
    text-align: center;
    padding-bottom: 70px;
}

.skills-descricao {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 50px;
    padding-bottom: 70px;
}

.conteiner-skills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 37px;
    max-width: 55%;
}

.skill-box {
    height: 106px;
    width: 106px;
    background-color: #991a1a;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease 0.3s;
}

.skill-box:hover {
    background-color: rgb(17, 10, 10);
    transform: scale(1.05);
}

.conteiner-descricao {
    color: rgb(255, 255, 255);
    font-family: 'Quando', serif;
    font-size: 20px;
    max-width: 40%;
}

@media (max-width:1200px) {

    .conteiner-descricao {
        height: 260px;
    }

    #habilidades {
        display: flex;
        justify-content: center;
    }

    .skills-descricao {
        display: flex;
        flex-direction: column-reverse;
        /* width: 535px; */
        margin: 0 auto;
        gap: 50px;
        padding-bottom: 70px;
        align-items: center;
    }

    .skills-descricao p {
        text-align: center;
    }

}

@media (max-width:950px) {
    .conteiner-skills {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 37px;
        max-width: 400px;
    }

    .conteiner-descricao {
        max-width: 300px;
    }

}

.skill-box .icones-habilidades {
    transition: ease-in-out 0.3s;
}

.skill-box:hover .icones-habilidades {
    opacity: 0;
}

.skill1 {
    background-image: url(../img/html2.svg);
}

.skill2 {
    background-image: url(../img/css2.svg);
}

.skill3 {
    background-image: url(../img/js.svg);
}

.skill7 {
    background-image: url(../img/react2.svg);
}

.skill9 {
    background-image: url(../img/git2.svg);
}

.skill10 {
    background-image: url(../img/github2.svg);
}

.skill24 {
    background-image: url(../img/bootstrap.svg);
}

.skill23 {
    background-image: url(../img/mysql.svg);
}

.skill22 {
    background-image: url(../img/nodejs.svg);
}

#fundo {
    fill: red;
}