.nav-button {
    position: relative;
    display: inline-block;
    padding: 3px 3px;
    background: #333;
    border-top: 2px solid #666;
    border-bottom: 2px solid #111;
    clip-path: polygon(0% 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 0% 100%);
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.2s;
  }
  
  .nav-button:hover {
    filter: brightness(1.15);
  }
  
  .nav-button .inner {
    display: block;
    padding: 5px 28px 5px 14px;
    background: linear-gradient(180deg,
      #ffe97a 0%,
      #f5c200 18%,
      #c98000 50%,
      #7a4800 68%,
      #b87000 85%,
      #e8a000 100%
    );
    color: #1a0a00;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,245,150,0.9);
    border-bottom: 1px solid rgba(0,0,0,0.6);
    clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%);
  }
  /* CSS for advanced search panel from W3C (edited)! */

/* The sidepanel menu */
.sidepanel {
	width: 0;           /* hidden @start, expanded with JS */
	position: fixed;    /* Stay in place */
	z-index: 1;         /* Stay on top */
	top: 200px;         /* shift down (under nav bar) */
	left: 0;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding: 0;
	transition: 0.4s;   /* 0.4 second slide transition*/
}

/* Add padding to side panel */
.sidePanelWrapper {
	padding: 10px;
	background-color: #191919;
	color: #fff;
}

/* Put heading and close cross next to each other */
.sidepanel-header {
	display: flex;
	justify-content: space-between;
}

/* Cross Styling */
.sidepanel a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	color: #E1E1E1;
	transition: 0.3s;

}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
	color: #ffaeae;
}

/* Position and style the close button (top right corner) */
.closebtn {
	top: 0;
	font-size: 36px;
}