nav#left-nav {
    width: 300px;
    height: 100vh;
    position: fixed;
    z-index: 1;
    background: $left-nav-background;
    box-shadow: 0 0.125rem 9.375rem $left-nav-box-shadow,
        0 0.25rem 0.5rem $left-nav-box-shadow1,
        0 0.9375rem 1.375rem $left-nav-box-shadow,
        0 0.4375rem 2.1875rem $left-nav-box-shadow2;

    .title {
        height: 3.75rem;
        font-size: 1rem;
        line-height: 3.75rem;
        text-align: center;
        background-color: $left-nav-title-background;
        color: $left-nav-title-color;
        font-family: $sec-font;
        border-bottom: 1px solid $left-nav-border-link;
    }

    ul {
        li {
            font-size: .875rem;
            font-family: $main-font;
            overflow: hidden;

            a {
                border-bottom: 1px solid $left-nav-border-link;
                color: $left-nav-link-color;
                padding: 1rem 1.5625rem;
                font-weight: 400;
                display: block;
                width: 100%;
                transition: box-shadow .2s ease,color .2s ease,background-color .2s ease;

                &:hover {
                    box-shadow: inset 0.1875rem 0 0 $left-nav-link-color-hover;
                    background-color: $left-nav-title-background-hover;
                    color: $left-nav-link-color-hover;
                }

                i {
                    min-width: 1.25rem;
                    font-size: 90%;
                    text-align: center;
                    color: $left-nav-icon-color;
                    margin-right: .375rem;
                }
            }
        }
    }
}