nav {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    padding: var(--padding-sm);
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: var(--radius-md);
}

.navLogo {
    position: absolute;
    top: var(--padding-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
}

.mainNavItems {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--gap-sm);

    button {
        all: unset;
        cursor: pointer;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-full);
        padding: var(--padding-sm);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color var(--ease-fast);

        &:hover { background-color: var(--color-hoverBtn); }
    }
}

.navBottom {
    position: absolute;
    bottom: var(--padding-sm);
    left: var(--padding-sm);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

#logoutBtn:hover { background-color: var(--color-warning); }