.site-logo {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--color-text);

    white-space: nowrap;

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    transition: color .2s ease;

    flex-shrink: 0;
}

.site-logo:hover {
    color: var(--color-accent);
}

.site-navigation__menu {
    display: flex;

    align-items: center;
    
    justify-content: center;

    gap: var(--space-xl);
    
    list-style: none;

    margin: 0;
    padding: 0;
}

.site-navigation__menu a {
    color: var(--color-text);

    font-weight: 500;

    transition: color .2s ease;
}

.site-navigation__menu a:hover {
    color: var(--color-accent);
}