<style>
	body {
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
	  }

	  nav {
		opacity: 0.95;
		text-opacity: 0.0;
		background-color: black;
		color: white;
		display: grid;
		justify-content: right;
		align-items:left;
		padding: 12px 12px ;
		top:87px;
		z-index:16;
		position: fixed;
		width:100%;
	  }
    .indented {
      padding-left: 15pt;
      padding-right: 15pt;
    }
    a.button {
        padding: 7px 50px;
        border: 1px outset buttonborder;
        border-radius: 3px;
        color: white;
        background-color: #888888;
        text-decoration: none; 
        font-weight: bold;
    }
    .button:hover {
        padding: 7px 50px;
        border: 1px outset buttonborder;
        border-radius: 3px;
        color: white;
        background-color: #4CAF50;
        text-decoration: none; 
        font-weight: bold;
    }
	  .logo {
		font-size: 1rem;
	  }

	  ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
	  }

	  ul li {
		margin-right: 20px; 
	  }

	  ul li a {
		color: white;
		text-decoration: none;
		transition: color 0.3s;	  
	  }

	  ul li .active1 {
		color: yellow;
		font-weight: bold;
	  }

	  ul li a:hover {
		color: yellow;
	  }

	  .checkbtn {
		font-size: 20px;
		color: white;
		cursor: pointer;
		display: none;
	  }

	  #check {
		display: none;
	  }

	  @media (max-width: 1500px) {
		.checkbtn {
		  display: flex;
		  order: 1;
		  margin-right: 20px;
		}

		ul {
		  position: fixed;
		  top: 125px;
		  right: -100%;
		  background-color: green;
		  width: 100%;

		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: left;
		  transition: all 0.3s;
		  margin: 0;
		  padding: 0;
		}

		ul li {
		  margin: 0 0;
		}

		ul li a {
		  font-size: 18px;
		}
		#check:checked ~ ul {
		  right: 0;
		}
	  }

	.image {
	  opacity: 1;
	  display: block;
	  width: 100%;
	  height: auto;
	  transition: .5s ease;
	  backface-visibility: hidden;
	  }

	.middle {
	  transition: .5s ease;
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	}

	.container:hover .image {
	  opacity: 0.3;
	}

	.container:hover .middle {
	  opacity: 1;
	}

	.text {
	  background-color: #007fac;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  padding: 12px 12px;
	  border: 2px solid #ffffff;
	  border-radius: 15px;
	}
	footer {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 75px;
	}
	div.tablecontainer {
	  overflow-x: auto;
	}
	/* Tooltip container */
	.tooltip {
	  position: relative;
	  display: inline-block;
	  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
	  cursor: pointer;
	}

	/* Tooltip text */
	.tooltiptext {
	  visibility: hidden; /* Hidden by default */
	  width: 130px;
	  background-color: black;
	  color: #ffffff;
	  text-align: center;
	  padding: 5px 0;
	  border-radius: 6px;
	  position: absolute;
	  z-index: 1; /* Ensure tooltip is displayed above content */
	}

	/* Show the tooltip text on hover */
	.tooltip:hover .tooltiptext {
	  visibility: visible;
	}
</style>	