/* css/buttonStyles.css */
  .menu-container {
      position: fixed;
      top: 10px;
      right: 10px;
    }

/*  This is the menu icon that appears in the upper right hand corner */

    .menu-button {
		position: fixed; /* Keeps the button fixed in place relative to the viewport, so it doesn't move when scrolling */
		top: 20px; /* Sets the distance from the top of the viewport to position the button */
		right: 20px; /* Sets the distance from the right edge of the viewport to position the button */
		z-index: 1000; /* Ensures the button appears on top of other elements with lower z-index values */
		background-color: #000000; /* Sets the background color of the button to black */
		border: none; /* Removes any default border around the button */
		color: #FFFF00; /* Sets the text/icon color inside the button to yellow */
		font-size: 24px; /* Sets the size of the icon inside the button */
		cursor: pointer; /* Changes the cursor to a pointer when hovering over the button, indicating it's clickable */
		width: 50px; /* Defines the button's width */
		height: 50px; /* Defines the button's height */
		border-radius: 50%; /* Makes the button round by giving it a 50% border radius */
		display: flex; /* Uses flexbox to center the icon within the button */
		align-items: center; /* Vertically centers the icon inside the button */
		justify-content: center; /* Horizontally centers the icon inside the button */
    }

    .menu-options {
	
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      width: 200px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
	  	z-index: 3;
	  
    }

    .menu-option {
	padding: 10px;
	margin: 5px 0;
	text-decoration: none;
	color:#FFFF00;	          /* THIS GETS OVER WRITTEN BY LINK COLOR ON LOCAL PAGE SINCE THEY ARE LINKS NOT JUST TEXT */
	background-color: #000000;
	display: block;
	border-radius: 5px; /* Rounded corners */
	transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .menu-option:hover {
	background-color: #FFFF00; /* Darker background on hover */
	color:#000000;
	transform: scale(1.15); /* Scale by 150% on hover */
    }