.skills-section{
    margin: 0px;
    padding: 0px;
    animation: fadein 200ms ease-in forwards;
}

@keyframes fadein {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
    
}

.skills-section .skills-section-container{
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    background-color: var(--secondary-white);
    /* gap: 30px; */
}

.skills-header-section{

}

.skills-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
    margin: auto;
    margin-block: 30px;
}

.skills-section-container .title {
    text-align: center;
}

.skills-container .skill-card {
    background-color: var(--bg-light-gray);
    /* height: 60px; */
    width: 100px;
    border-radius: var(--radius-16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 10px;
    box-shadow: var(--shadow-4);
}

.skill-card:is(:hover, :focus-visible){
    background-color: var(--secondary-white);
    border: 2px solid var(--accent-teal);
    transform: translate3d(0px, -5px, 10px);
    scale: 1.2;
}

.skill-card > div {
    height: 50px;
    margin-inline: auto;
    margin-block: 5px;
}

.skill-card img {
    height: 100%;
}