.nav-list {
    padding: 0;
    padding-top: 10px;
    list-style: none;
    list-style-position: outside;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #cc2d2d;
}
.nav-list li{
    margin: 0;
    margin-bottom: 5px;
}

.nav-list a{
    display: block;
    text-decoration: none;
}
.nav-list a:hover{
    background-color: rgb(10, 10, 10);
    color: #e98492;
}

/* Icon system */
.nav-list a[data-icon]::before {
    margin-right: 0.5rem;
}

.nav-list a[data-icon]::before{
    content: "?";
    display: inline-block;
    width: 1em;
    height: 120%;
    text-align: center;
    vertical-align: middle;
    image-rendering: pixelated;
    filter: invert(16%) sepia(53%) saturate(6692%) hue-rotate(354deg) brightness(92%) contrast(75%);
}

.nav-list a[data-icon="user"]::before {
    content: url(../images/icons/user.svg);
}
.nav-list a[data-icon="pen-square"]::before {
    content: url(../images/icons/pen-square.svg);
}
.nav-list a[data-icon="image"]::before {
    content: url(../images/icons/image.svg);
}
.nav-list a[data-icon="smile"]::before {
    content: url(../images/icons/smile.svg);
}
.nav-list a[data-icon="play"]::before {
    content: url(../images/icons/play.svg);
}
.nav-list a[data-icon="heart"]::before {
    content: url(../images/icons/heart.svg);
}
.nav-list a[data-icon="circle-square"]::before {
    content: url(../images/icons/circle-square.svg);
}

/* Nav Titles */
.nav-title {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    color: whitesmoke;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.nav-title::before{
    content: url(../images/white-rose-divider-l.gif);
    image-rendering: pixelated;
    transform: scale(0.75);
}
.nav-title::after{
    content: url(../images/white-rose-divider-r.gif);
    image-rendering: pixelated;
    transform: scale(0.75);
}