#skill {
    width: 100%;
    display: flex;
    background: var(--secondary-color);
    padding: 2rem;
    overflow-x: auto;
}

#skill::-webkit-scrollbar {
    display: none;
}

#skill:hover {
    .skillList {
        animation-play-state: paused;
    }
}

.skillList {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    animation: slide 15s linear infinite;
    padding-right: 2rem;
}

.skillList img {
    height: 80px;
    padding: 0 0.5rem;
}

@keyframes slide {
    from {
        translate: 0;
    }

    to {
        translate: -100%;
    }
}

@media screen and (max-width: 512px) {
    #skill {
        padding: 1rem;
    }

    .skillList {
        gap: 1rem;
        padding-right: 1rem;
        animation: slide 12s linear infinite;
    }

    .skillList img {
        height: 40px;
    }
}