body {
      font-family: Arial, sans-serif;
      background-color: #1c1c1c;
      color: #f1f1f1;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
	  align-items: start;
	  height: 100vh;

    }

    /* Styling for the container */
    .container {
      width: 100%;
      max-width: 1200px;
      background-color: #2a2a2a;
      padding: 10px;
      border-radius: 3px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    }

    h1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 5px;
    }
	
	p {
      font-size: 1rem;
    }

    /* Table styling */
    table {
      width: 100%;
      border-collapse: collapse;
      /*margin-top: 5px;*/
    }

    th, td {
      /*padding: 6px;*/
      text-align: left;
      border-bottom: 1px solid #444;
    }
	
	th:link{
      padding: 6px;
      text-align: center;
      border-bottom: 1px solid #444;
    }
	
	td:link {
      padding: 6px;
      text-align: center;
      border-bottom: 1px solid #444;
    }
	
    th {
      background-color: #444;
      color: #f1f1f1;
    }

    td {
      background-color: #333;
    }

    tr:hover {
      background-color: #555;
    }

    .footer {
      text-align: center;
      font-size: 1rem;
      margin-top: 10px;
    }
	
	.cell-green {
		background-color: #204020; /* Mild green */
		color: #a0e0a0;
	}

	.cell-red {
		background-color: #402020; /* Mild red */
		color: #e0a0a0;
	}
	
	a {
    color: #1e90ff; /* Bright blue */
    text-decoration: none;
    transition: color 0.3s ease;
}

	/* Hover effect */
	a:hover {
		color: #ff9800; /* Orange */
		text-decoration: underline;
	}

	/* Visited links */
	a:visited {
		color: #bb86fc; /* Soft purple */
	}

	/* Active links */
	a:active {
		color: #ff5252; /* Red */
	}

	/* Focused links for accessibility */
	a:focus {
		outline: 2px solid #ff9800;
	}
	
	 /* Navbar container */
	.navbar {
	  overflow: hidden;
	  background-color: #333;
	  font-family: Arial;
	}

	/* Links inside the navbar */
	.navbar a {
	  float: left;
	  font-size: 16px;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}

	/* The dropdown container */
	.dropdown {
	  float: left;
	  overflow: hidden;
	}

	/* Dropdown button */
	.dropdown .dropbtn {
	  font-size: 16px;
	  border: none;
	  outline: none;
	  color: white;
	  padding: 14px 16px;
	  background-color: inherit;
	  font-family: inherit; /* Important for vertical align on mobile phones */
	  margin: 0; /* Important for vertical align on mobile phones */
	}

	/* Add a red background color to navbar links on hover */
	.navbar a:hover, .dropdown:hover .dropbtn {
	  background-color: green;
	}

	/* Dropdown content (hidden by default) */
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
	  float: none;
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}

	/* Add a grey background color to dropdown links on hover */
	.dropdown-content a:hover {
	  background-color: #ddd;
	}

	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
	  display: block;
	} 
	
	/* Tooltip container */
	.tooltip {
	  position: relative;
	  display: inline-block;
	  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}

	/* Tooltip text */
	.tooltip .tooltiptext {
	  visibility: hidden;
	  width: 200px;
	  background-color: black;
	  color: #fff;
	  text-align: center;
	  padding: 5px 0;
	  border-radius: 6px;
	  left: 110%;
	 
	  /* Position the tooltip text - see examples below! */
	  position: absolute;
	  z-index: 1;
	}

	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
	  visibility: visible;
	}