/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.main-navigation a {
    color: var(--color-text-secondary);
    padding: 4px 0;
    text-decoration: none;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.main-navigation a.active,
.main-navigation a:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 800px) {

    .main-navigation {
        justify-content: center;
    }

}