:root {
    --navigation-bg-top: light-dark(#444, #444);
    --navigation-bg-center: light-dark(#222, #222);
    --navigation-bg-bottom: light-dark(#222, #222);
    --navigation-color: light-dark(#fff, #fff);
    --navigation-color-hover: light-dark(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
}

body.disable-scroll {
    overflow: hidden;
}

.navigation.closed {
    top: -100%;
    opacity: 0;
}

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--navigation-bg-top)), color-stop(var(--navigation-bg-center)), to(var(--navigation-bg-bottom)));
    background-image: -o-linear-gradient(top, var(--navigation-bg-top), var(--navigation-bg-center), var(--navigation-bg-bottom));
    background-image: linear-gradient(to bottom, var(--navigation-bg-top), var(--navigation-bg-center), var(--navigation-bg-bottom));
    font-family: 'Times New Roman', serif;
    -webkit-transition: top .3s, opacity .5s;
    -o-transition: top .3s, opacity .5s;
    transition: top .3s, opacity .5s;
    opacity: 1;
}

.navigation .lang-flag img {
    max-width: 40px;
    border-radius: 5px;
}

.navigation .list {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.navigation .list::-webkit-scrollbar {
    display: none;
}

.navigation a {
    display: block;
    font-size: 2rem;
    margin: 10px 0;
    -webkit-transition: color .1s;
    -o-transition: color .1s;
    transition: color .1s;
    color: var(--navigation-color);
}

.navigation a:hover {
    color: var(--navigation-color-hover);
}