/* #html, #css, #js, #react, #gsap{

    width: 80px;
    height: 80px;
    z-index: 100;
    border-radius: 20px;
    overflow: hidden;
    margin-left: .5rem;
    display: flex;
    align-items: center;
}

#skills > ul{
    display: flex;
}

#skills > ul > li{
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: all ease-in-out .4s;
}
#skills > ul > li:hover{
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 3rem;
}
#html, #css, #js, #react, #gsap > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media screen and (max-width:545px) and (min-width: 477px){
    #html, #css, #js, #react, #gsap{
        border: 2px solid black;
    }

    #skills > ul{
        display: flex;
        padding-left: 100px;
    }

    
    #skills > ul > li:last-child{
        position: relative;
        top:7rem;
        right:17.2rem
    }

    #skills > ul > li{
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 477px) and (min-width: 200px){
    #html, #css, #js, #react, #gsap{
        border: 2px solid black;
    }
    
    #skills > ul{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    #skills > ul > li{
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 2rem;
    }   
}  */

/* @media screen and (max-width: 370px) and (min-width: 200px){
    #html, #css, #js, #react, #gsap{
        border: 2px solid black;
    }
    
    #skills > ul{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    #skills > ul > li{
        display: flex;
        gap: 1rem;
        align-items: center;
        /* margin-bottom: 2rem; */
    }  
} */