#skills {
    background-image: url(../img/skill.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;     
    color: #fff;
    padding: 50px 190px;
}

#skills h2 {
    text-align: center;
}

.text-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
    align-items: center;
}

.text-article {
    display: flex;
    align-items: center;
    flex-basis: calc(50% - 85px);
    height: 100%;
    margin-bottom: 10px;
}

.text-article-br {
    z-index: 1;
    margin: auto;
    border: 2px;
    border-style: solid;
    border-radius: 50%;
    border-color: #fff;
    width: 150px;
    height: 150px;
    vertical-align: middle;
}

.text-article-icon::before {
    align-content: center;
    vertical-align: middle;
    content: '';
    flex-shrink: 0;
    font-size: 3em;
    margin-right: 20px;
    border: 2px solid #fff;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border-radius: 50%;
    line-height: 1.5em;    
}

.text-article-icon-html::before{
    font-family: "Font Awesome 5 Brands";
    content: "\f13b";
    font-weight: 900;
}

.text-article-icon-css::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f38b";
    font-weight: 900;
}

.text-article-icon-svg {
    flex-shrink: 0;
    font-size: 3em;
    margin-right: 20px;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border-radius: 50%;
    line-height: 1.5em;
    fill: #ffffff;
}

.skillIcon {
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border-radius: 50%;
    line-height: 1.5em;
    fill: #ffffff;    
}



.text-article-icon-svg-bootstrap {
    border: 2px solid #fff;    
}

.text-article-icon-svg-jquery {
    border: 2px solid #fff;    
    padding: 10px;
}

.text-article-icon-resp::before {
    font-family: "Font Awesome 5 Free";
    content: "\f31e";
    font-weight: 900;
}

.text-article-icon-bracket::before {
    font-family: "Font Awesome 5 Free";
    content: "\f065";
    font-weight: 900;
}

.text-article-icon-react::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f41b";
    font-weight: 900;
}

.text-article-icon-angular::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f420";
    font-weight: 900;
}

.text-article-icon-git::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f841";
    font-weight: 900;
}

.text-article-icon-windows::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f17a";
    font-weight: 900;
}

.text-article-icon-linux::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f17c";
    font-weight: 900;
}

.text-article-icon-macos::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f179";
    font-weight: 900;
}

.text-article-icon-php::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f457";
    font-weight: 900;
}

.text-article-icon-svg-sql {
    border: 2px solid #fff;    
}

.text-article-icon-wordpress::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f411";
    font-weight: 900;
}