nav 
{
    position: sticky; /* Keeps it on the screen */
    margin: 0;
    padding: 0;
    top: 0;          /* Stick to the top */
    left: 0;         /* Start at the left edge */
    width: 100%;     /* Full width */
    background-color: var(--accent); 
    z-index: 1000;   /* Make sure it stays above other content */
}
nav ul 
{
    list-style-type: none; /*this removes the bullet points*/
    margin: 0px; /*removes the browser’s default OUTER spacing around the <ul> */
    padding: 0px; /*removes the browser’s default INNER spacing around the <ul> */
    overflow: auto; /* need overflow because of float, float so its not inline meaning without overflow it will collaspse*/
    background-color: var(--accent); /* sets the background color of the list */
    display: flex;
    align-items: center;
}
nav ul li:last-child 
{
    margin-left: auto; /* moves the last item to the end*/
}
.nav-item 
{
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;
    color: var(--accent-text);
    text-decoration: none;

    cursor: pointer;
}
.nav-item:hover 
{
    background-color: var(--accent-strong);
    color: var(--accent-text);
}
.nav-icon 
{
    width: 20px;
    height: 20px;
    object-fit: contain;
}