.menu {
	padding: 20px 3px;
	width: 220px;
	border-left: 2px solid rgb(165 136 136);
}

    .menu div {
      display: block;
      position: relative;
      font-size: 15px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
/*       transition: color 0.3s ease-in-out, text-shadow .3s ease-in-out; */
	  width:80px;
    }

    .menu div::before {
		content: "";
		position: absolute;
		height: 100%;
		width: 0px;
		left: -18px;
		top: 50%;
		transform: translate(-50%, -55%);
		background: transparent;
		transition: background 0.4s ease, box-shadow 0.4s ease, width 0.4s ease;
    }

    .menu div:hover::before {
	  width:5px;
      background-color: rgb(190,180,170);
    }

    .menu div:hover {
      color: #ffffff;
      text-shadow: -1px -1px 1px var(--fontcolor_light), 1px 1px 1px var(--fontcolor_light), -1px 1px 1px var(--fontcolor_light), 1px -1px 1px var(--fontcolor_light);
    }

    .menu div.active {
      color: #ffffff;
      text-shadow: -1px -1px 1px var(--fontcolor_light), 1px 1px 1px var(--fontcolor_light), -1px 1px 1px var(--fontcolor_light), 1px -1px 1px var(--fontcolor_light);
    }

    .menu div.active::before {
      background-color: var(--fontcolor_light);
	  width:5px;

    }