body {
    font-family: sans-serif;
    background: #F0F0F0;
    color: #727779;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
}
.nav {
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 0px;
    bottom: 0;
    color: white;
    background: #2B2B2B;
}
.main {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: white;
    width: 800px;
    overflow: hidden;
    margin-left: 200px;
    padding: 0 100px 16px 100px;
    opacity: 1;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}
.lume-icon {
  fill: #1A1A1A;
  width: 100%;
  height: 200px;
  filter: drop-shadow(0 0 5px #00FFFF);
}
.primary_nav ul {
    list-style-type: none; /* Remove those standard browser dots */
    padding-inline-start: 20px; /* Align it with your sidebar padding */
}

.primary_nav li {
    margin-bottom: 15px; /* Give the links some breathing room */
}

.nav .primary_nav a {
    text-decoration: none;
    display: block;
    font-weight: bold;
    /* transition is already in your code */
}

/* Hover effect to match the Lume Icon glow */
.nav .primary_nav a:hover {
    color: #00FFF5;
    padding-left: 10px; /* Subtle slide effect */
    text-shadow: 0 0 5px #00FFFF;
}