nav {
    background-color: $mediumDark;
    height: 100vh;
    width: 15rem;
    flex-shrink: 0;
    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);

    hr {
        width: 90%;
        border-radius: 1px;
        border: 1px solid $dark;
    }

    .nav-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: $light;
        padding-top: 1rem;
        padding-bottom: 1rem;

        svg {
            margin: 0 1rem;
            transition: fill 0.2s;
        }

        &:hover {
            color: $dark;
            background-color: $light;
            transition: color 0.2s, background-color 0.2s;

            svg {
                fill: $dark;
                transition: fill 0.2s;
            }
        }

        //&:visited {
        //    color: $dark;
        //}
    }
}

.site-logo {
    width: 3rem;
    fill: $light;
    transition: fill 0.2s;

    &:hover {
        fill: $dark;
        transition: fill 0.2s;
    }
}


.site-logo-main {
    @extend .site-logo;
    display: block;
    padding: 1rem 2rem;
    width: 100%;

    svg {

        width: 100%;
    }
}