.color-scroll {
    font-size: inherit;
    font-weight: bold;
    color: #fff; /* This will be overridden by background-clip */
    background: linear-gradient(270deg,
        var(--bs-primary), var(--bs-secondary), var(--bs-primary)
    );
    background-size: 1400% 1400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: move-background 2s ease-in-out infinite;
}

@keyframes move-background {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Container for the list to enable horizontal scrolling */
.scrollable-tools {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0; /* Optional: padding for spacing */
}

/* Remove default list styles and make list items inline */
.scrollable-tools ul {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Style for list items to prevent shrinking and remove borders if necessary */
.scrollable-tools li {
    flex: 0 0 auto; /* Prevent shrinking and allow items to stay at their size */
    margin-right: 10px; /* Optional: spacing between icons */
    border: none; /* Remove borders if any */
}

/* New (scoped to tools only): */
.scrollable-tools li:hover {
    filter: invert(100%);
    cursor: pointer;
}

@keyframes strobe_animation {
    0%, 100% { filter: invert(0%); }
    50% { filter: invert(100%); }
}

.strobe {
    animation: strobe_animation 1s infinite;
}


section > ul > li:hover {
    filter: invert(100%);
    cursor: pointer;
}