#mega-menu {
  position : relative;
  top : 4vh;
  left : 10vw;
  width: 80%;
  height: 100px;
  display : inline-block;
  list-style-type: none;
}

.menuItem {
  position: absolute;
  display : flex;
  width: 11vw;
  height : 7vh;
  max-height: 8em;
  justify-content: center;
  align-items: center;
  left : calc(13.8vw * var(--i));
  top :   calc(-2px * var(--y));
  transform: rotate(var(--r));
  text-align : center;
  border-radius : 10px;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;  
}

.menuItem:hover {
    transform: scale(1.2);
    z-index : 99;
}

#mega-menu li:nth-child(1) { --i: 0; }
#mega-menu li:nth-child(2) { --i: 1; }
#mega-menu li:nth-child(3) { --i: 2; }
#mega-menu li:nth-child(4) { --i: 3; }
#mega-menu li:nth-child(5) { --i: 4; }
#mega-menu li:nth-child(6) { --i: 5; }

#mega-menu li:nth-child(1) { --y: 0; }
#mega-menu li:nth-child(2) { --y: 1; }
#mega-menu li:nth-child(3) { --y: 2; }
#mega-menu li:nth-child(4) { --y: 2; }
#mega-menu li:nth-child(5) { --y: 1; }
#mega-menu li:nth-child(6) { --y: 0; }

/*#mega-menu li:nth-child(1) { --r: -1deg; }
#mega-menu li:nth-child(2) { --r: -2deg; }
#mega-menu li:nth-child(3) { --r: -3deg; }
#mega-menu li:nth-child(4) { --r: 3deg; }
#mega-menu li:nth-child(5) { --r: 2deg; }
#mega-menu li:nth-child(6) { --r: 1deg; }

*/
#mega-menu li:nth-child(1) { background-image : url(/currentTheme/css/images/buttons/1.png) }
#mega-menu li:nth-child(2) { background-image : url(/currentTheme/css/images/buttons/2.png) }
#mega-menu li:nth-child(3) { background-image : url(/currentTheme/css/images/buttons/3.png) }
#mega-menu li:nth-child(4) { background-image : url(/currentTheme/css/images/buttons/4.png) }
#mega-menu li:nth-child(5) { background-image : url(/currentTheme/css/images/buttons/5.png) }
#mega-menu li:nth-child(6) { background-image : url(/currentTheme/css/images/buttons/6.png) }
#mega-menu li:nth-child(7) { background-image : url(/currentTheme/css/images/buttons/7.png) }
#mega-menu li:nth-child(8) { background-image : url(/currentTheme/css/images/buttons/8.png) }

.menuItem a {
	width : 100%;
	height : 100%;
	display: grid; 
	place-items: center;	
    text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
	filter : drop-shadow(5px 5px 5px black);
	font-weight : bolder;
}


.menuItem a:link {
	text-decoration:none; 
	overflow-wrap: break-word;
	font-size: clamp(14px, 4vw, 18px);
	color : #ffeca5;
	text-shadow: -1px -1px 0 black,  
               1px -1px 0 black,
               -1px 1px 0 black,  
               1px 1px 0 black;

}

.menuItem a:visited {
	text-decoration:none;
	color : #ffeca5;
}

.menuItem a:hover {
	text-decoration:none;
}

.menuItem a:visited:hover {
	text-decoration:none;
	font-weight : bold;
	color : #ffeca5;
}


.menuFill {
	width : 100%;
	height : 100%;
}

#cartDone {
	text-align : center;
	width : 80%;
	margin-left : auto;
	margin-right : auto;
	line-height : 2em;
	font-size : 1.5em;
}

@media only screen and (max-device-width: 767px) {


.menuItem a:link {
	font-size: clamp(32px, 2vw, 32px);
	-webkit-transform:scale(1,1.5); /* Safari and Chrome */
    -moz-transform:scale(1,1.5); /* Firefox */
    -ms-transform:scale(1,1.5); /* IE 9 */
    -o-transform:scale(1,1.5); /* Opera */
    transform:scale(1,1.5); /* W3C */
    line-height : 0.9em;
    text-overflow: ellipsis;
}

    #mega-menu li:nth-child(5) a { 
    	font-size : 0.75em;
    }
    

}