aside.left-bar {
    padding-left: 1rem;
    padding-right: 1rem;
    position: fixed;
    width: var(--nav-width);
}

.navigation{
    padding-top: 3rem;
}

.navigation ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.navigation a{
    color: var(--nav-link-color);
    text-decoration: none;
    font-size: 1.3rem;
    padding: 0 1rem;
    transition: all .15s;
    white-space: nowrap;
    display: block;
    font-family: "JosefinSans", sans-serif;
}

.navigation a::before{
    content: '›';
    white-space: nowrap;
    padding-right:.5rem;
    transition: all .15s;
}

.navigation li.active a::before,
.navigation li:hover a::before {
    padding-left:.4rem;
    padding-right: .1rem;
}

.navigation a::after{
    content: '‹';
    white-space: nowrap;
    padding-left: .5rem;
    transition: all .15s;
}

.navigation li.active a::after,
.navigation li:hover a::after {
    padding-right:.4rem;
    padding-left: .1rem;
}

.navigation li:hover a,
.navigation li.active a{
    color: var(--nav-link-color-hover);
    transition: none;
}

@media all and (max-width: 800px) {
    .main aside.left-bar {
        transform-origin: 50% 0;
        transform: scaleY(0);
        transition: var(--menu-transition);
        width: 100%;
        opacity: 0;
        z-index: 3;
        padding-top: 1rem;
        padding-bottom: 2rem;
        position: fixed;
        top: calc(var(--logo-padding) + var(--logo-height) + var(--logo-padding));
        bottom: 0;
    }
    .menu.opened + .main aside.left-bar {
        transform: scaleY(1);
        background: var(--background);
        opacity: 1;
    }
}