.skill-container  {
    display: flex  ;
    width: 100%;
    height: 100% ;
    z-index: 12;
}
.skill-wrapper{
    z-index: 12;
}

.container  {
    position: relative;
    z-index: 1;
}
.container::after,#animation-ball {
    z-index: -1;
}

.skill-items > article{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px ;
}
.skill-items > article > h1 {
    font-size: var(--font-1xl);
    font-weight: 100;
}

.skill-items > article > div {
    display: flex ;
    flex-direction: row;
    gap: 5px;
}

.skill-items > article > div > span {

    border-radius: 15px;
    background: var(--logo-colors );
    color: var(--font-color-1);
    padding: 2px 20px;
    font-size: var(--font-1xs);
}

.skill-items > article > div > span:hover  {
    color: var(--theme-1);
}

.skill-items {
    display: flex ;
    flex-direction: column ;
    gap: 15px ;
    padding: 5px 0px ;
}
.info {
    width: 100% ;
}
.info > h2 {
    font-size:var( --font-2xl);
    color:var(--logo-colors);
    letter-spacing: 4px ;
}