body{  


 
 
 .menubutton {
  background-color: black;
  color: white;
  padding-top: var(--MenuButtonPaddingTopBottom);
  padding-bottom: var(--MenuButtonPaddingTopBottom);
  padding-right: var(--MenuButtonPaddingRight);
  font: calibri;
  font-size: var(--MenuButtonFontSize);
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
  text-underline-position: auto;
  border: inset gray 3px; 
  }


  
  
  
.menudropdown {
  position: absolute;
  top: var(--MenuButtonPosTop);
  left: var(--MenuButtonPosLeft);
  display: inline-block;}

.menudropdown-content {
  display: none;
  position: absolute;
  left: 10px;
  background-color: black;
  color: green;
  min-width: 300px;
  box-shadow: 0px 10px 20px 10px gray;
  z-index: 1;}

 /* settings for links inside dropdown and not hovering*/
.menudropdown-content a {
  color: white;
  padding: 12px 16px;
  font-weight: bold;
  text-decoration: underline;
  text-underline-position: under;
  display: block; }
  
/* settings for inside dropdown while hovering*/
.menudropdown-content a:hover {
  background-color: rgb(50,50,50); color: lime;}

.menudropdown:hover .menudropdown-content {
  display: block;
  color: red;}

 /* settings for hovering over Menu button*/
.menudropdown:hover .menubutton {
  background-color: black;
  color: lime;
  min-width: 325px; }
  
  }