@media screen and (max-width: 997px) {
    .displayOnlyInLargeViewport {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .hideLogoText {
        display: none;
    }
}

.navbarHideable {
    transition: top 0.2s ease-in-out;
}

.navbarHidden {
    top: calc(var(--ifm-navbar-height) * -1) !important;
}
.navbarItems {
    justify-content: flex-start;
}

.navbarItemsRight[class] {
    flex: 0 0;
}

.navLink[class] {
    position: relative;
    margin-left: 2rem;
    margin-right: 2rem;
}

.navLink[class]:hover {
    color: var(--ifm-color-white);
}

html[data-theme="dark"] .navLink[class]:hover {
    color: var(--ifm-color-secondary);
}

.navLink[class]:global(.navbar__link--active) {
    color: inherit;
    font-weight: bold;
}
.navLink[class]:global(.navbar__link--active)::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ifm-color-content);
    content: "";
    transition: width 0.5s, opacity 0.5s, transform 0.5s;
    transform: translateY(-6px);
}

.toggle {
    margin-right: 20px;
}

.navbarMain {
    background-color: var(--ifm-background-color);
    box-shadow: none;
}

.logo {
    margin: 4px;
    fill: var(--ifm-color-content);
}

html[data-theme="dark"] .navbarOther {
    background-color: var(--ifm-background-color);
}

.navbarOther {
    background-color: var(--ifm-color-white);
}