.navigationBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
    background-color: var(--black);
    box-shadow: 0 0 4px 0 var(--black);
}

.navigationLogo {
    position: fixed;
    top: 2px;
    width: auto;
    height: 46px;
}

.navigationMargin {
    height: 50px;
}

.navigationSideInput {
    display: none;
}

.navigationItem:hover .navigationSubList, .navigationSideInput:checked + .navigationItem .navigationSubList, .navigationSubList:hover {
    display: block;
}

@media only screen and (max-width: 1000px) {
    .navigationLogo {
        left: calc(50% - 92px);
        right: calc(50% - 92px);
    }

    .navigationHamburgerInput {
        position: fixed;
        top: 2px;
        right: 2px;
        width: 46px;
        height: 46px;
        margin: 0;
        opacity: var(--opacityDown);
        z-index: 102;
        cursor: pointer;
    }

    .navigationHamburgerSpan {
        position: absolute;
        top: 50%;
        right: 7px;
        width: 36px;
        height: 2px;
        z-index: 101;
        background-color: var(--white);
        transform: translateY(-50%);
        transition: transform var(--durationS) var(--course);
    }

    .navigationHamburgerSpan::before, .navigationHamburgerSpan::after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        content: '';
        background-color: var(--white);
        transition: transform var(--durationS) var(--course);
    }

    .navigationHamburgerSpan::before {
        top: -10px;
    }

    .navigationHamburgerSpan::after {
        top: 10px;
    }

    .navigationHamburgerInput:checked + .navigationTop > .navigationHamburgerSpan::before {
        transform: translateY(10px) rotate(45deg);
    }

    .navigationHamburgerInput:checked + .navigationTop > .navigationHamburgerSpan {
        background-color: transparent;
    }

    .navigationHamburgerInput:checked + .navigationTop > .navigationHamburgerSpan::after {
        transform: translateY(-10px) rotate(-45deg);
    }

    .navigationSide {
        position: fixed;
        top: 50px;
        left: 100%;
        width: 100%;
        height: calc(100dvh - 50px);
        background-color: var(--white);
        transition: transform var(--durationM) var(--course);
    }

    .navigationHamburgerInput:checked ~ .navigationSide {
        transform: translateX(-100%);
    }

    .navigationLeftList {
        position: relative;
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none;
        overscroll-behavior: contain;
    }

    .navigationSideAllItems {
        position: absolute;
        width: clamp(280px, 96%, 400px);
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .navigationItem {
        display: block;
        width: 100%;
        cursor: pointer;
        margin: 5px 0 0 0;
        color: transparent;
        background-color: transparent;
    }

    .navigationSubList {
        display: none;
        left: auto;
        top: auto;
        margin: 0;
        cursor: default;
        padding: 5px 10px;
    }

    .navigationSubButton {
        background-color: transparent;
        display: block;
        cursor: pointer;
        width: auto;
        margin: 2px 0 2px 10px;
        padding: 4px 0;
        border-bottom: var(--borderHeightL) var(--borderStyle) transparent;
        transition: border-color var(--durationM) var(--course);
    }

    .navigationSubButton:hover {
        border-color: var(--black);
        transition: border-color var(--durationM) var(--course);
    }

    .navigationItem {
        border: var(--borderHeightL) var(--borderStyle) transparent;
        border-radius: var(--borderRadius);
        transition: border-color var(--durationM) var(--course);
    }

    .navigationSideInput + .navigationItem {
        border-radius: var(--borderRadius);
    }

    .navigationItem:hover, .navigationSideInput:checked + .navigationItem, .navigationSideInput:checked + .navigationItem .navigationSubList {
        border-color: var(--black);
        transition: border-color var(--durationM) var(--course);
    }

    .navigationText {
        font-size: 15px;
        margin: 0 0 0 5px;
        padding: 10px 0;
        color: var(--black);
    }

    .navigationItem > .navigationText, .navigationSubButton > .navigationText {
        text-align: left;
    }

    @media (prefers-color-scheme: dark) {
        .navigationHamburgerSpan::before, .navigationHamburgerSpan, .navigationHamburgerSpan::after {
            background-color: var(--blackD);
        }

        .navigationSide, .navigationSubList {
            background-color: var(--whiteD);
        }

        .navigationSubButton:hover, .navigationItem:hover, .navigationSideInput:checked + .navigationItem, .navigationSideInput:checked + .navigationItem .navigationSubList {
            border-color: var(--blackD);
        }

        .navigationText {
            color: var(--blackD);
        }
    }
}

@media only screen and (min-width: 1001px) {
    .navigationLogo {
        left: 10px;
    }

    .navigationHamburgerInput, .navigationHamburgerSpan {
        display: none;
    }

    .navigationSide {
        position: fixed;
        top: 0;
        left: 204px;
        right: 10px;
        width: auto;
        height: 50px;
    }

    .navigationSideAllItems {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .navigationInputList {
        display: flex;
        justify-content: center;
    }

    .navigationItem {
        display: flex;
        align-items: center;
        height: 50px;
        position: relative;
        cursor: pointer;
        padding: var(--borderHeightL) 1dvw;
        color: transparent;
        background-color: transparent;
        border-bottom: var(--borderHeightL) var(--borderStyle) transparent;
        transition: border-color var(--durationM) var(--course);
    }

    .navigationItem:hover {
        border-color: var(--white);
        transition: border-color var(--durationM) var(--course);
    }

    .navigationText {
        font-size: 15px;
        margin: 3px 0 0 0;
        text-align: center;
        color: var(--white);
    }

    .navigationSubList {
        display: none;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
        margin: 0;
        cursor: default;
        padding: 5px 10px;
        background-color: var(--white);
        box-shadow: 0 0 4px 0 var(--black);
    }

    .navigationSubButton {
        display: block;
        cursor: pointer;
        width: auto;
        margin: 2px 0;
        padding: 10px 5px;
        border-bottom: var(--borderHeightL) var(--borderStyle) transparent;
        background-color: transparent;
        transition: border-color var(--durationM) var(--course);
        white-space: nowrap;
    }

    .navigationSubButton:hover {
        border-color: var(--black);
        transition: border-color var(--durationM) var(--course);
    }

    .navigationSubButton > .navigationText {
        text-align: left;
        color: var(--black);
    }

    @media (prefers-color-scheme: dark) {
        .navigationItem:hover {
            border-color: var(--blackD);
        }

        .navigationText {
            color: var(--blackD);
        }

        .navigationSubList {
            background-color: var(--whiteD);
        }

        .navigationSubButton:hover {
            border-color: var(--blackD);
        }

        .navigationSubButton > .navigationText {
            color: var(--blackD);
        }
    }
}