#main-menu {
  position: fixed;
  z-index: 20;

  left: 50px;
  top: 15%;
  transform: translateY(-50%);
  -webkit-text-stroke: 0.4px #d3d3d3;
}

#main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#main-menu li {
  margin-bottom: 15px;
}

#main-menu a {
  position: relative;

  display: block;
  padding-left: 15px;

  color: white;
  text-decoration: none;

  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 300;

  -webkit-text-stroke: 0.4px #d3d3d3;
}

/* Vertical indicator */
#main-menu li a::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 3px;
  height: 100%;

  background: #fff;
  border: 1px solid #d3d3d3;

  transform: scaleY(0);
  transform-origin: top;

  transition: transform 0.25s ease;
}


/* Hover */
#main-menu a:hover::before {
  transform: scaleY(1);
}

/* Current page */
#main-menu li.active a::before {
  transform: scaleY(1);
}