#menu {padding: 1em;background-color: #008300;}
#menu a {text-decoration: none;color: white;}
#menu li {list-style-type: none;}
.menu {display: none; flex-direction: column; width: 100%;}
.menu-toggle:checked ~ .menu {display: flex;}
.menu-toggle { display: none; }
.hamburger { display: block; cursor: pointer; }
.dropdown { position: relative; }
.dropdown-content {position: absolute;display: none;top: 100%;left: 0;background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
@media (min-width: 768px) {
	#menu li {padding-right: 2em; font-size: 1.5em}
	.hamburger { display: none; } /* Hide hamburger */

	.menu {
		display: flex; /* Always show menu */
		flex-direction: row;
	}

	.dropdown { position: relative; }

	.dropdown-content {
		position: absolute;
		display: none; /* Hidden until hover */
		top: 100%;
		left: 0;
		background-color: white;
	}

	.dropdown:hover .dropdown-content {
		display: block; /* Show dropdown */
	}
}