#skills
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4rem;
}

.skills-header
{
    font-size: var(--headers-size);
    font-family: var(--font);
    font-weight: 700;
    color: var(--text-color-first);
}

.skills-container
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 0.8fr));
    justify-content: center;
    align-items: center;

    gap: 2rem;
}

.skill-card
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    padding: 2rem;
    aspect-ratio: 1 / 1;
    border: 0.4rem solid var(--text-color-first);
    border-radius: 16%;

}
.skill-name
{
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color-first);
}

.skill-icon
{
    width: 8rem;
    fill: var(--text-color-first);
}

@media (hover: hover) and (pointer: fine)
{
    .skill-card:hover
    {
        border: 0.4rem solid var(--primary-color);
        transform: translateY(-0.5em);
    }
    .skill-card:hover .skill-name
    {
        color: var(--primary-color);
    }
    .skill-card:hover .skill-icon
    {
        fill: var(--primary-color);
    }
}