.nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100svh;
    box-sizing: border-box;
    padding: var(--main-margin-vert) var(--main-margin-hor);
    font-family: velodroma-wide;
    background: var(--pink);
    background: var(--pink-gradient);
    width: 22vw;
    min-width: 200px;
    -webkit-box-shadow: -36px 0px 14px 33px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -36px 0px 14px 33px rgba(0, 0, 0, 0.75);
    box-shadow: -36px 0px 14px 33px rgba(0, 0, 0, 0.75);
    position: relative;
    max-width: 220px;
}

.nav .logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav .logo img {
    max-height: 100%;
    aspect-ratio: 1;
}

.item-container a:link, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

.item-container .item {
    margin: 6pt 0;
}

.item-container .item:hover {
    text-decoration: underline;
    cursor: pointer;
}

.user-tools {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 16pt;
}

.user-tools .tool:hover {
    cursor: pointer;
}

.hover-effect {
    transform: translateY(0);
    transition: .5s ease-in-out;
}
.hover-effect:hover {
    transform: translateY(-23%);
    text-shadow: -1px 10px 9px rgba(0,0,0,0.17);
}