nav#navbar {
    background-color: var(--nav-bg);
    padding: 0px 40px;
}

nav#navbar div.nav-links {
    align-items: center;
}

nav#navbar div.nav-links a.link {
    text-decoration-line: none;
    color: var(--nav-fg);
    padding: var(--space-md);
}

/* theme */

#themeSlider {
    cursor: pointer;
    display: flex;
    position: relative;
    width: 40px;
    height: 20px;
    background-color: var(--bg-color);
}

#themeSlider::before {
    position: absolute;
    content: "";
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    border-radius: var(--space-sm);
    background-color: var(--nav-bg);

    transition: left 0.1s;
}

#themeSliderInput:not(:checked) + #themeSlider::before {
    left: 2px;
}

#themeSliderInput:checked + #themeSlider::before {
    left: calc(100% - 18px);
}

#themeSliderInput {
    display: none;
}