@charset "utf-8";
@supports (animation-timeline: --scroll-axis) {

    @keyframes aniScroll {
        0% {
            --scrollbarPos: 0;
            --goUp: hidden;
            --goDown: visible;
            --txtBible: 1;
            --picBible: 1;
            --aniBible: running;
            --txtVirus: 0;
            --picVirus: 0;
            --aniVirus: paused;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        10% {
            --scrollbarPos: 1;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 1;
            --picBible: 1;
            --aniBible: running;
            --txtVirus: 0;
            --picVirus: 0;
            --aniVirus: paused;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        20% {
            --scrollbarPos: 2;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 1;
            --picBible: 1;
            --aniBible: running;
            --txtVirus: 1;
            --picVirus: 1;
            --aniVirus: running;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        30% {
            --scrollbarPos: 3;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 1;
            --picBible: 1;
            --aniBible: running;
            --txtVirus: 1;
            --picVirus: 1;
            --aniVirus: running;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        40% {
            --scrollbarPos: 4;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 0;
            --aniBible: paused;
            --txtVirus: 1;
            --picVirus: 1;
            --aniVirus: running;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        50% {
            --scrollbarPos: 5;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 0;
            --aniBible: paused;
            --txtVirus: 1;
            --picVirus: 1;
            --aniVirus: running;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        60% {
            --scrollbarPos: 6;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 0;
            --aniBible: paused;
            --txtVirus: 1;
            --picVirus: 1;
            --aniVirus: running;
            --txtSlider: 1;
            --picSlider: 1;
            --aniSlider: running;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        70% {
            --scrollbarPos: 7;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 0;
            --aniBible: paused;
            --txtVirus: 0;
            --picVirus: 0;
            --aniVirus: paused;
            --txtSlider: 1;
            --picSlider: 1;
            --aniSlider: running;
            --txtWar: 0;
            --picWar: 0;
            --aniWar: paused;
        }

        80% {
            --scrollbarPos: 8;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 0;
            --aniBible: paused;
            --txtVirus: 0;
            --picVirus: 0;
            --aniVirus: paused;
            --txtSlider: 1;
            --picSlider: 1;
            --aniSlider: running;
            --txtWar: 1;
            --picWar: 1;
            --aniWar: running;
        }

        90% {
            --scrollbarPos: 9;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 0;
            --aniBible: paused;
            --txtVirus: 0;
            --picVirus: 0;
            --aniVirus: paused;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 1;
            --picWar: 1;
            --aniWar: running;
        }

        100% {
            --scrollbarPos: 10;
            --goUp: visible;
            --goDown: hidden;
            --txtBible: 0;
            --picBible: 1;
            --aniBible: paused;
            --txtVirus: 0;
            --picVirus: 0;
            --aniVirus: paused;
            --txtSlider: 0;
            --picSlider: 0;
            --aniSlider: paused;
            --txtWar: 1;
            --picWar: 1;
            --aniWar: running;
        }
    }


    body #Main:is( :hover) #NaviDown {
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcMinHeaderFactor));
        --naviTop: calc(var(--calcHeaderHeight) - 0.25rem);
        top: var(--naviTop);
    }


    body #Main:is( :not(:hover)) #NaviDown {
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcMaxHeaderFactor));
        --naviTop: calc(var(--calcHeaderHeight) + 0.05rem);
        top: var(--naviTop);
    }


    body #Main:is(:not( :target, :active, :focus, :hover)) #containerNaviBG,
    body:not( :target, :active, :focus, :hover) #containerNaviBG {
        visibility: hidden !important;
    }


    #containerNaviBG {
        position: var(--posAbsolute);
        width: 0px;
        right: 0px;
        top: 0px;
        animation-timeline: --scroll-axis;
        -webkit-animation-timeline: --scroll-axis;
        -webkit-animation-name: aniScroll;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        animation-name: aniScroll;
        animation-duration: 1s;
        animation-iteration-count: 1;
    }
}

@supports not (animation-timeline: --scroll-axis) {

    body #Main:is( :hover) #NaviDown {
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcMinHeaderFactor));
        --naviTop: calc(var(--calcHeaderHeight) - 0.25rem);
        top: var(--naviTop);
    }


    body #Main:is( :not(:hover)) #NaviDown {
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcMaxHeaderFactor));
        --naviTop: calc(var(--calcHeaderHeight) + 0.05rem);
        top: var(--naviTop);
    }


    body #Main:is(:not( :target, :active, :focus, :hover)) #containerNaviBG,
    body:not( :target, :active, :focus, :hover) #containerNaviBG {
        visibility: hidden !important;
    }


    #containerNaviBG {
        position: var(--posAbsolute);
        width: 0px;
        right: 0px;
        top: 0px;
    }

    .bgOverlay:first-child:is(:active, :hover, :focus, :target)~#containerNaviBG #NaviDown {
        --goDown: visible;
    }

    .bgOverlay:first-child:not(:active, :hover, :focus, :target)~#containerNaviBG #NaviUp {
        --goUp: visible;
    }

}


.naviBG {
    position: var(--posFixed);
    right: 1.5em;
    color: var(--lightColor);
    text-shadow: var(--fontShadow);
    display: var(--displayBlock);
    vertical-align: middle;
    text-align: center;
    align-items: center;
    line-height: 10pt;
    user-select: var(--userSelect);
    -webkit-user-select: var(--userSelect);
    padding: 0.25rem;
    margin: var(--noMarginPadding);
    border-radius: 50%;
    background-color: var(--colorBlueMid);
    box-shadow: var(--boxShadow);
    text-decoration-thickness: 0.2em !important;
    visibility: hidden;
    z-index: 155;
}

.naviBG:is(:hover, :active, :focus, :target) {
    background-color: var(--colorDrkGreyTrans) !important;

}

.naviBG div {
    width: 10pt;
    height: 10pt;
    margin: auto;
    align-items: center;
    font-size: 10pt !important;
}

#NaviDown {
    --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcMinHeaderFactor));
    --naviTop: calc(var(--calcHeaderHeight) - 0.25rem);
    top: var(--naviTop);
    text-decoration: underline;
    text-decoration-thickness: 0.2em;
    padding-bottom: 0.4rem;
    visibility: var(--goDown) !important;
}

#NaviUp {
    bottom: 2.35rem;
    text-decoration: overline;
    text-decoration-thickness: 0.2em;
    padding-top: 0.6rem;
    visibility: var(--goUp) !important;
}

#NaviUp:is( :active, :focus) {
    text-decoration-color: inherit !important;
}

#NaviDown:is( :active, :focus) {
    text-decoration-color: inherit !important;
}

#containerNaviBG:has(#NaviUp:is(:hover, :active, :focus)) #NaviDown,
#containerNaviBG #NaviDown:visited {
    --goDown: hidden;
}

#containerNaviBG:has(#NaviDown:is(:hover, :active, :focus)) #NaviUp,
#containerNaviBG #NaviUp:visited {
    --goUp: hidden;
}

#containerNaviBG:has(#NaviUp:is(:active, :focus)) #NaviUp {
    --goUp: visible;
}

#containerNaviBG:has(#NaviDown:is(:active, :focus)) #NaviDown {
    --goDown: visible;
}