#menu {
  position: fixed;
  right: -6em;
  top: 50%;
  width: 9.5em;
  /* margin: -3em 0 0 0; */
  z-index: 5;

  background: hsla(0, 100%, 100%,  0.7); 

/*hsla(hue, saturation, lightness, alpha) -- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color. 
Lightness is also a percentage value. 0% is black, and 100% is white.
https://www.w3schools.com/htmL/html_colors_hsl.asp*/

  font-family: 'Roboto Condensed', sans-serif;
  color: #88c219;
  font-weight: 500;
  font-size: large;
  text-align: left;
  border: 1px solid #88c219;
  border-right: none;
  padding: 0.5em 0.5em 0.5em 2.5em;
  /*box-shadow: 0 1px 3px black;*/
  border-radius: 5px;
  transition: 0.4s;
  margin: 0;
     transform: translate(0, -50%);
}
#menu:hover { right: 0 }
#menu li { 
  padding: 0.5em 0em 0.5em 0em;
  margin:0;
/*list-style: url('../img/nav.png');*/
}
#menu p {
text-indent:-2em;
color: #88c219;
font-weight: 500;
margin:0;
}

/* ################ user agent style sheet #####################
#menu li ::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}
####################################### */

#menu a {
  position: relative;
  left: 0;
  color: inherit;
  transition: 0.4s;
text-decoration:none;
}
#menu a:focus { /* ruft die Menupunkt mit der Tab-Taste auf: Links relativ positionieren und die Eigenschaft "left" hinzufügen, um sie nach links zu verschieben, wenn sie den Fokus haben. */
  left: -7em;
  /*background: hsla(32, 90%, 40%, 0.7);*/
  color: #88c219;
}
#menu:hover a:focus {
  left: 0;
  background: none;
}

/* Ältere Browser */
#menu { margin: -3em 0 0 0 }
@supports (transform: translate(0, -50%)) {
  #menu {
    margin-top: 0;
    transform: translate(0, -50%);
  }
}